by Ryan Irelan
There are several reasons why SVG might be a good way to create some graphical assets on your website.
It’s what the “S” stands for. Unlike traditional images (like PNG or JPG) SVG easily scales from small to big without loss of quality or fidelity. This is because the “V” part of the name–vector–describes the series of paths, shapes, and more that are created using connect points plotted on x-y axes.
You might have noticed that SVG has come back into favor recently among web designers and web developers because of a combination of better browser support (see below), improved screen resolution (like Retina screens on iPhone, iPads, and MacBooks) and Responsive Web Design.
Another reason to use SVG is because of a file size. SVGs are typically smaller files. For example, I took a large size version of my Mijingo logo and converted it to an SVG of the same canvas size. The PNG image was 30KB and the SVG image was only 6 KB. Big savings, especially if you working on a site that requires a lean performance budget.
SVG images aren’t perfect for everything, however. Ideally, you’d use SVGs for icons, simple line graphics, and, if possible, logos. SVGs are ideal for imagery that are used multiple times on a page (like interface icons).
Do you want to learn more about SVG? Check out our course Up and Running with SVG to get started!