- This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
Viewing 3 posts - 1 through 3 (of 3 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Hey guys,
As a new developer, I’m trying to wrap my head around SVG icons. From my understanding, different font icons are created to be pixel perfect at different sizes. For example, Google’s Material Icons are recommended at 18px and 24px.
If I were to use IcoMoon to download these icons as SVGs, will they then look crisp at any size, or should I still stick to the recommended font icon sizes?
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!
They should resize well to any scale – but there is of course also a certain minimum after which details will not be very noticeable anymore. The complexity of the svg in question will determine this, so it’ll take a bit of trying what the smallest possible rendering will be.