What are Scalable Vector Graphics (SVG)?
“Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation.” – Wikipedia
This basically means that SVG is made up of lines instead of dots, and can be scaled infinitely without loss of quality.
Why would you use SVG?
Bitmap images (mainly png, jpg, gif, etc.) are made up of tiny squares called pixels. When enlarging an image, the pixels remain flat colored squares, and do not provide any more information than that. That’s why, when images are scaled, they lose quality.
SVG on the other hand, are vector based. Vector graphics use points, lines, curves, and shapes to create, instead of tiny dots. When it gets magnified, the shapes remain the same.
SVG also replaces Flash animation to provide a more efficient, less intensive file type for animation on the web. At the same time, it makes it available for mobile devices that do not support Flash.
While the limit of this means that rendering realistic graphics would be a tedious process (as well as heavy for the machine), and therefore are unsuitable for photographs or complicated illustrations. However, we still recommend the use of SVGs for certain things:
- Background Images
Here are 9 scalable vector graphic examples:
It’s important to note, while most browsers such as Chrome, Firefox, Safari, etc support the use of SVGs, there are still browsers out there that are not up to date. For them to view your icons, you’ll need a fall-back raster image (.png or .jpg) for those browsers.