Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
SVGs using CRLF encoding doesn't work with inline stylesheets.
See original GitHub issueA 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…
Issue Analytics
- State:
- Created 7 years ago
- Comments:5 (3 by maintainers)
Top Results From Across the Web
Inline SVG in CSS - Stack Overflow
I've forked a CodePen demo that had the same problem with embedding inline SVG into CSS. A solution that works with SCSS is...
Read more >[Fix] CSS SVG fill not working - Weekend Projects
Make sure to use inline SVGs instead of external; If you are using url() method - make sure to encode values such as...
Read more >Extract web-optimized SVG files from Libraries - Adobe Support
Extract web-optimized SVG files from Libraries and customize the properties of ... With carriageReturn set to true, line endings use CRLF.
Read more >ODS HTML5 Statement - SAS Help Center
Default, INLINE is the default for displaying SVG. Restrictions, An image map is not generated using SVG with ODS Graphics. The image map...
Read more >Probably Don't Base64 SVG | CSS-Tricks
You can leave the encoding in UTF-8, and drop the <svg> syntax right ... for his email a few months ago that highlighted...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Closing. Reopen if you experience in version 0.4.0-beta.2 or greater
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.