Reply To: Pixel-Perfect SVG Icons?

[mhodges44]

Well, I think you slightly misunderstand exactly what an SVG is. Many are under the impression that an SVG is just another image file format, but, it is much more than that. SVGs are actually comprised of XML code that all work within the confines of the SVG Canvas, viewport, and viewbox. A great article explaining this is here:
https://sarasoueidan.com/blog/svg-coordinate-systems/

Because SVGs are based on its own coordinate system, it can preserve its aspect ratio at any size. As the viewport gets larger/smaller, the viewbox responds appropriately.

Also, because SVGs are created from XML elements, they can be styled with CSS (to a point) and interacted with with javascript, whereas a plain image, in any format, cannot.

I would recommend watching Brian Treese’s pluralsight tutorial on SVG Fundamentals as well. He goes into detail about how it all works and how it applies to the web.

Here’s the link for the pluralsight video: https://app.pluralsight.com/library/courses/svg-fundamentals/table-of-contents

Hope this helps!