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 Show archive.org snapshot (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 Show archive.org snapshot 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="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/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:
-
<svg>Show archive.org snapshot to create the viewBox and define a coordinate system -
<g>Show archive.org snapshot to group other tags -
<path>Show archive.org snapshot to create generic shapes -
<circle>Show archive.org snapshot ,<line>Show archive.org snapshot ,<polygon>Show archive.org snapshot ,<rect>Show archive.org snapshot ,<ellipse>Show archive.org snapshot and many more to create pre-defined shapes
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 Show archive.org snapshot , 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 Show archive.org snapshot ), 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 Show archive.org snapshot 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.
