Flutter_svg: 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? :(