You are on page 1of 51

SVG Fundamentals

Introduction to SVG

Brian Treese
@brianmtreese | www.briantree.se

SVG, Its Just Another Image Format


Right?

Wrong!
Its So Much More!

Blank Layout

(the possibilities are endless)

To Get the Most Out of This Course

Blank Layout

(the possibilities are endless)

What We Will Cover

What an SVG is, how to create, & how you use

What types of graphics are best suited as SVGs?

Explore & manipulate with CSS/JavaScript

SVG spriting techniques

SVG animation

Optimization, browser support, examples, tools and resources

What Exactly is SVG?

SVG
Scalable Vector Graphics

What is SVG?

2D vector based image format

Device and resolution independent

Human readable XML code

Can be manipulated by hand, with CSS, or with JavaScript

SVG Code
<svg height="100" width="100">
<circle cx="50" cy="50" r="50" />
</svg>

JPEG Code
JFIF

d d

& d

[ - "
d d
p!
! 01A"2#$ aqBrQb3Ss%5
Cc4TU&6V

When to Use an SVG

Logos

Icons

Animations

Illustrations

Charts & Graphs

Can It Be an SVG?

Simpler shapes and limited color palette

Is it vector in your design program? It can be an SVG

HTML should still be HTML

Complex graphics, like photos, should still be JPEG or PNG

How to Create an SVG

How to Create an SVG

By hand coding

Popular vector image editors


-

Inkscape
Adobe Illustrator
Sketch

How to Use SVGs

<img>

How to
Use SVG

<embed>
<object>
<iframe>
Inline <svg>

<img>

<embed>

<object>

<iframe>

Inline <svg>

Summary
More than just another graphics format
Scalable, device and resolution
independent
Best for logos, icons, animations,
illustrations, charts and graphs
Can be created by hand or in vector
image editors