svg.pdf - Speaker Deck

Slide 1

Slide 1 text

Scalable Vector Graphics Monday, January 2, 2012

Slide 2

Slide 2 text

Agenda SVG Introduction Simple Shapes Drawing Text Animations SVG Scripting Monday, January 2, 2012

Slide 3

Slide 3 text

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 Monday, January 2, 2012

Slide 4

Slide 4 text

Why SVG Compact and portable Easily scales Client side or server side Dynamically created images Monday, January 2, 2012

Slide 5

Slide 5 text

Why Now HTML5 provides syntax for inlining SVG elements Can manipulate SVG from JavaScript No need for special plugins Monday, January 2, 2012

Slide 6

Slide 6 text

Browser Support Inline 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 Monday, January 2, 2012

Slide 7

Slide 7 text

Hello SVG An inline svg is wrapped inside an svg element Every svg element represents a shape, and attributes determine the details Monday, January 2, 2012

Slide 8

Slide 8 text

Styling Our Shape Can use the style attribute or CSS to style an SVG Note the style attributes are different than “normal” css rect { fill: red; } Monday, January 2, 2012

Slide 9

Slide 9 text

Available Styles Fonts: font, font-family, font-size ﬁll, stroke, opacity, ﬁll-opacity stroke-linejoin, stroke-dasharray, stroke-opacity, stroke-width Full list: http://www.w3.org/TR/SVG/styling.html Monday, January 2, 2012

Slide 10

Slide 10 text

Coordinates SVG 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 rect { fill: red; } g rect { fill: purple; } Monday, January 2, 2012

Slide 11

Slide 11 text

stroke-linejoin Determines how to join lines (corner type) Monday, January 2, 2012

Slide 12

Slide 12 text

stroke-dasharray Controls 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 Monday, January 2, 2012

Slide 13

Slide 13 text

More Shapes circle: cx, cy, r ellipse: cx, cy, rx, ry line: x1, y1, x2, y2, stroke polyline: points Monday, January 2, 2012

Slide 14

Slide 14 text

Lab #1 Draw the face on the right Use circles and lines Monday, January 2, 2012

Slide 15

Slide 15 text

Inkscape For any complex SVG drawing, consider using a drawing application Inkscape is a free vector drawing application Demo Monday, January 2, 2012

Slide 16

Slide 16 text

SVG Colors SVG colors are speciﬁed 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 ﬁll and stroke Monday, January 2, 2012

Slide 17

Slide 17 text

Gradients SVG 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 deﬁned before use in the def section Monday, January 2, 2012

Slide 18

Slide 18 text

Linear Gradient http://jsﬁddle.net/RtTHr/ Monday, January 2, 2012

Slide 19

Slide 19 text

Radial Gradient replace to radialGradient to get a gradient which starts at the center and changes towards the perimeter radially Monday, January 2, 2012

Slide 20

Slide 20 text

Path Deﬁned 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” Monday, January 2, 2012

Slide 21

Slide 21 text

Arcs in paths Use 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 Monday, January 2, 2012

Slide 22

Slide 22 text

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 Monday, January 2, 2012

Slide 23

Slide 23 text

Drawing Text use text to put some text on screen use ﬁll to select a color use fonts as normal Line breaks are removed Hello SVG Monday, January 2, 2012

Slide 24

Slide 24 text

Text In Paths textPath element draws text along a path required: xlink:href to a path Demo: http:// dabblet.com/gist/ 1490829 Monday, January 2, 2012

Slide 25

Slide 25 text

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 ﬁt the canvas Demo Monday, January 2, 2012

Slide 26

Slide 26 text

Q & A http://www2.plurib.us/svg_gallery/ Monday, January 2, 2012

Slide 27

Slide 27 text

SVG Animations http://www2.plurib.us/1shot/2007/open_window/ Monday, January 2, 2012

Slide 28

Slide 28 text

SMIL Synchronized Multimedia Integration Language Features: Animate numeric attribute of an element Animate transform attributes Animate color attributes Follow a motion path Monday, January 2, 2012

Slide 29

Slide 29 text

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://jsﬁddle.net/B5YF5/ Monday, January 2, 2012

Slide 30

Slide 30 text

Color Animations Use 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/ Monday, January 2, 2012

Slide 31

Slide 31 text

Rotation Animations Use 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: Demo: http://jsﬁddle.net/ah3vr/ Monday, January 2, 2012

Slide 32

Slide 32 text

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 Monday, January 2, 2012

Slide 33

Slide 33 text

Scale Animation another animateTransform This one uses from,to format of a single number to state scale factor Demo: http://jsﬁddle.net/rPzhK/ Monday, January 2, 2012

Slide 34

Slide 34 text

Path Following animateMotion creates an animation along a path use path, dur, repeatCount Any path will work. Use inkscape to create paths Demo: http://jsﬁddle.net/2jXUE/ Monday, January 2, 2012

Slide 35

Slide 35 text

Lab Draw the star on the right Use animation to rotate it clockwise Monday, January 2, 2012

Slide 36

Slide 36 text

Dynamic SVG Controlling SVG from JavaScript Bar Graphs Monday, January 2, 2012

Slide 37

Slide 37 text

Dynamic SVG Since 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 Monday, January 2, 2012

Slide 38

Slide 38 text

Diagonal Create rectangles in a loop from JS Demo: http://jsﬁddle.net/ ynonp/KQ3Kx/ Monday, January 2, 2012

Slide 39

Slide 39 text

Loading Spinner Use JS to create all the bars with the right rotation Use SMIL animation to switch colors Code: http:// bigfuckingspinner.com/ color.html Monday, January 2, 2012

Slide 40

Slide 40 text

Bar Graphs Paint bar graphs dynamically based on JS arrays Demo: http://jsﬁddle.net/ ynonp/kBj5Z/2/ Monday, January 2, 2012

Slide 41

Slide 41 text

Lab Add text descriptions to the bars Add animations to the bars Bonus: Allow user to resize the graph Monday, January 2, 2012

Slide 42

Slide 42 text

Thank You Ynon Perek ynonperek@yahoo.com ynonperek.com This keynote is licensed CC-BY-NC. http://creativecommons.org/licenses/by-nc/2.5/ Monday, January 2, 2012