The Mijingo Blog

Latest news, updates, free tutorials, and more from Mijingo.

Why should you use SVG?

by Ryan Irelan

There are several reasons why SVG might be a good way to create some graphical assets on your website.

Scalable

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.

File Size

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.

Modifiable via CSS and JavaScript

Since SVGs aren’t bitmapped images, they’re easily modified using both JavaScript and CSS. This makes it simple to have a base SVG file and repurpose it in multiple locations on the site with a different treatment.

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!

Filed Under: Free Tutorials, SVG