Slide 1
Slide 1 text
by Marc Grabanski
Whirlwind Tour of
Scalable Vector Graphics
Slide 2
Slide 2 text
1. What is SVG? Why?
2. Overview SVG Elements
3. Embed SVG
4. SVG Features
5. DEMOs!
6. Raphael
7. Other Cool Tools
Agenda
Slide 3
Slide 3 text
!
!
jQuery UI Datepicker
!
MarcGrabanski.com
!
LOTS of UI Dev
Who?
Marc Grabanski
Slide 4
Slide 4 text
!
!
!
Publisher of:
Currently...
UI/UX Development Consultant
http://FrontendMasters.com
Slide 5
Slide 5 text
1. What is SVG?
Slide 6
Slide 6 text
HTML...
for graphics!
SVG
Slide 7
Slide 7 text
One SVG For All
Scaling bitmaps (jpeg/gif/png)
have to add more pixel data
!
Scaling SVG...use that same file
Slide 8
Slide 8 text
SVG
Zoomed
PNG
Zoomed
Slide 9
Slide 9 text
Modify Static
Slide 10
Slide 10 text
Why Use SVG?
Slide 11
Slide 11 text
• 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
Slide 12
Slide 12 text
2. SVG Elements
Slide 13
Slide 13 text
Elements Walkthough
Slide 14
Slide 14 text
Hello, out there
Hello, out there
Slide 15
Slide 15 text
center x, center y and radius
Slide 16
Slide 16 text
Slide 17
Slide 17 text
radius x, radius y
Slide 18
Slide 18 text
Slide 19
Slide 19 text
Slide 20
Slide 20 text
Slide 21
Slide 21 text
Command Driven:
Moveto, Line, Curveto, Bézier Curves,
Quadratic Bézier Curves, Elliptical Arc...
Slide 22
Slide 22 text
Path is Incredibly
Powerful
Slide 23
Slide 23 text
Slide 24
Slide 24 text
Grouping
Slide 25
Slide 25 text
3. Embed SVG
Slide 26
Slide 26 text
Embed Methods
• Object Tag
• Inline (HTML5)
• As Image
• CSS Background
• Image Fallback
Slide 27
Slide 27 text
SVG Object
For JS scripting you need to grab object:
element.contentDocument
Slide 28
Slide 28 text
Inline SVG
Slide 29
Slide 29 text
Inline SVG Support
http://caniuse.com/svg-html5
Slide 30
Slide 30 text
Image SRC
JS inside SVG is disabled.
JS inside SVG is disabled.
Slide 31
Slide 31 text
SVG as IMG SRC
http://caniuse.com/#feat=svg-img
Slide 32
Slide 32 text
CSS Background
#foo { background: url(goat.svg); }
Slide 33
Slide 33 text
SVG in CSS Background
http://caniuse.com/#feat=svg-css
Slide 34
Slide 34 text
http://www.svgeneration.com/
Slide 35
Slide 35 text
Image Fallback
Slide 36
Slide 36 text
Image Fall Scripts
Slide 37
Slide 37 text
Before IE9
Raphael JS
Slide 38
Slide 38 text
4. SVG Features
Slide 39
Slide 39 text
DOM Structure
Inspectable Elements
Slide 40
Slide 40 text
document.getElementById(‘star’).onclick = ...
!
Slide 42
Slide 42 text
http://www.anthonycalzadilla.com/i-twitty-the-fool/
CSS Animations
Slide 43
Slide 43 text
Great for Icons
Slide 44
Slide 44 text
CSS + Icons
Slide 45
Slide 45 text
Media Queries
Slide 46
Slide 46 text
No content
Slide 47
Slide 47 text
SVG Filters
http://svg-wow.org/filterEffects/chiseled.svg
Slide 48
Slide 48 text
Hands-On Filters
http://ie.microsoft.com/testdrive/graphics/hands-on-css3/hands-
on_svg-filter-effects.htm
Slide 49
Slide 49 text
SVG Filter Support
http://caniuse.com/#feat=svg-filters
Slide 50
Slide 50 text
Transforms
x
y
axis
Slide 51
Slide 51 text
Demo: Stacking Transforms
http://codepen.io/1Marc/pen/DCvFm
Slide 52
Slide 52 text
5. DEMOs!
Slide 53
Slide 53 text
6. RaphaelJS
Slide 54
Slide 54 text
Source
Your Sources
Slide 55
Slide 55 text
I learned from
about using
Slide 56
Slide 56 text
Raphael JS
SVG (Most Browsers) +
VML (MS IE6-8)
Graphic Credit: Dmitry
Slide 57
Slide 57 text
Raphael JS
- Common API for VML/SVG
- Utils make vector sane.
“The jQuery of
Vector Graphics”
Slide 58
Slide 58 text
Dropping IE8
SVG Works Everywhere
IE9+
Slide 59
Slide 59 text
Don’t Support
IE8? Use Snapsvg
Slide 60
Slide 60 text
• Primitives (Rectangle, Circle, etc)
• Attributes (Stroke, Dimensions, etc)
• Events (Click and Touch)
• Animation and Easing
• Sets (Grouping)
• Transforms (Rotate, Scale, etc)
Raphael JS
Slide 61
Slide 61 text
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)
Slide 62
Slide 62 text
Transforms
in Raphael
Capital T, S and R absolute
transforms
Lower case t, s and r are relative
to previous transforms.
Slide 63
Slide 63 text
Before Raphael
x
y
axis
Slide 64
Slide 64 text
transform(‘R45,100,50 T100,0’)
x
y
Absolute “T” transform
Relative to original axis
axis
Slide 65
Slide 65 text
x
y
Relative “t” transform
Relative to current axis
transform(‘r 20,100,50 t 100,0’)
axis
Slide 66
Slide 66 text
Demo: Absolute/Relative
Transforms in Raphael
http://codepen.io/1Marc/pen/rsmbF
Slide 67
Slide 67 text
Transforms
in Raphael
el.transform(‘...t 10, 10’);
add transform to end
el.transform(‘r45...’);
add transform before
Slide 68
Slide 68 text
Transforms
in Raphael
el.transform();
get the current transform object
el.matrix.split();
get results of all applied transforms
AWESOME method!
Slide 69
Slide 69 text
el.getBBox();
gets x, y, width and height of
bounding box
Bounding Box