Whirlwind Tour of SVG (plus RaphaelJS)

by Marc Grabanski
Whirlwind Tour of
Scalable Vector Graphics

1. What is SVG? Why?
2. Overview SVG Elements
3. Embed SVG
4. SVG Features
5. DEMOs!
6. Raphael
7. Other Cool Tools
Agenda

!
!
jQuery UI Datepicker
!
MarcGrabanski.com
!
LOTS of UI Dev
Who?
Marc Grabanski

!
!
!
Publisher of:
Currently...
UI/UX Development Consultant
http://FrontendMasters.com

One SVG For All
Scaling bitmaps (jpeg/gif/png)
have to add more pixel data
!
Scaling SVG...use that same file

• Scales and Retina-ready
• HTML-like elements - DOM Structure
• CSS3 and JavaScript
• Printer friendly
• Accessibility Features and SEO
• Browser Coverage
• Gzip-friendly
• More! Filters, Paths, Viewbox, etc.
SVG Advantages

<text>
<ellipse>
<rect>
<circle>
<line>
<polygon>
<path>
Elements Walkthough

<text x="250" y="150">
Hello, out there
</text>
Hello, out there

<circle cx=50 cy=50 r=200 fill=”#56a9f6” />
center x, center y and radius

<ellipse rx="200" ry="100" fill=”#56a9f6” />
radius x, radius y

<path d="M100,200 C100,100 250,100 250,200
S400,300 400,200" />
Command Driven:
Moveto, Line, Curveto, Bézier Curves,
Quadratic Bézier Curves, Elliptical Arc...

<g fill="rgba(0,0,0,0.3)"
transform="rotate(-10)" stoke-width="5"
stroke="black">
<rect x=200 y=200 width=200 height=100 />
<ellipse cx=200 cy=200 rx=200 ry=50 />
</g>
Grouping

Embed Methods
• Object Tag
• Inline (HTML5)
• As Image
• CSS Background
• Image Fallback

Inline SVG
<!doctype html>
<html><body>
<svg width=200 height=200>
<polygon fill="#ccc" points="350,75 379,161  
469,161 397,215 423,301 350,250 277,301 303,215 
231,161 321,161" />
</svg>
</body></html>

Inline SVG Support
http://caniuse.com/svg-html5

Image SRC
<!doctype html>
<html><body>
<img src=”goat.svg”>
</body></html>
JS inside SVG is disabled.

SVG as IMG SRC
http://caniuse.com/#feat=svg-img

CSS Background
<div id=”foo”></div>
<style>
#foo { background: url(goat.svg); }
</style>

SVG in CSS Background
http://caniuse.com/#feat=svg-css

http://www.svgeneration.com/

DOM Structure
Inspectable Elements

document.getElementById(‘star’).onclick = ...
!
<polygon id=”star” fill="#ccc"
points="350,75 379,161 469,161 397,215
423,301 350,250 277,301 303,215
231,161 321,161" />

SVG Links
<a xlink:href="http://minnesota.com">
<path d="...state of MN..." fill="#ccc" /></a>
<a xlink:href="http://wisconson.com">
<path d="...state of WI..." fill="#ccc" /></a>

http://www.anthonycalzadilla.com/i-twitty-the-fool/
CSS Animations

Whirlwind Tour of SVG (plus RaphaelJS)

SVG Filters
http://svg-wow.org/ﬁlterEffects/chiseled.svg

Hands-On Filters
http://ie.microsoft.com/testdrive/graphics/hands-on-css3/hands-
on_svg-ﬁlter-effects.htm

SVG Filter Support
http://caniuse.com/#feat=svg-ﬁlters

Demo: Stacking Transforms
http://codepen.io/1Marc/pen/DCvFm

Raphael JS
SVG (Most Browsers) +
VML (MS IE6-8)
Graphic Credit: Dmitry

Raphael JS
- Common API for VML/SVG
- Utils make vector sane.
“The jQuery of
Vector Graphics”

Dropping IE8
SVG Works Everywhere
IE9+

Don’t Support
IE8? Use Snapsvg

• Primitives (Rectangle, Circle, etc)
• Attributes (Stroke, Dimensions, etc)
• Events (Click and Touch)
• Animation and Easing
• Sets (Grouping)
• Transforms (Rotate, Scale, etc)
Raphael JS

Transforms
in Raphael
el.transform(“T 10,10”);
- move x, y
el.transform(“S 10,10,0,0);
- scale 10,10 around 0,0
el.transform(“R 45,0,0);
- rotate 45 around 0,0 (optional)

Transforms
in Raphael
Capital T, S and R absolute
transforms
Lower case t, s and r are relative
to previous transforms.

transform(‘R45,100,50 T100,0’)
x
y
Absolute “T” transform
Relative to original axis
axis

x
y
Relative “t” transform
Relative to current axis
transform(‘r 20,100,50 t 100,0’)
axis

Demo: Absolute/Relative
Transforms in Raphael
http://codepen.io/1Marc/pen/rsmbF

Transforms
in Raphael
el.transform(‘...t 10, 10’);
add transform to end
el.transform(‘r45...’);
add transform before

Transforms
in Raphael
el.transform();
get the current transform object
el.matrix.split();
get results of all applied transforms
AWESOME method!

el.getBBox();
gets x, y, width and height of
bounding box
Bounding Box

jSVG
http://jsvg.swissamigos.com/
Save on http requests by packing
multiple SVGs into one

Fabric.js
Render SVG into Canvas

Clown Car Technique
Adaptive Images!
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 300 329" preserveAspectRatio="xMidYMid meet">
<title>Clown Car Technique</title>
<style>
svg {
background-size: 100% 100%;
background-repeat: no-repeat;
}
@media screen and (max-width: 400px) {
svg {
background-image: url(images/small.png");
}
}
...
</style>
</svg>
https://github.com/estelle/clowncar

Vectron
http://roomandboard.github.com/vectron/
Pull in SVG files with Ajax and
convert them to Raphael JS.

Future? SVG Stacks
http://simurai.com/post/20251013889/svg-stacks
Only works in Firefox (for now)

Whirlwind Tour of SVG (plus RaphaelJS)

Recommended

More Related Content

What's hot (20)

Viewers also liked (13)

Similar to Whirlwind Tour of SVG (plus RaphaelJS) (20)

Recently uploaded (20)

Whirlwind Tour of SVG (plus RaphaelJS)