To create an SVG that meets your needs perfectly, you may have to adapt your Sketch layers in certain ways or tweak the exported markup. This may seem complicated and tedious, but it’s not difficult and it opens up a world of possibilities for how you use an SVG.
SVG stands for Scalable Vector Graphics. It’s a graphics format, like JPEG or PDF, and the whole idea behind them is that they aren’t limited to a certain resolution; because instead of being made from pixels, SVG designs are made from vector shapes.
Although they can be used in a variety of places, SVGs are most at home on the web. The following examples showcase its potential.
SVGs are like your Artboards in Sketch — although they have specific dimensions, they also contain infinite detail, because the layers/elements inside are vector shapes. So you can display an SVG graphic at any size, and it will never appear pixelated.
For an SVG, the primary factor is detail: how many layers are in the graphic and how many custom gradients, masks, or effects need to be described.
The dimensions of the graphic have almost no impact on the file size. For most icons and other design elements, SVG is a clear winner when it comes to file size (and load times).