SVGs with filters not displayed in v15.4.0 on iOS

[fikkatra]

Description

When displaying an SVG that contains a filter, the svg is not displayed when using v15.4.0. It works fine in v15.3.0. The issue only occurs on iOS, Android is fine.

Steps to reproduce

Add the following code/files:

App.ts:

import React from 'react';
import {SafeAreaView, Text} from 'react-native';
import SvgNoFilter from './user-location-dot-no-filter.svg';
import SvgFilter from './user-location-dot.svg';

function App(): React.JSX.Element {
  return (
    <SafeAreaView>
      <Text>SVG without filter</Text>
      <SvgNoFilter />
      <Text>SVG with filter</Text>
      <SvgFilter />
    </SafeAreaView>
  );
}

export default App;

user-location-dot-no-filter.svg:

<svg width="30" height="31" viewBox="0 0 30 31" fill="none" xmlns="http://www.w3.org/2000/svg">
    <g >
        <circle cx="15" cy="14" r="12" fill="white"/>
        <circle cx="15" cy="14" r="8" fill="#1770E5"/>
    </g>
</svg>

user-location-dot.svg:

<svg width="30" height="31" viewBox="0 0 30 31" fill="none" xmlns="http://www.w3.org/2000/svg">
    <g filter="url(#filter0_dd_5170_65449)">
        <circle cx="15" cy="14" r="12" fill="white"/>
        <circle cx="15" cy="14" r="8" fill="#1770E5"/>
    </g>
    <defs>
        <filter id="filter0_dd_5170_65449" x="0.5" y="0" width="29" height="30.5" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
            <feOffset dy="2"/>
            <feGaussianBlur stdDeviation="1.25"/>
            <feComposite in2="hardAlpha" operator="out"/>
            <feColorMatrix type="matrix" values="0 0 0 0 0.301961 0 0 0 0 0.403922 0 0 0 0 0.682353 0 0 0 0.17 0"/>
            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_5170_65449"/>
            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
            <feOffset/>
            <feGaussianBlur stdDeviation="1"/>
            <feComposite in2="hardAlpha" operator="out"/>
            <feColorMatrix type="matrix" values="0 0 0 0 0.243137 0 0 0 0 0.247059 0 0 0 0 0.258824 0 0 0 0.08 0"/>
            <feBlend mode="normal" in2="effect1_dropShadow_5170_65449" result="effect2_dropShadow_5170_65449"/>
            <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_5170_65449" result="shape"/>
        </filter>
    </defs>
</svg>

Result:

Now revert back to v15.3.0:

npm i [email protected]
cd ios && pod install && cd ..     

Result:

Snack or a link to a repository

https://github.com/fikkatra/react-native-svg-with-filters

SVG version

15.4.0

React Native version

0.74.3

Platforms

iOS

JavaScript runtime

None

Workflow

React Native

Architecture

None

Build type

Debug app & dev bundle

Device

iOS simulator

Device model

iPhone 15 Pro, iOS 17.5

Acknowledgements

Yes

[jakex7]

Hi @fikkatra,
thank you for reporting that.
react-native-svg-transformer transforms your file into this (V) stripping out filters, however leaving filter prop with non-existing URL. I've created the fix for that and will post it soon.

<Svg 
  fill="none" 
  height={31} 
  preserveAspectRatio="xMidYMid meet" 
  viewBox="0 0 30 31" 
  width={30} 
  xmlns="http://www.w3.org/2000/svg">
  <G filter="url(#a)">
    <Circle cx={15} cy={14} fill="white" r={12} />
    <Circle cx={15} cy={14} fill="#1770E5" r={8} />
  </G>
  <Defs />
</Svg>

[qwertychouskie]

This issue also appears to affect Safari, and the issue with Safari is still present in 15.9.0. Going into the element inspector and removing the filter=blahblah makes the SVG show up. Should I open a new bug report for this?