Getting Started with SVG

by Ryan Young, Project Lead at Visionary Services

• Twitter: @rcyou

What is SVG?

  • SVG: Scalable Vector Graphics
  • XML-based markup language.
  • SVG is essentially to graphics what HTML is to text. 1
  • Vector Graphics: Highly scalable, so they don't pixellate when zoomed in or blown up to a large size. 2

    • Popular Vector-Making Programs:

  • Adobe Illustrator, Sketch, Inkscape & Affinitity Designer
1 Source: MDN 2 Source: "Adding vector graphics to the Web" - MDN

But Why Would I Use SVG Instead of JPG, PNG, or GIF?

  • Vectors are scalable. Goodbye Retina-specific assets!
  • SVG files are typically small in size.
  • Allows for more complex animations with CSS and JavaScript.
  • Text labels & descriptions provide better crawlability for search engines (SEO ya'll). 3
3 Source: "The benefits of Scalable Vector Graphics" - Appnovation

SVG is like HTML … but for Images

Like HTML, SVG has its own set of tags and attributes.

  • <svg> is like <html>
  • <rect>
  • <circle>
  • <ellipse>
  • <polygon>
  • <path>
  • <g>

Use ID & Class Names Just like HTML

						
							<svg>
							   <circle class="c_solo"/>
							   <g id="c_bunch">
							       <circle/>
							       <circle/>
							       <circle/>
							   </g>
							</svg>

Attributes to be Aware of

  • viewbox="..." is needed for <svg> in order to crop and extend the SVG canvas.4
  • point="..." is needed for <polygon> to define what our shape looks like.
  • d="..." is needed for <path> to define lines. 5
4 Source: "Understanding SVG Coordinate Systems" - Sara Soueidan 5 Source: "d" - MDN

All Right, Get to Some Examples Already!

There are 4 Ways to use SVG

  • As an img source.
  • As a background-image in CSS.
  • Inline, cohabitating with our HTML
  • Via the <use> element – though this is similar to using SVG inline.

SVG as a <img> source

Just like typical JPG, PNG, or GIF images, you can use SVG as an image source. This is good if you just want to show the image, but you can't change colors or do much animation outside of what you can already do with images.

						<img src="some-graphic.svg" alt="company logo">

Be advised: you'll encounter a hiccup if you're using it with PHP or on any kind of Apache server.6

6 "Serve SVG as an Image on Apache with .htaccess" - David Walsh

SVG background image in CSS

Same as <img>, use a SVG image just like your used to for background images. Best for images that are purely decoration and aren't curcial to UI.

						background-image: url('some-graphic.svg');

Inline SVG

Some say this is the 'Best SVG'7 because you have a lot of options to manipulate it and make the image more meaningful.

						<html>
						   <body>
						       View on CodePen 8
						   </body>
						</html>
7 "Why Inline SVG is Best SVG" - Front End Center 8 Without minimization, this SVG is ~ 560 lines of code

Dude …

I Can't Manage All That Code Just for One Image!

S'all Good, Man

Use <use> and group things with <g>!

Also, talk to your dev team about includes

Plus SVG Optimizer by Peter Collingridge

How We Made It: Talking Icon

'Talking Icon' on CodePen

SVG as a Symbol & the <Use> Element

  • Welcome to the SVG sprite sheets!
  • You still get a good chunk of the benefits of inline SVG, but there are a few caveats
  • Great for icon systems or images you'll use a lot.

Some SVG Bummers with Use

Demo in CodePen
I work in Firefox but not Safari or Chrome
I seem to work everywhere

SVG Resources

Thank You!