SVG import bug: fails to import shadows exported from Figma (using filters)
Examples (all of these should render drop shadows or inner shadows, but import as plain circles without shadows):
Drop shadows:
<svg width="294" height="305" viewBox="0 0 294 305" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d_0_3)">
<circle cx="127.021" cy="127.021" r="127.021" fill="#FF7575" fill-opacity="0.6"/>
</g>
<defs>
<filter id="filter0_d_0_3" x="0" y="0" width="293.126" height="304.293" 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 dx="27.9167" dy="39.0834"/>
<feGaussianBlur stdDeviation="5.58335"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_0_3"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_0_3" result="shape"/>
</filter>
</defs>
</svg>
<svg width="294" height="305" viewBox="0 0 294 305" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d_1_8)">
<circle cx="127.021" cy="127.021" r="127.021" fill="#FF7575" fill-opacity="0.6" shape-rendering="crispEdges"/>
</g>
<defs>
<filter id="filter0_d_1_8" x="0" y="0" width="293.126" height="304.293" 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 dx="27.9167" dy="39.0834"/>
<feGaussianBlur stdDeviation="5.58335"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1_8"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1_8" result="shape"/>
</filter>
</defs>
</svg>
Inner shadows:
<svg width="255" height="255" viewBox="0 0 255 255" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_i_1_2)">
<circle cx="127.021" cy="127.021" r="127.021" fill="#FF7575"/>
</g>
<defs>
<filter id="filter0_i_1_2" x="0" y="0" width="265.209" height="265.209" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<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 dx="27.9167" dy="39.0834"/>
<feGaussianBlur stdDeviation="5.58335"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_1_2"/>
</filter>
</defs>
</svg>
2
votes
-
Yes, these get lost for me as well when I try.
The shadows get displayed fine when viewed in a browser or in Inkscape.
Affinity fails to import shadows too.