<image> tags not rendered

[billyjuliux]

Hi,

I tried to render svg image which contains <image> tags in <defs> (png image inside svg), but those images were not successfully rendered. Yet other elements of the svg were rendered successfully.

I can't show you the real image, but here is the rough structure of the svg file:

<svg width="52" height="128" viewBox="0 0 52 128" fill="none" xmlns="http://www.w3.org/203/svg" xmlns:xlink="http://www.w3.org/1939/xlink">
<path d="M561.28 0H0V17.66H561.28" fill="#E60013"/>
<mask id="mask0_335_524" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="562" height="178">
<path d="M561.28 0H0V177.66H561.28V0Z" fill="white"/>
</mask>
<g mask="url(#mask0_335_524)">
<path fill-rule="evenodd" clip-rule="even" d="M555" fill="#CF141C"/>
<path fill-rule="evenodd" clip-rule="even" d="M0 151.78V177.66H561.28L0 151.78Z" fill="#CF141C"/>
<rect x="-223" y="-44" width="67" height="35" fill="url(#pattern0)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M561.281 0H385.291L440.381 177.66H561." fill="#CF141C"/>
<rect x="386" y="8" width="171" height="173" fill="url(#pattern1)"/>
</g>
<path d="M211.444 " fill="white"/>
<defs>
<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#image0_3365_52461" transform="matrix(0.0005008 0 0 0.009108 -0.00112783 0)"/>
</pattern>
<pattern id="pattern1" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#image1_3365_52461" transform="matrix(0.000632511 0 0 0.000625199 0 -0.00109684)"/>
</pattern>
<image id="image0_3365_52461" width="1920" height="1009" xlink:href="data:image/png;base64,iVBORw0KGgoAAAbk7CxAAAgAElEQVR4AezdaZMl13kf"/>
<image id="image1_3365_52461" width="1581" height="1603" xlink:href="data:image/png;base64,iVBORw0ACDgXPJAAAKN2lDQ1BzUkdCIElFQzYxOTY2LTIuMQAAeJydlndUU9kWh8I="/>
</defs>
</svg>

I have tried to move the <defs> order to the front and use online tools of svg cleaner but still didn't work.

Any help would be very appreciated. Thanks!

[minseok-jeong-gn]

Same issue

[tsrCodes]

Any Solution ??

[AristideVB]

Also experiencing this issue, I ended up stacking my PNGs behind my SVG

[pipe0919]

A solution for me was to download the img as a pdf and then convert to svg @AristideVB @tsrCodes @minseok-jeong-gn @billyjuliux

[devnta]

A solution for me was to download the img as a pdf and then convert to svg @AristideVB @tsrCodes @minseok-jeong-gn @billyjuliux

Thank you very much, bro!
It worked for me.
But what solution to fix this faster?
Very thanks!

[pipe0919]

A solution for me was to download the img as a pdf and then convert to svg @AristideVB @tsrCodes @minseok-jeong-gn @billyjuliux

Thank you very much, bro! It worked for me. But what solution to fix this faster? Very thanks!

Not now for me

[dishankjindal1]

This is a problem, svg which contains images inside are working fine on browser but images are getting distorted in flutter/react-native both

[ElDuderini]

I've had issues with this as well, but unfortunately can't really do the conversion to a PDF and then back to an SVG since the issues with these images happen with dynamic content managed by CMS.

[da-coid]

if you get asset from figma , download it as png , and then convert to svg with tools that you can find on internet. It works !

[adimshev]

any updates?

[fisforfaheem]

who will fix this

[abdel-ke]

for me i converted the svg to json with package xml2json then i mapped it

[fisforfaheem]

how

…

On Tue, Feb 13, 2024 at 4:34 PM ABDELHAMID EL KEMMAL < ***@***.***> wrote: for me i converted the svg to json with package xml2json then i mapped it — Reply to this email directly, view it on GitHub <#980 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AIRXJSFNQZFCFJURKAYH3PDYTNFT3AVCNFSM6AAAAAA34VXG3OVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSNBRGI4TENZXGQ> . You are receiving this because you commented.Message ID: ***@***.***>

[minseok-jeong-gn]

For the saving time,
If svg file doesn't render correctly,
just use png or jpeg format.

I'm just export image as png or jpeg format if svg file doesn't work.
That saved my time a lot

[fisforfaheem]

That worked! but this should be fixed...by someone..

…

On Wed, Feb 14, 2024 at 6:08 AM minseok-jeong-gn ***@***.***> wrote: For the saving time, If svg file doesn't render correctly, just use png or jpeg format. I'm just export image as png or jpeg format if svg file doesn't work. That saved my time a lot — Reply to this email directly, view it on GitHub <#980 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AIRXJSB5FZTGTMOGZOLGV6DYTQFBTAVCNFSM6AAAAAA34VXG3OVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSNBSHEZTGMRRGU> . You are receiving this because you commented.Message ID: ***@***.***>

[francisnumbi-chd]

This is really pissing me ! Why can't they find a solution !

[fisforfaheem]

I agree with you.

…

On Mon, Feb 19, 2024 at 10:02 PM Francis Numbi ***@***.***> wrote: This is really pissing me ! Why can't they find a solution ! — Reply to this email directly, view it on GitHub <#980 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AIRXJSEBH6IV4PKHGT3QNBLYUOAUFAVCNFSM6AAAAAA34VXG3OVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSNJSHA4DQNBYHE> . You are receiving this because you commented.Message ID: ***@***.***>

[yousefak007]

same for me

[fisforfaheem]

Kindly give us an update