Repository: flutter
Issue: [flutter_svg] <image> tags not rendered
Labels: package,p: flutter_svg

_Imported from https://github.com/dnfield/flutter_svg/issues/980_

Original report by @billyjuliux on Aug 24, 2023

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!

---
Comment by @minseok-jeong-gn on Aug 26, 2023
Same issue

---
Comment by @tsrCodes on Aug 27, 2023
Any Solution ??


---
Comment by @AristideVB on Aug 30, 2023
Also experiencing this issue, I ended up stacking my PNGs behind my SVG

---
Comment by @pipe0919 on Sep 8, 2023
A solution for me was to download the img as a pdf and then convert to svg @AristideVB @tsrCodes @minseok-jeong-gn @billyjuliux 

---
Comment by @devnta on Sep 14, 2023
> 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!

---
Comment by @pipe0919 on Sep 14, 2023
> > 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

---
Comment by @dishankjindal1 on Nov 7, 2023
This is a problem, svg which contains images inside are working fine on browser but images are getting distorted in flutter/react-native both

---
Comment by @ElDuderini on Dec 4, 2023
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.

---
Comment by @da-coid on Jan 10, 2024
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 !

---
Comment by @adimshev on Jan 15, 2024
any updates?

---
Comment by @fisforfaheem on Feb 6, 2024
who will fix this 

---
Comment by @abdel-ke on Feb 13, 2024
for me i converted the svg to json with package xml2json then i mapped it


---
Comment by @fisforfaheem on Feb 13, 2024
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
> <https://github.com/dnfield/flutter_svg/issues/980#issuecomment-1941292774>,
> or unsubscribe
> <https://github.com/notifications/unsubscribe-auth/AIRXJSFNQZFCFJURKAYH3PDYTNFT3AVCNFSM6AAAAAA34VXG3OVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSNBRGI4TENZXGQ>
> .
> You are receiving this because you commented.Message ID:
> ***@***.***>
>


---
Comment by @minseok-jeong-gn on Feb 14, 2024
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

---
Comment by @fisforfaheem on Feb 14, 2024
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
> <https://github.com/dnfield/flutter_svg/issues/980#issuecomment-1942933215>,
> or unsubscribe
> <https://github.com/notifications/unsubscribe-auth/AIRXJSB5FZTGTMOGZOLGV6DYTQFBTAVCNFSM6AAAAAA34VXG3OVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSNBSHEZTGMRRGU>
> .
> You are receiving this because you commented.Message ID:
> ***@***.***>
>


---
Comment by @francisnumbi-chd on Feb 19, 2024
This is really pissing me ! Why can't they find a solution !

---
Comment by @fisforfaheem on Feb 22, 2024
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
> <https://github.com/dnfield/flutter_svg/issues/980#issuecomment-1952888489>,
> or unsubscribe
> <https://github.com/notifications/unsubscribe-auth/AIRXJSEBH6IV4PKHGT3QNBLYUOAUFAVCNFSM6AAAAAA34VXG3OVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSNJSHA4DQNBYHE>
> .
> You are receiving this because you commented.Message ID:
> ***@***.***>
>


---
Comment by @yousefak007 on Mar 23, 2024
same for me

---
Comment by @fisforfaheem on Jul 22, 2024
Kindly give us an update