SVGs using CRLF encoding doesn't work with inline stylesheets.

[guncha]

A random issue, but I just noticed that after exporting an icon from Illustrator the colors didn't display correctly. This is what the rendered DOM looks like:

It's that weird 
 stuff that is breaking the stylesheet. It seems like Illustrator exports SVGs with CRLF line endings by default, even if I'm on a Mac. Something something lowest common denominator. Then the CR part ends up being encoded in the stylesheet.

Sigh..

[jhamlet]

What system are you using Illustrator in (Windows, or Mac)?

How are you getting Illustrator to export a style block (Advanced Properties > CSS Properties > Style Elements)?

What document encoding are you using (utf-8)?

Are you setting an encoding option on your outer html tag? The xml file produced by Illustrator sets the encoding in the xml tag, which is stripped when the SVG is turned into a react element. See if the colors show up if you add an encoding="utf-8" attribute (or a <meta charset="utf-8"> tag in the head element).

[guncha]

This is happening with Illustrator CS6 on a Mac using CSS Properties -> Style Elements. Encoding is set to UTF-8. The page already has a <meta charset="utf-8"> tag, so no change there. It only works if I convert the XML to use LF line endings.

[jhamlet]

I can not reproduce this.

How do you convert the XML to use linefeeds instead?

[guncha]

I am converting it from CRLF to just LF using my editor (Atom). Here, I'll upload an example SVG with CRLF line endings:

profile.svg.zip

The icon should be colored gold due to the .st0 { fill: gold } stylesheet, but it doesn't work due to this issue.

[jhamlet]

Closing. Reopen if you experience in version 0.4.0-beta.2 or greater