Flutter_svg: SVG with CSS shows black box

Created on 12 Jun 2018 · 9Comments · Source: dnfield/flutter_svg

Hi guys,

i want use your library to render svg file on my app. When load the svg from asset but I saw the black image. I attach the original file, can I help me what's wrong?
Thank a lot
J
cat.svg.zip

css not supported (yet?)

Source

pjcau

Most helpful comment

I resolve, and this it' s very great news, it's necessary to extract from Adobe IA, like Export->Export As... and in next setting page , choose Styling:Inline Style.

screen shot 2018-06-12 at 14 37 43

pjcau on 12 Jun 2018

👍3 🎉2 👎1

All 9 comments

Your example uses CSS in a <style> element. That's not supported at this point, and I don't really have any plans to support it soon - although your example doesn't use particularly complicated or crazy CSS, it's not trivial to support and it's possible to preprocess away. I've attached the output of running this through svgcleaner, which renders fine.
cat_clean.zip

dnfield on 12 Jun 2018

Also - the processing tries to render whatever it can. So even if an unsupported element or stylesheet is present, it still tries to render the file rather than just failing. It might be more reasonable to throw an error in the case where a style sheet is detected at this point though, to avoid this kind of confusion. I'll reopen for discussion of that.

dnfield on 12 Jun 2018

I use Adobe Illustrator to extract to svg file from eps file. So there is some configuration, can we work together so resolve it?

pjcau on 12 Jun 2018

You could try setting your styling option to "Inline styles" (which are supported by this plugin) when you export, as explained here: https://css-tricks.com/illustrator-to-svg/

Or, you can take your output and run it through svgcleaner (linked above - that's what I used to make a working version in cat_clean.zip), which will try to inline the styles for you and do some other optimizations to the file.

dnfield on 12 Jun 2018

👍1

I resolve, and this it' s very great news, it's necessary to extract from Adobe IA, like Export->Export As... and in next setting page , choose Styling:Inline Style.

screen shot 2018-06-12 at 14 37 43

pjcau on 12 Jun 2018

👍3 🎉2 👎1

So we find the same solution!!!! I'm a senior developer, and with this library now it's very fast and powerfull developer with flutter apps, with fantastic assets and very light.
Thank you

Great job

pjcau on 12 Jun 2018

Hi @dnfield,
I have to display some svg images from a server, which I don't have permission to modify. If possible, could you please consider implementing this feature?
Thank you!

lx-an on 13 Sep 2019

I have no plans to do this - doing it right is very complex and likely to be very slow. Sorry.

dnfield on 13 Sep 2019

😕2

Hi @dnfield,
I have to display some svg images from a server, which I don't have permission to modify. If possible, could you please consider implementing this feature?
Thank you!

I have same problem to :(