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