Posted 5 months ago. Visible to the public.

Understanding grid sizes of (SVG) icons

A primer on vector graphics

For rastered image formats like JPG or PNG, each pixel is basically drawn on a fixed size canvas. To display such an image in a different size (say: 1.5 times larger than original), the renderer (your Browser / GPU / Monitor) needs to interpolate the color values of missing pixels. The image will appear slightly blurred.

This is different for vector graphics like the SVG (Scalable Vector Graphics) format. You can imagine SVG files as XML file containing mathematical functions that are used to draw or fill every visible figure. Go ahead and open an SVG file, most of them are easily readable. The source of this free to use icon looks like this:

<?xml version="1.0" ?> <svg id="Layer_1" style="enable-background:new 0 0 128 128;" version="1.1" viewBox="0 0 128 128" xml:space="preserve" xmlns="" xmlns:xlink=""> <style type="text/css"> .st0{fill-rule:evenodd;clip-rule:evenodd;} .st1{fill-rule:evenodd;clip-rule:evenodd;fill:#7ACED7;} </style> <g id="XMLID_10_"> <path class="st0" d=" M96.2,59.8l4.5-4.5c6.2-6.2,16.4-6.2,22.6,0c6.2,6.2,6.2,16.4,0,22.6l-25.5,25.5h0.5 c4.6,0,8.4,3.8,8.4,8.4v7.8c0,4.6-3.8,8.4-8.4,8.4H15.2c-4.6,0-8.4-3.8-8.4-8.4v-7.8c0-4.1,3-7.6,6.9-8.3l0-0.1V41.2 ... v-7.8c0-2.4-2-4.4-4.4-4.4H15.2z" id="XMLID_15_"/> <path class="st1" d=" M17.7,103.3h74.5L120.5,75c4.7-4.7,4.7-12.3,0-17l0,0c-4.7-4.7-12.3-4.7-17,0L92.2,69.4V41.2 C92.2,20.8,75.4,4,55,4l0,0C34.5,4,17.7,20.8,17.7,41.2V103.3L17.7,103.3z M37.2,72v18c0,1.1-0.9,2-2,2c-1.1,0-2-0.9-2-2V72 c0-1.1,0.9-2,2-2C36.3,70,37.2,70.9,37.2,72L37.2,72z M57.2,72v18c0,1.1-0.9,2-2,2c-1.1,0-2-0.9-2-2V72c0-1.1,0.9-2,2-2 C56.3,70,57.2,70.9,57.2,72z" id="XMLID_11_"/> </g> </svg>

SVG files define a unitless viewBox, which contains all visible elements that are drawn with shapes like polygons, paths and circles rather than color values (=pixels) on a grid. Some widely used tags are:

Understanding grid sizes of SVG icons

From what we learned above, vector graphics are great! You can easily scale an SVG file without losing image quality. In reality, for a scaled SVG image to be perfectly rendered, its grid size must be respected.

Imagine an SVG icon with a quadratic viewBox of 24x24 (we'll refer to this as the grid):

<?xml version="1.0" ?> <svg viewBox="0 0 24 24"> ... </svg>

If designed wll, this icon can be rendered perfectly by your Browser with pixel resolutions like 24px², 48px² etc. Intermediate resolutions like 36px² however require antialiasing techniques, since there is no such thing as "half pixels" that can be displayed on your monitor. While this might not be noticable on heavier icons (example), delicate icons with thin lines will be blurred unless they are scaled as a multiple of the viewBox grid.

You can inspect the icon rendering by using a color picker of your Browser's DevTools, e.g. when scaling this icon wrongly:


Another thing to keep in mind is that scaling icons will always result in thicker line strokes. Consider asking your Designer for separate icons with adjusted stroke sizes if you want to display the same icon in different sizes.

Once an application no longer requires constant development, it needs periodic maintenance for stable and secure operation. makandra offers monthly maintenance contracts that let you focus on your business while we make sure the lights stay on.

Owner of this card:

Michael Leimstädtner
Last edit:
4 months ago
by Tobias Kraze
About this deck:
We are makandra and do test-driven, agile Ruby on Rails software development.
License for source code
Posted by Michael Leimstädtner to makandra dev
This website uses cookies to improve usability and analyze traffic.
Accept or learn more