0
145
ViewsInline Raw SVG has worse quality than when placed in <img> tag
I am creating SVGs directly in the client. Therefore, in my Javascript in the client I am creating the raw SVG and manipulating it depending on the user input.
I took the raw SVG and placed it in a file and then displayed that SVG file right next to the raw inline SVG. The result was much more crispy.
Here is the raw inline SVG:
Compare this to the SVG when placed in a file and using an tag:
As you can see the quality varies a lot!
Here is a codepen link so that you can directly grab the raw SVG if you would like to perform tests: https://codepen.io/fabiansvensson/pen/WNMJpQr
<html>
<body>
<!-- THE RAW SVG -->
<svg></svg>
</body>
</html>
Importantly, I did notice that the quality seems to be better in the codepen, which leads me to think that perhaps the problem has something to do with the styling of the page. I haven't been able to find any reason why this might be. I am considering writing the raw SVG directly to file (not ideal) or somehow making the styling of the SVG independent from the rest of the page (e.g. iFrame).
Any ideas what might be causing this and how to solve the problem?