SVG rendering incorrectly
See original GitHub issueHi there,
I’ve been debugging this issue for a while and I’m having trouble tracking down the issue.
An SVG I’m loading in React using this library is not rendering correctly.
It looks like:
But it should look like:
Both of those screen shots are rendered in Chrome. The first one is using this library with the prescribed React method. The second one, I use raw-loader
and dangerouslySetInnerHtml
on an element and it works.
Does anyone know what might be causing this?
Are there any optimization steps that I can turn off that might be corrupting the image?
Thanks!
Issue Analytics
- State:
- Created 7 years ago
- Comments:8 (3 by maintainers)
Top Results From Across the Web
HTML SVG Elements not rendering properly - css
I am trying to display different SVG elements (line, ellipse, rectangle) in an HTML but facing this strange issue of elements getting cut ......
Read more >SVGs rendering incorrectly in reading mode - Bug reports
Open a new obsidian note. · Paste in an SVG that triggers the bug. · Observe that in edit mode the output is...
Read more >Why is text in an svg rendering incorrectly in Firefox & ...
Easy fix: in Illustrator, highlight image then Type > Create Outlines. Then follow Export steps in the question!
Read more >SVG - An image is rendered incorrectly
We investigated this behavior and found that it's caused by an issue in our rendering engine. We fixed it in the scope of...
Read more >5 Most Common Problems Faced by SVG Users
Your SVG namespace is not declared properly causing the SVG image to be displayed incorrectly. Quick fix: Check and fix your SVG namespaces....
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 FreeTop 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
Top GitHub Comments
Shipped with 0.0.31
Hi @princed, thanks for the quick response.
I discovered the issue. It turns out it was use of the
mask
attribute. Once I deleted any use of themask
attribute from the svg file, it worked.I’m not sure if this is related directly to #27 but I’ve attached the original and modified svg files so you can use as a failing test case if you want.
Original:
Modified (working):