SVG 101

Written by: Becky Aiken | IANR Media

What are SVGs?

SVG stands for Scalable Vector Graphic. It’s a type of image that is vector-based rather than raster-based like PNGs, JPEGs, and GIFs.

Raster Image

Raster Image

Vector Image

Vector Image

Icons or flat illustrations work really well as SVGs. Any image that was made with a camera or has a lot of subtle color variations is better off being a raster image.

Graphic Panda

Graphic = Good for SVG

Photo Panda

Photo = Bad for SVG

That being said, SVGs don't have to be completely flat. Gradients and opacity can be utilized to create depth and dimension.

iPhone

As graphics get more complex, there can be some gray area when determining when an image should be an SVG or raster-based. Do some experimenting to determine what works best for your situation.

SVG Usage Guide
Graphic by Todd Parker

Why should you use SVGs on your websites?

They're Widely Supported

All modern browsers support SVGs, and even a few non-modern browsers do, so you don’t have to worry about backwards compatibility or rely on fallback images.

SVG Browser Support
From caniuse.com

They Look Great at Any Size

Because SVGs are created with paths instead of pixels, they keep the same quality on at any size, which we know is not true of pixel graphics. This also means they work great for retina displays.

25px PNG

PNG 25px

250px PNG

PNG 250px

SVG 25px

SVG 250px


They also work well with the WDN Grid System's responsive layouts.


They're Versatile

While you can edit the appearance of SVGs in vector editing programs like Adobe Illustrator, you can also do things like change size and color directly in your browser with CSS.


They can also be animated, so they can make great responsive loading icons.

Loading Icon


Or you can get really fancy...

See the Pen D - SVGfromAtoZ by Logan Peterson (@loganaaron) on CodePen.

See the Pen Sketch by Sarah Drasner (@sdras) on CodePen.

How do you make SVGs?

You can create your own in programs like Illustrator, Sketch, or Inkscape.

You can purchase vector illustrations from places like iStockphoto and Shutterstock. But better yet, you can use the SVG icons from UNL’s Iconography library.

UComm Streamline Icons

Read on to learn more about how to use these newly available icons.

Page Feedback

Was this article helpful?