Support the <pattern> element

[rahuldange09]

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="273" width="298"> <defs> <image id="1a54d514-63f6-47f8-a0f4-ed80dsdddsf04a"

Are this type of images supported ? And if how to use them?

[dnfield]

Yes.

Please share an svg that fails to render.

[rahuldange09]

Here please have a look https://easyupload.io/rcu2hb

[dnfield]

This SVG uses <pattern>, which is why it doesn't work. It just so happens someone else asked me a very similar question yesterday. I'm not sure when I'll have time to look more about this, but PRs are welcome to implement it. Here's the relevant part of the spec and MDN:

https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Patterns

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/pattern

https://www.w3.org/TR/SVG11/pservers.html#Patterns

[dnfield]

FWIW, you can generally avoid using pattern elements in SVGs, particularly to display images, but there doesn't seem to be a good reason yet to not support this in flutter_svg.

[dnfield]

Here's an example SVG that should render correctly, pulled from MDN:

<svg viewBox="0 0 230 100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="star" viewBox="0,0,10,10" width="10%" height="10%">
      <polygon points="0,0 2,5 0,10 5,8 10,10 8,5 10,0 5,2"/>
    </pattern>
  </defs>

  <circle cx="50"  cy="50" r="50" fill="url(#star)"/>
  <circle cx="180" cy="50" r="40" fill="none" stroke-width="20" stroke="url(#star)"/>
</svg>

[rahuldange09]

Here's an example SVG that should render correctly, pulled from MDN:

<svg viewBox="0 0 230 100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="star" viewBox="0,0,10,10" width="10%" height="10%">
      <polygon points="0,0 2,5 0,10 5,8 10,10 8,5 10,0 5,2"/>
    </pattern>
  </defs>

  <circle cx="50"  cy="50" r="50" fill="url(#star)"/>
  <circle cx="180" cy="50" r="40" fill="none" stroke-width="20" stroke="url(#star)"/>
</svg>

Oh I see. So for now I need to convert them.

[klaes-ashford]

FWIW, you can generally avoid using pattern elements in SVGs, particularly to display images, but there doesn't seem to be a good reason yet to not support this in flutter_svg.

@dnfield, I was trying to place an image covered to its viewbox, preserving aspect ratio. By default, it fits to the viewbox. I found this stackoverflow link, how to achieve the same. But since, pattern is not supported, can I achieve the same without using pattern and image tags only ?

code I am trying to render : -

<pattern id="a" height="100%" preserveAspectRatio="xMidYMid slice" viewBox="0 0 56 54" width="100%”>
<image width="56" height="54" rx="2.194"  x="17" y="20" xlink:href="$base64" />
</pattern>

I tried this, but this doesn't scale properly. <image width="100%" height="100%" rx="2.194" x="17" y="20" xlink:href="$base64" preserveAspectRatio="xMidYMid slice"/>

[gympro159]

@dnfield I have a similar problem with svg network, so I cann't edit code of svg file. How to fix it? :(

[ali-raza-flutter]

Guys any update on this issue?

[thiagorobertodc]

same here. Probably switching to a PNG for now but would be good to have it fixed since SVG scales better.

[ali-raza-flutter]

I was only facing this issue in two images in my whole project.

So I use this website to convert those images from PNG to SVJ Now they work perfectly and my code is also consistent.

Leaving it here if someone is also facing this issue and want a quick fix

[thiagorobertodc]

God bless you @ali-raza-flutter thanks a lot

[srivastavarnav]

any updates on this please?

[marcoberetta96]

any update?

[guigzp]

any news on this please?

[Pedanfer]

I was only facing this issue in two images in my whole project.

So I use this website to convert those images from PNG to SVJ Now they work perfectly and my code is also consistent.

Leaving it here if someone is also facing this issue and want a quick fix

The problem I have with this is that the PNGs from Figma already have low quality for some reason, only the SVGs look crisp, but the problem surfaces with 30% of them so far, and moving the definitions hasn´t helped. So if I convert a blurry PNG I get a blurry SVG...

[Aryan1g]

Any Updates

[dnfield]

I'm working on a new release that will support this. Alternatively, vector_graphics supports this today.

[Navil]

Any Updates to this ?

[maheshwaran-p]

Hope this tool can help you all friends .

https://svg2widget.web.app/

wee can convert the svg file as a flutter widget by using this tool and it provides the way for best use svg to the flutter developers . find out the sample project and performance metrics here . https://github.com/maheshwaran-p/samplesvg