svg.pdf

Transcript

1. Scalable Vector Graphics Monday, January 2, 2012
2. Agenda SVG Introduction Simple Shapes Drawing Text Animations SVG Scripting Monday, January 2, 2012
3. 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
4. Why SVG Compact and portable Easily scales Client side or server side Dynamically created images Monday, January 2, 2012
5. Why Now HTML5 provides syntax for inlining SVG elements Can manipulate SVG from JavaScript No need for special plugins Monday, January 2, 2012
6. 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
7. 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 Monday, January 2, 2012
8. 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; } Monday, January 2, 2012
9. 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 Monday, January 2, 2012
10. 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 <svg> <g transform="translate (50,50)"> <rect x=0 y=0 width=50 height=50 /> </g> </svg> rect { fill: red; } g rect { fill: purple; } Monday, January 2, 2012
11. stroke-linejoin Determines how to join lines (corner type) Monday, January 2, 2012
12. 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
13. More Shapes circle: cx, cy, r ellipse: cx, cy, rx, ry line: x1, y1, x2, y2, stroke polyline: points Monday, January 2, 2012
14. Lab #1 Draw the face on the right Use circles and lines Monday, January 2, 2012
15. Inkscape For any complex SVG drawing, consider using a drawing application Inkscape is a free vector drawing application Demo Monday, January 2, 2012
16. 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 Monday, January 2, 2012
17. 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 defined before use in the def section Monday, January 2, 2012
18. 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/ Monday, January 2, 2012
19. Radial Gradient replace to radialGradient to get a gradient which starts at the center and changes towards the perimeter radially Monday, January 2, 2012
20. Path Defined 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> Monday, January 2, 2012
21. 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
22. 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
23. 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> Monday, January 2, 2012
24. 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
25. 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 Monday, January 2, 2012
26. Q & A http://www2.plurib.us/svg_gallery/ Monday, January 2, 2012
27. SVG Animations http://www2.plurib.us/1shot/2007/open_window/ Monday, January 2, 2012
28. 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
29. 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/ Monday, January 2, 2012
30. 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
31. 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: <degrees> <x> <y> Demo: http://jsfiddle.net/ah3vr/ Monday, January 2, 2012
32. 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
33. Scale Animation another animateTransform This one uses from,to format of a single number to state scale factor Demo: http://jsfiddle.net/rPzhK/ Monday, January 2, 2012
34. 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/ Monday, January 2, 2012
35. Lab Draw the star on the right Use animation to rotate it clockwise Monday, January 2, 2012
36. Dynamic SVG Controlling SVG from JavaScript Bar Graphs Monday, January 2, 2012
37. 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
38. Diagonal Create rectangles in a loop from JS Demo: http://jsfiddle.net/ ynonp/KQ3Kx/ Monday, January 2, 2012
39. 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
40. Bar Graphs Paint bar graphs dynamically based on JS arrays Demo: http://jsfiddle.net/ ynonp/kBj5Z/2/ Monday, January 2, 2012
41. Lab Add text descriptions to the bars Add animations to the bars Bonus: Allow user to resize the graph Monday, January 2, 2012
42. 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