Post on 15-Jan-2015
description
Scalable Vector Graphics
Sunday, March 3, 13
Agenda
SVG Introduction
Simple Shapes
Drawing Text
Animations
SVG Scripting
Sunday, March 3, 13
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
Why SVG
Compact and portable
Easily scales
Client side or server side
Dynamically created images
Sunday, March 3, 13
Why Now
HTML5 provides syntax for inlining SVG elements
Can manipulate SVG from JavaScript
No need for special plugins
Sunday, March 3, 13
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
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
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
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
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
stroke-linejoin
Determines how to join lines (corner type)
Sunday, March 3, 13
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
More Shapes
circle: cx, cy, r
ellipse: cx, cy, rx, ry
line: x1, y1, x2, y2, stroke
polyline: points
Sunday, March 3, 13
Lab #1
Draw the face on the right
Use circles and lines
Sunday, March 3, 13
Inkscape
For any complex SVG drawing, consider using a drawing application
Inkscape is a free vector drawing application
Demo
Sunday, March 3, 13
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
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
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
Radial Gradient
replace to radialGradient to get a gradient which starts at the center and changes towards the perimeter radially
Sunday, March 3, 13
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
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
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
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
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
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
Q & A
http://www2.plurib.us/svg_gallery/
Sunday, March 3, 13
SVG Animations
http://www2.plurib.us/1shot/2007/open_window/
Sunday, March 3, 13
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
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
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
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
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
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
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
Lab
Draw the star on the right
Use animation to rotate it clockwise
Sunday, March 3, 13
Dynamic SVG
Controlling SVG from JavaScript
Bar Graphs
Sunday, March 3, 13
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
Diagonal
Create rectangles in a loop from JS
Demo: http://jsfiddle.net/ynonp/KQ3Kx/
Sunday, March 3, 13
Bar Graphs
Paint bar graphs dynamically based on JS arrays
Demo: http://jsfiddle.net/ynonp/kBj5Z/2/
Sunday, March 3, 13
Lab
Add text descriptions to the bars
Add animations to the bars
Bonus: Allow user to resize the graph
Sunday, March 3, 13
Thank You
Ynon Perek
ynonperek@yahoo.com
ynonperek.com
This keynote is licensed CC-BY-NC. http://creativecommons.org/licenses/by-nc/2.5/
Sunday, March 3, 13