@brianmtreese | www.briantree.se

Brian Treese

Introduction to SVG

SVG Fundamentals

Right?

SVG, Its Just Another Image Format

Its So Much More!

Wrong!

Blank Layout(the possibilities are endless)

To Get the Most Out of This Course

Blank Layout(the possibilities are endless)

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 We Will Cover

What Exactly is SVG?

SVGScalable Vector Graphics

2D vector based image format

Device and resolution independent

Human readable XML code

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

What is SVG?

SVG Code

JPEG Code

JFIF d d d & d[ - "

d d 0 p!

! 01A"2#$ aqBrQb3Ss%5Cc4TU&6V

When to Use an SVG

Logos

Icons

Animations

Illustrations

Charts & Graphs

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

Can It Be an SVG?

How to Create an SVG

By hand coding

Popular vector image editors- Inkscape- Adobe Illustrator - Sketch

How to Create an SVG

How to Use SVGs

Inline

How to Use SVG

Inline

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

Summary

SVG FundamentalsSlide Number 2Slide Number 3Slide Number 4Slide Number 5Slide Number 6Slide Number 7What We Will CoverSlide Number 9Slide Number 10What is SVG? Slide Number 12Slide Number 13SVG CodeJPEG CodeSlide Number 16Slide Number 17Slide Number 18Slide Number 19Slide Number 20Slide Number 21Slide Number 22Slide Number 23Slide Number 24Slide Number 25Can It Be an SVG?Slide Number 27How to Create an SVGSlide Number 29Slide Number 30Slide Number 31Slide Number 32Slide Number 33Slide Number 34Slide Number 35Slide Number 36Slide Number 37Slide Number 38How to Use SVGSlide Number 40Slide Number 41Slide Number 42Slide Number 43Slide Number 44Slide Number 45Slide Number 46Slide Number 47Slide Number 48Slide Number 49Slide Number 50Summary