A Quick Introduction to SVG

Tim Snyder

Front-End Web Developer at

What is SVG?

  • Scalable
  • Vector
  • Graphics

SVG is:

  • Flexible
  • Lightweight
  • Accessible
  • Interactive
  • Fun!

Vector vs Raster

Pixels vs Geometry

Raster Zoom

Vector Zoom

File Size Comparisons

SVG

8k

PNG

21k

File Size Comparisons

SVG

10k

JPG

28k

Browser Support

Vector Artwork Editors

Common Uses on the Web

img src & css backgrounds




.icon--lightbulb{ 
	width: 40px; 
	background-image: url('i/lightbulb.svg') top left no-repeat; 
}

Inline



	

Coordinate System and Sizing

em, px, %

The Shapes of SVG

  • <rect>
  • <circle>
  • <ellipse>
  • <line>
  • <polyline>
  • <polygon>
  • <path>

<rect>



	

<circle>



	

<ellipse>



	

<line>



	

<polyline>



	

<polygon>



	

<path>



	

Other Elements Worth Mentioning

  • <text>
  • <g>
  • <title>
  • <desc>

<text>

Hello World!


	
	Hello World!

<g>



	
	
	
	

<title>

My Circle


	My Circle
	

<desc>

Longer, more detailed information about my circle here.


	Longer, more detailed information about my circle here.
	

Styling: Strokes & Fills



	

Gradient Fills

Linear

Radial

Three Ways to Apply Styles (in order of specificity)

  1. Inline Styles
  2. Stylesheet
  3. Element Attributes

Optimization Tools

Spritesheets: <symbol>




	
	


	


	


Spritesheets: <use>

Inline SVG



		

External SVG



		

SVG-Store

Build SVG Spritesheets automatically

A Note on Animation

See the Pen Flat design amusement park svg by Lina (animation powered by CSS) by Vladimir Gashenko (@gxash) on CodePen.

Microsoft Edge: No support for CSS transforms

Ugh.

Javascript Animation Libraries

GSAP

Velocity.js

Snap.svg

Thanks!

Questions?

tim@timsnyder.me