Intro to SVGs
-
Upload
ynon-perek -
Category
Technology
-
view
684 -
download
0
description
Transcript of Intro to SVGs
![Page 1: Intro to SVGs](https://reader036.fdocuments.us/reader036/viewer/2022070303/54b783fa4a7959166f8b460c/html5/thumbnails/1.jpg)
Scalable Vector Graphics
Sunday, March 3, 13
![Page 2: Intro to SVGs](https://reader036.fdocuments.us/reader036/viewer/2022070303/54b783fa4a7959166f8b460c/html5/thumbnails/2.jpg)
Agenda
SVG Introduction
Simple Shapes
Drawing Text
Animations
SVG Scripting
Sunday, March 3, 13
![Page 3: Intro to SVGs](https://reader036.fdocuments.us/reader036/viewer/2022070303/54b783fa4a7959166f8b460c/html5/thumbnails/3.jpg)
What is SVG
An XML based syntax for representing geometrical shapes in a 2d plane
A W3C spec started in 2001
Provides “image-free” pictures to use in web pages - thus making the web more device independent
Sunday, March 3, 13
![Page 4: Intro to SVGs](https://reader036.fdocuments.us/reader036/viewer/2022070303/54b783fa4a7959166f8b460c/html5/thumbnails/4.jpg)
Why SVG
Compact and portable
Easily scales
Client side or server side
Dynamically created images
Sunday, March 3, 13
![Page 5: Intro to SVGs](https://reader036.fdocuments.us/reader036/viewer/2022070303/54b783fa4a7959166f8b460c/html5/thumbnails/5.jpg)
Why Now
HTML5 provides syntax for inlining SVG elements
Can manipulate SVG from JavaScript
No need for special plugins
Sunday, March 3, 13
![Page 6: Intro to SVGs](https://reader036.fdocuments.us/reader036/viewer/2022070303/54b783fa4a7959166f8b460c/html5/thumbnails/6.jpg)
Browser SupportInline SVG:
IE9, Firefox 4, Chrome 7, Safari 5.1, Opera 11.6
iPhone 3.2, Android 3.0 - Partial
SVG Animations
Firefox 4.0, Chrome 4, Safari 5.0, Opera 9.0
iPhone 5.0, Android 3.0 - Partial
Sunday, March 3, 13
![Page 7: Intro to SVGs](https://reader036.fdocuments.us/reader036/viewer/2022070303/54b783fa4a7959166f8b460c/html5/thumbnails/7.jpg)
Hello SVG<svg> <rect x=0 y=0 width=50 height=50 /></svg>
An inline svg is wrapped inside an svg element
Every svg element represents a shape, and attributes determine the details
Sunday, March 3, 13
![Page 8: Intro to SVGs](https://reader036.fdocuments.us/reader036/viewer/2022070303/54b783fa4a7959166f8b460c/html5/thumbnails/8.jpg)
Styling Our Shape
Can use the style attribute or CSS to style an SVG
Note the style attributes are different than “normal” css
<svg> <rect x=0 y=0 width=50 height=50 /></svg>
rect { fill: red;}
Sunday, March 3, 13
![Page 9: Intro to SVGs](https://reader036.fdocuments.us/reader036/viewer/2022070303/54b783fa4a7959166f8b460c/html5/thumbnails/9.jpg)
Available Styles
Fonts: font, font-family, font-size
fill, stroke, opacity, fill-opacity
stroke-linejoin, stroke-dasharray, stroke-opacity, stroke-width
Full list: http://www.w3.org/TR/SVG/styling.html
Sunday, March 3, 13
![Page 10: Intro to SVGs](https://reader036.fdocuments.us/reader036/viewer/2022070303/54b783fa4a7959166f8b460c/html5/thumbnails/10.jpg)
CoordinatesSVG uses a 2d canvas to paint its shapes
It is highly recommended to start painting from the origin
Use translations to move your shapes on the canvas
<svg> <g transform="translate(50,50)"> <rect x=0 y=0 width=50 height=50 /> </g></svg>
rect { fill: red;}
g rect { fill: purple;}
Sunday, March 3, 13
![Page 11: Intro to SVGs](https://reader036.fdocuments.us/reader036/viewer/2022070303/54b783fa4a7959166f8b460c/html5/thumbnails/11.jpg)
stroke-linejoin
Determines how to join lines (corner type)
Sunday, March 3, 13
![Page 12: Intro to SVGs](https://reader036.fdocuments.us/reader036/viewer/2022070303/54b783fa4a7959166f8b460c/html5/thumbnails/12.jpg)
stroke-dasharrayControls the pattern of dashes and gaps used to stroke paths
A list of comma/space separated lengths of the dashes used to stroke the shape
Remember this won’t do anything if stroke is not set
Demo
Sunday, March 3, 13
![Page 13: Intro to SVGs](https://reader036.fdocuments.us/reader036/viewer/2022070303/54b783fa4a7959166f8b460c/html5/thumbnails/13.jpg)
More Shapes
circle: cx, cy, r
ellipse: cx, cy, rx, ry
line: x1, y1, x2, y2, stroke
polyline: points
Sunday, March 3, 13
![Page 14: Intro to SVGs](https://reader036.fdocuments.us/reader036/viewer/2022070303/54b783fa4a7959166f8b460c/html5/thumbnails/14.jpg)
Lab #1
Draw the face on the right
Use circles and lines
Sunday, March 3, 13
![Page 15: Intro to SVGs](https://reader036.fdocuments.us/reader036/viewer/2022070303/54b783fa4a7959166f8b460c/html5/thumbnails/15.jpg)
Inkscape
For any complex SVG drawing, consider using a drawing application
Inkscape is a free vector drawing application
Demo
Sunday, March 3, 13
![Page 16: Intro to SVGs](https://reader036.fdocuments.us/reader036/viewer/2022070303/54b783fa4a7959166f8b460c/html5/thumbnails/16.jpg)
SVG Colors
SVG colors are specified as RGB, RGBA, HSLA, hex or color name
Standard colors: blue, green, magenta, orange, pink, red, yellow, lightgray, darkgray, gray, black, white
Can use colors for fill and stroke
Sunday, March 3, 13
![Page 17: Intro to SVGs](https://reader036.fdocuments.us/reader036/viewer/2022070303/54b783fa4a7959166f8b460c/html5/thumbnails/17.jpg)
GradientsSVG supports the notion of gradient change in color. It has support for line or radial gradients
Can use inkscape to build your gradients, or code them by hand
Each gradient has start color, color stops and end color.
A gradient is defined before use in the def section
Sunday, March 3, 13
![Page 18: Intro to SVGs](https://reader036.fdocuments.us/reader036/viewer/2022070303/54b783fa4a7959166f8b460c/html5/thumbnails/18.jpg)
Linear Gradient<svg> <defs> <linearGradient id="grd1"> <stop stop-color="hsl(184, 97%, 82%)" offset="0%" /> <stop stop-color="hsl(243, 98%, 30%)" offset="100%" /> </linearGradient> </defs> <rect x=0 y=0 width=300 height=100 fill=url(#grd1) /></svg>
http://jsfiddle.net/RtTHr/Sunday, March 3, 13
![Page 19: Intro to SVGs](https://reader036.fdocuments.us/reader036/viewer/2022070303/54b783fa4a7959166f8b460c/html5/thumbnails/19.jpg)
Radial Gradient
replace to radialGradient to get a gradient which starts at the center and changes towards the perimeter radially
Sunday, March 3, 13
![Page 20: Intro to SVGs](https://reader036.fdocuments.us/reader036/viewer/2022070303/54b783fa4a7959166f8b460c/html5/thumbnails/20.jpg)
PathDefined in therms of a collection of points and “how” to draw each point
Imagine moving a pencil on the canvas
M means “move to”
point means “line to”
<svg> <path d="M0,0 150,0 150,50 0,50" /></svg>
Sunday, March 3, 13
![Page 21: Intro to SVGs](https://reader036.fdocuments.us/reader036/viewer/2022070303/54b783fa4a7959166f8b460c/html5/thumbnails/21.jpg)
Arcs in pathsUse A or a in a path element to draw an arc
A for absolute, a for relative
An arc takes:(rx ry x-rot, large,sweep, x,y)
x,y is the destination point
large: 0 for minor, 1 for major
sweep: 0 for counterclockwise, 1 for clockwise
Sunday, March 3, 13
![Page 22: Intro to SVGs](https://reader036.fdocuments.us/reader036/viewer/2022070303/54b783fa4a7959166f8b460c/html5/thumbnails/22.jpg)
Arc Demo
Use M to start the shape at (0,0)
Drawing an arc to (50,0) to get the half-circle
http://dabblet.com/gist/1490783
Sunday, March 3, 13
![Page 23: Intro to SVGs](https://reader036.fdocuments.us/reader036/viewer/2022070303/54b783fa4a7959166f8b460c/html5/thumbnails/23.jpg)
Drawing Text
use text to put some text on screen
use fill to select a color
use fonts as normal
Line breaks are removed
<svg> <g transform="translate(0, 100)"> <text fill=blue font-size="1.5em"> Hello SVG </text> </g></svg>
Sunday, March 3, 13
![Page 24: Intro to SVGs](https://reader036.fdocuments.us/reader036/viewer/2022070303/54b783fa4a7959166f8b460c/html5/thumbnails/24.jpg)
Text In PathstextPath element draws text along a path
required: xlink:href to a path
Demo: http://dabblet.com/gist/1490829
Sunday, March 3, 13
![Page 25: Intro to SVGs](https://reader036.fdocuments.us/reader036/viewer/2022070303/54b783fa4a7959166f8b460c/html5/thumbnails/25.jpg)
SVG viewBox
The Scalability of SVG comes into play in the viewBox attribute of svg
Everything within the viewBox will be displayed
If the viewBox is larger than the canvas, the image will be scaled to fit the canvas
Demo
Sunday, March 3, 13
![Page 26: Intro to SVGs](https://reader036.fdocuments.us/reader036/viewer/2022070303/54b783fa4a7959166f8b460c/html5/thumbnails/26.jpg)
Q & A
http://www2.plurib.us/svg_gallery/
Sunday, March 3, 13
![Page 27: Intro to SVGs](https://reader036.fdocuments.us/reader036/viewer/2022070303/54b783fa4a7959166f8b460c/html5/thumbnails/27.jpg)
SVG Animations
http://www2.plurib.us/1shot/2007/open_window/
Sunday, March 3, 13
![Page 28: Intro to SVGs](https://reader036.fdocuments.us/reader036/viewer/2022070303/54b783fa4a7959166f8b460c/html5/thumbnails/28.jpg)
SMILSynchronized Multimedia Integration Language
Features:
Animate numeric attribute of an element
Animate transform attributes
Animate color attributes
Follow a motion path
Sunday, March 3, 13
![Page 29: Intro to SVGs](https://reader036.fdocuments.us/reader036/viewer/2022070303/54b783fa4a7959166f8b460c/html5/thumbnails/29.jpg)
Animation Basics
Add a child node of type animate to an element to create an animation
Use attributeName, from, to, dur and repeatCount
Demo: http://jsfiddle.net/B5YF5/
Sunday, March 3, 13
![Page 30: Intro to SVGs](https://reader036.fdocuments.us/reader036/viewer/2022070303/54b783fa4a7959166f8b460c/html5/thumbnails/30.jpg)
Color AnimationsUse attributeName=”fill” to create color animations
When animation ends (not just for colors):
If fill=”freeze” state is left as in the last frame
if fill=”remove” state is left as before the animation
Demo: http://jsfiddle.net/ynonp/dWJ3n/
Sunday, March 3, 13
![Page 31: Intro to SVGs](https://reader036.fdocuments.us/reader036/viewer/2022070303/54b783fa4a7959166f8b460c/html5/thumbnails/31.jpg)
Rotation AnimationsUse animateTransform to create transformations animations
from and to take strings, type=”rotate”
In rotation, the string is a triplet of numbers separated by spaces which mean:<degrees> <x> <y>
Demo: http://jsfiddle.net/ah3vr/
Sunday, March 3, 13
![Page 32: Intro to SVGs](https://reader036.fdocuments.us/reader036/viewer/2022070303/54b783fa4a7959166f8b460c/html5/thumbnails/32.jpg)
Translated Rotation
A rotation animation treats (0,0) as the center to rotate around.
Sometimes we want another point on the canvas to perform as the center
The solution: Use translate transformation
Demo: svg/animations1/animated_text.html
Sunday, March 3, 13
![Page 33: Intro to SVGs](https://reader036.fdocuments.us/reader036/viewer/2022070303/54b783fa4a7959166f8b460c/html5/thumbnails/33.jpg)
Scale Animation
another animateTransform
This one uses from,to format of a single number to state scale factor
Demo: http://jsfiddle.net/rPzhK/
Sunday, March 3, 13
![Page 34: Intro to SVGs](https://reader036.fdocuments.us/reader036/viewer/2022070303/54b783fa4a7959166f8b460c/html5/thumbnails/34.jpg)
Path Following
animateMotion creates an animation along a path
use path, dur, repeatCount
Any path will work. Use inkscape to create paths
Demo: http://jsfiddle.net/2jXUE/
Sunday, March 3, 13
![Page 35: Intro to SVGs](https://reader036.fdocuments.us/reader036/viewer/2022070303/54b783fa4a7959166f8b460c/html5/thumbnails/35.jpg)
Lab
Draw the star on the right
Use animation to rotate it clockwise
Sunday, March 3, 13
![Page 36: Intro to SVGs](https://reader036.fdocuments.us/reader036/viewer/2022070303/54b783fa4a7959166f8b460c/html5/thumbnails/36.jpg)
Dynamic SVG
Controlling SVG from JavaScript
Bar Graphs
Sunday, March 3, 13
![Page 37: Intro to SVGs](https://reader036.fdocuments.us/reader036/viewer/2022070303/54b783fa4a7959166f8b460c/html5/thumbnails/37.jpg)
Dynamic SVGSince SVG is just inline XML, we can manipulate and create it from JavaScript
Use: document.createElementNS to create the element
Caution: Don’t use jQuery to manipulate SVG
Important to use namespace: http://www.w3.org/2000/svg
Sunday, March 3, 13
![Page 38: Intro to SVGs](https://reader036.fdocuments.us/reader036/viewer/2022070303/54b783fa4a7959166f8b460c/html5/thumbnails/38.jpg)
Diagonal
Create rectangles in a loop from JS
Demo: http://jsfiddle.net/ynonp/KQ3Kx/
Sunday, March 3, 13
![Page 39: Intro to SVGs](https://reader036.fdocuments.us/reader036/viewer/2022070303/54b783fa4a7959166f8b460c/html5/thumbnails/39.jpg)
Bar Graphs
Paint bar graphs dynamically based on JS arrays
Demo: http://jsfiddle.net/ynonp/kBj5Z/2/
Sunday, March 3, 13
![Page 40: Intro to SVGs](https://reader036.fdocuments.us/reader036/viewer/2022070303/54b783fa4a7959166f8b460c/html5/thumbnails/40.jpg)
Lab
Add text descriptions to the bars
Add animations to the bars
Bonus: Allow user to resize the graph
Sunday, March 3, 13
![Page 41: Intro to SVGs](https://reader036.fdocuments.us/reader036/viewer/2022070303/54b783fa4a7959166f8b460c/html5/thumbnails/41.jpg)
Thank You
Ynon Perek
ynonperek.com
This keynote is licensed CC-BY-NC. http://creativecommons.org/licenses/by-nc/2.5/
Sunday, March 3, 13