SVG icons in safari are blurred

Question

I have noticed that svg icons that placed via \'img\' tag aren\'t rendered correctly in safari. They end up being all blurry. I have created a simple html page and pasted the sa

Answer 1

When you put SVG into an tag, it basically bitmaps the vector file. So where the SVG is capable of scaling and remaining sharp at all sizes, the tag treats it analogous to a gif and any scaling will compromise the quality of the image.

Using SVG as an img | CSS Tricks

If I save the SVG to a file, I can use it directly in an tag.

In Illustrator, our artboard was 612px ✕ 502px. That's exactly how big the image will on the page, left to itself. You can change the size of it though just by selecting the img and changing its width or height, again like you could a PNG or JPG. Here's an example of that.

So in short, by using an tag, you lock the size of the base image. This then allows the browser to determine the quality of the image, which is going to be directly proportional to how different from the original size you are trying to display the image. In this case, as can be expected, safari is handling it less elegantly than if you displayed the SVG using another means.