Intro to SVGs


Published on

Published in: Technology
  • Be the first to comment

Intro to SVGs

  1. 1. Scalable Vector GraphicsSunday, March 3, 13
  2. 2. Agenda SVG Introduction Simple Shapes Drawing Text Animations SVG ScriptingSunday, March 3, 13
  3. 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 independentSunday, March 3, 13
  4. 4. Why SVG Compact and portable Easily scales Client side or server side Dynamically created imagesSunday, March 3, 13
  5. 5. Why Now HTML5 provides syntax for inlining SVG elements Can manipulate SVG from JavaScript No need for special pluginsSunday, March 3, 13
  6. 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 - PartialSunday, March 3, 13
  7. 7. Hello SVG <svg>     <rect x=0 y=0 An inline svg is width=50  wrapped inside an svg height=50 /> </svg> element Every svg element represents a shape, and attributes determine the detailsSunday, March 3, 13
  8. 8. Styling Our Shape Can use the style <svg>     attribute or CSS to     <rect x=0 y=0 style an SVG width=50 height=50 /> </svg> Note the style rect { attributes are different     fill: red; than “normal” css }Sunday, March 3, 13
  9. 9. Available Styles Fonts: font, font-family, font-size fill, stroke, opacity, fill-opacity stroke-linejoin, stroke-dasharray, stroke-opacity, stroke-width Full list:, March 3, 13
  10. 10. Coordinates <svg>         SVG uses a 2d canvas     <g transform="translate(50,50)"> to paint its shapes         <rect x=0 y=0 width=50 height=50 /> It is highly     </g> recommended to start </svg> painting from the origin rect {     fill: red; Use translations to } move your shapes on g rect { the canvas     fill: purple; }Sunday, March 3, 13
  11. 11. stroke-linejoin Determines how to join lines (corner type)Sunday, March 3, 13
  12. 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 DemoSunday, March 3, 13
  13. 13. More Shapes circle: cx, cy, r ellipse: cx, cy, rx, ry line: x1, y1, x2, y2, stroke polyline: pointsSunday, March 3, 13
  14. 14. Lab #1 Draw the face on the right Use circles and linesSunday, March 3, 13
  15. 15. Inkscape For any complex SVG drawing, consider using a drawing application Inkscape is a free vector drawing application DemoSunday, March 3, 13
  16. 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 strokeSunday, March 3, 13
  17. 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 sectionSunday, March 3, 13
  18. 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>, March 3, 13
  19. 19. Radial Gradient replace to radialGradient to get a gradient which starts at the center and changes towards the perimeter radiallySunday, March 3, 13
  20. 20. Path Defined in therms of a collection of points and “how” to draw each <svg>   <path point d="M0,0 150,0 Imagine moving a 150,50 pencil on the canvas 0,50" /> </svg> M means “move to” point means “line to”Sunday, March 3, 13
  21. 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 clockwiseSunday, March 3, 13
  22. 22. Arc Demo Use M to start the shape at (0,0) Drawing an arc to (50,0) to get the half- circle gist/1490783Sunday, March 3, 13
  23. 23. Drawing Text <svg> use text to put some     <g text on screen transform="translate(0, 100)"> use fill to select a color       <text fill=blue font- size="1.5em"> Hello SVG use fonts as normal </text>     </g> Line breaks are </svg> removedSunday, March 3, 13
  24. 24. Text In Paths textPath element draws text along a path required: xlink:href to a path Demo: http:// 1490829Sunday, March 3, 13
  25. 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 DemoSunday, March 3, 13
  26. 26. Q&A, March 3, 13
  27. 27. SVG Animations, March 3, 13
  28. 28. SMIL Synchronized Multimedia Integration Language Features: Animate numeric attribute of an element Animate transform attributes Animate color attributes Follow a motion pathSunday, March 3, 13
  29. 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:, March 3, 13
  30. 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:, March 3, 13
  31. 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:, March 3, 13
  32. 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.htmlSunday, March 3, 13
  33. 33. Scale Animation another animateTransform This one uses from,to format of a single number to state scale factor Demo:, March 3, 13
  34. 34. Path Following animateMotion creates an animation along a path use path, dur, repeatCount Any path will work. Use inkscape to create paths Demo:, March 3, 13
  35. 35. Lab Draw the star on the right Use animation to rotate it clockwiseSunday, March 3, 13
  36. 36. Dynamic SVG Controlling SVG from JavaScript Bar GraphsSunday, March 3, 13
  37. 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:, March 3, 13
  38. 38. Diagonal Create rectangles in a loop from JS Demo: ynonp/KQ3Kx/Sunday, March 3, 13
  39. 39. Bar Graphs Paint bar graphs dynamically based on JS arrays Demo: ynonp/kBj5Z/2/Sunday, March 3, 13
  40. 40. Lab Add text descriptions to the bars Add animations to the bars Bonus: Allow user to resize the graphSunday, March 3, 13
  41. 41. Thank You Ynon Perek This keynote is licensed CC-BY-NC., March 3, 13