Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Pixel-Perfect SVG Icons?

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #236117
    JABacchetta
    Participant

    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?

    #236118
    mhodges44
    Participant

    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!

    #236120
    Shikkediel
    Participant

    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.

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.