Website Logo. Upload to /source/logo.png ; disable in /source/_includes/logo.html

Up and Running with SVG

An SVG primer for everyone. Created by Mijingo.

Why Should You Use SVG?

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 for SVG, improved screen resolution (like Retina screens on iPhone, iPads, MacBookk, and now the new iMac) and Responsive Web Design.

File Size

Another reason to use SVG is because of 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

Since SVGs aren’t bitmap 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. We can also manipulate and animate SVGs with CSS anmiations and JavaScript.

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).

Ready to learn more?

Get the Full Video Course