Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

SVG (Devoxx 2011, 2011-NOV-14)

877 views

Published on

Tutorial about Scalable Vector Graphics, including some exercises.

Published in: Technology, Art & Photos
  • Be the first to comment

SVG (Devoxx 2011, 2011-NOV-14)

  1. 1. Scalable Vector Graphics (SVG)An IntroductionFilip van LaenenChief EngineerComputas
  2. 2. Agenda• Part I – Introduction – Whats SVG? – Why use SVG? – Tools – Sample art work• Part II – Code-along – Examples and exercises 2
  3. 3. About MeFilip.van.Laenen@computas.com f.a.vanlaenen@ieee.org @filipvanlaenen
  4. 4. My Background• Java, (Smalltalk)• (Perl), Ruby• XML – XSLT – XSD – Namespaces• HTML – CSS 4
  5. 5. Introduction to SVG History of SVG Whats SVG? Why use SVG? Related and Competing Standards
  6. 6. History of SVG• 1999: Version 1.0 – PGML (Precision Graphics Markup Language) – VML (Vector Markup Language)• 2001: Version 1.0 recommendation• 2003: Version 1.1 recommendation – SVG Mobile: SVG Basic & SVG Tiny• 2008: SVG Tiny 1.2 recommendation• 2011: SVG 1.1 SE recommendation• Version 1.2 working draft• SVG 2.0 in progress 6
  7. 7. Whats SVG?• Scalable Vector Graphics – Vector based graphics on the net – No quality loss after scaling• XML based – Integrates with DOM and XSL• Animation on every element 7
  8. 8. Why SVG?• Scaling 8
  9. 9. Why SVG? (contd)• Smaller files – Better compression than JPEG or PNG – Even better with SVGZ• Open standard, part of HTML 5 – Pure XML – Can be read and manipulated by many tools – Extensible• Text based – Text manipulation – Indexing 9
  10. 10. Why SVG? (contd)• In-line in HTML possible – Shared CSS• Animation and interaction – SMIL – ECMAScript – Other scripting languages 10
  11. 11. Why not SVG?• Take a guess… 11
  12. 12. Browser Support for SVG• Konqueror• Google Chrome• Opera• Safari• Firefox (since version 4.0)• Internet Explorer 9 12
  13. 13. Related and Competing Standards• Flash• VML †• XAML †• Silverlight (†)• JPEG – Photos• PNG (GIF ) † – Pixel based drawings 13
  14. 14. Competing Non-Standards• Visio diagrammes• Powerpoint slides 14
  15. 15. Creating SVG Files Manually Programmatically
  16. 16. Manual Production• Drawing tools – Inkscape •http://www.inkscape.org/ – Export from other drawing tools• Any XML editor• Any text editor• Any browser to view/check the result 16
  17. 17. Programmatical Production• API – SVG library based – XML – Text• Structure – Template based – From scratch 17
  18. 18. Sample Art Work
  19. 19. Learn More about SVG• W3C Recommendation – http://www.w3.org/TR/SVG/Overview.html• SVG Basics Tutorial – http://www.svgbasics.com/index.html• Open Clip Art Library – http://www.openclipart.org/• Inkscape – http://www.inkscape.org/ 23
  20. 20. Questions?
  21. 21. Code-along
  22. 22. Tools• Text editor – (XML editor)• Browser 26
  23. 23. Topics• Circle, ellipse, rect, opacity, rx, ry• Line, polygon• Polyline, path, marker• Text, tspan• Stroke• Linear and radial gradient• Patterns• Groups• Filters• Animation 27
  24. 24. Code-alongPart 1 – Circle, ellipse, rect, opacity, rx, ry
  25. 25. Circle<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="150" height="100" version="1.1" xmlns="http://www.w3.org/2000/svg"> <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/></svg> 29
  26. 26. Ellipse<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="150" height="100" version="1.1" xmlns="http://www.w3.org/2000/svg"> <ellipse cx="100" cy="50" rx="40" ry="30" stroke="black" stroke-width="2" fill="red"/></svg> 30
  27. 27. Rectangle<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1; stroke:rgb(0,0,0)"/></svg> 31
  28. 28. Opacity<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> <rect x="20" y="20" width="250" height="250" style="fill:blue;stroke:pink; stroke-width:5; fill-opacity:0.1;stroke-opacity:0.9"/></svg> 32
  29. 29. Rounded Corners<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> <rect x="20" y="20" rx="20" ry="20" width="250" height="100" style="fill:red;stroke:black; stroke-width:5;opacity:0.5"/></svg> 33
  30. 30. Excercise #1• Yellow circle, green border• Blue rectangle, 50% opaque• Red rectangle, rounded corners, black border 34
  31. 31. Code-alongPart 2 – Line, polygon
  32. 32. Line<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> <line x1="0" y1="0" x2="300" y2="300" stroke="red" stroke-width="2"/></svg> 36
  33. 33. Polygon<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> <polygon points="220,100 300,210 170,250" fill="#cccccc" stroke="#000000" stroke-width="1"/></svg> 37
  34. 34. Excercise #2• Cumulative diagramme• X and Y axis• Blue, yellow and red data 38
  35. 35. Code-alongPart 3 – Polyline, path, marker
  36. 36. Polyline<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> <polyline points="0,0 0,20 20,20 20,40 40,40 40,60" fill="none" stroke="red" stroke-width="2"/></svg> 40
  37. 37. Polyline (contd)<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> <polyline points="0,0 0,20 20,20 20,40 40,40 40,60" fill="blue" stroke="red" stroke-width="2"/></svg> 41
  38. 38. Path<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="400" height="400" version="1.1" xmlns="http://www.w3.org/2000/svg"> <path d="M250 150 L150 350 L350 350 Z" /></svg> 42
  39. 39. Path Commands• M/m: Moveto• L/l: Lineto• H/h: Horizontal lineto• V/v: Vertical lineto• C/c: Curveto• S/s: Smooth curveto• Q/q: Quadratic Bézier curve• T/t: Smooth quadratic Bézier curveto• A/a: Elliptical arc• Z/z: Closepath 43
  40. 40. Elliptic Arc• Rx and ry: radius• X-axis-rotation: Rotation of the X axis• Large-arc-flag: – 0 if less than 180° – 1 if more than 180°• Sweep-flag: – 0 if negative direction – 1 if positive direction• X and y: end points 44
  41. 41. Eliptic Arc (contd)<svg width="700" height="500" version="1.1" xmlns="http://www.w3.org/2000/svg"> <path d="M300 200 A200 150 30 0 0 400 300" fill="none" stroke="black" stroke-width="2"/> <path d="M300 200 A200 150 30 0 1 400 300" fill="none" stroke="red" stroke-width="2"/> <path d="M300 200 A200 150 30 1 0 400 300" fill="none" stroke="green" stroke-width="2"/> <path d="M300 200 A200 150 30 1 1 400 300" fill="none" stroke="blue" stroke-width="2"/></svg> 45
  42. 42. Marker<svg width="100%" height="100%" version="1.1"xmlns="http://www.w3.org/2000/svg">… <path d="M 200 250 L 700 100 L 900 350 L 1200 400" fill="none" stroke="black" stroke-width="50" marker-start="url(#StartMarker)" marker-mid="url(#MidMarker)" marker-end="url(#EndMarker)"/></svg> 46
  43. 43. Marker Definition<svg width="100%" height="100%" version="1.1"xmlns="http://www.w3.org/2000/svg"> <defs> <marker id="StartMarker" viewBox="0 0 12 12" refX="12" refY="6" markerWidth="3" markerHeight="3" stroke="green" stroke-width="2" fill="none" orient="auto"> <circle cx="6" cy="6" r="5"/> </marker> … </defs>… 47
  44. 44. Excercise #3.1• Same as exercise #2, but line diagramme 48
  45. 45. Excercise #3.2• Same as exercise #3.1, but with markers 49
  46. 46. Excercise #3.3• Pie diagramme 50
  47. 47. Code-along Part 4 – Text, tspan
  48. 48. Text<svg width="150" height="60" version="1.1" xmlns="http://www.w3.org/2000/svg"> <text x="10" y="25" fill="navy" font-size="15"> Lorem ipsum </text> <text x="10" y="25" dx="5" dy="15" fill="red" font-size="18"> Dolor sit amet </text></svg> 52
  49. 49. Tspan<svg width="150" height="60" version="1.1" xmlns="http://www.w3.org/2000/svg"> <text x="30" y="25" fill="navy" font-size="15"> <tspan> Lorem ipsum </tspan> <tspan dx="-50" dy="15" font-style="italic"> Dolor sit amet </tspan> </text></svg> 53
  50. 50. Text Style• Font-family• Font-size• Font-style: normal, italic or oblique• Font-variant: normal, small-caps• Font-weight: normal, bold, bolder, lighter, …• Text-anchor: start, middle, end• Text-decoration: none, underline, overline, … 54
  51. 51. Excercise #4• Pie diagramme with labels 55
  52. 52. Code-along Part 5 – Stroke
  53. 53. Stroke• Stroke-width• Stroke-linecap: butt, round, square• Stroke-linejoin: miter, round, bevel• Stroke-miterlimit• Stroke-dasharray• Stroke-dashoffset• Stroke-opacity 58
  54. 54. Excercise #5• Same as exercise #3.1 – Blue line dashed – Red line half transparent 59
  55. 55. Code-alongPart 6 – Linear and radial gradients
  56. 56. Linear Gradient<svg width="600" height="400" version="1.1" xmlns="http://www.w3.org/2000/svg"> <defs> <linearGradient id="MyGradient"> <stop offset="0%" stop-color="orange"/> <stop offset="100%" stop-color="yellow"/> </linearGradient> </defs> <rect x="50" y="50" width="500" height="300" fill="url(#MyGradient)" stroke="black" stroke-width="2"/></svg> 62
  57. 57. Linear Gradient (contd)<svg width="600" height="400" version="1.1" xmlns="http://www.w3.org/2000/svg"> <defs> <linearGradient id="MyGradient"> <stop offset="0%" stop-color="orange"/> <stop offset="50%" stop-color="yellow"/> <stop offset="100%" stop-color="green"/> </linearGradient> </defs> <rect x="50" y="50" width="500" height="300" fill="url(#MyGradient)" stroke="black" stroke-width="2"/></svg> 63
  58. 58. Linear Gradient (contd)<svg width="600" height="400" version="1.1" xmlns="http://www.w3.org/2000/svg"> <defs> <linearGradient id="MyGradient"> <stop offset="20%" stop-color="orange"/> <stop offset="50%" stop-color="yellow"/> <stop offset="80%" stop-color="green"/> </linearGradient> </defs> <rect x="50" y="50" width="500" height="300" fill="url(#MyGradient)" stroke="black" stroke-width="2"/></svg> 64
  59. 59. Linear Gradient (contd)<svg width="600" height="400" version="1.1" xmlns="http://www.w3.org/2000/svg"> <defs> <linearGradient id="MyGradient" x1="0%" y1="0%" x2="100%" y2="100%"> <stop offset="0%" stop-color="orange"/> <stop offset="50%" stop-color="yellow"/> <stop offset="100%" stop-color="green"/> </linearGradient> </defs> 65
  60. 60. Linear Gradient (contd)<svg width="600" height="400" version="1.1" xmlns="http://www.w3.org/2000/svg"> <defs> <linearGradient id="MyGradient" x1="0%" y1="0%" x2="100%" y2="50%"> <stop offset="0%" stop-color="orange"/> <stop offset="50%" stop-color="yellow"/> <stop offset="100%" stop-color="green"/> </linearGradient> </defs> 66
  61. 61. Linear Gradient (contd)<svg width="600" height="400" version="1.1" xmlns="http://www.w3.org/2000/svg"> <defs> <linearGradient id="MyGradient" x1="0%" y1="0%" x2="100%" y2="50%"> <stop offset="0%" stop-color="orange"/> <stop offset="50%" stop-color="yellow"/> <stop offset="100%" stop-color="green" stop-opacity=".3"/> </linearGradient> </defs> 67
  62. 62. Excercise #6.1• Same as exercise #2, but with gradients 68
  63. 63. Radial Gradient<svg width="600" height="400" version="1.1" xmlns="http://www.w3.org/2000/svg"> <defs> <radialGradient id="MyGradient" cx="50%" cy="50%" r="50%"> <stop offset="0%" stop-color="orange"/> <stop offset="100%" stop-color="yellow"/> </radialGradient> </defs> <circle cx="300" cy="200" r="180"stroke="black" stroke-width="2" fill="url(#MyGradient)"/></svg> 69
  64. 64. Radial Gradient (contd)<svg width="600" height="400" version="1.1" xmlns="http://www.w3.org/2000/svg"> <defs> <radialGradient id="MyGradient" cx="50%" cy="50%" r="50%" fx="25%" fy="25%"> <stop offset="0%" stop-color="orange"/> <stop offset="100%" stop-color="yellow"/> </radialGradient> </defs> <circle cx="300" cy="200" r="180"stroke="black" stroke-width="2" fill="url(#MyGradient)"/></svg> 70
  65. 65. Excercise #6.2• Same as exercise #4, but with gradients – Use gradientUnits="userSpaceOnUse" 71
  66. 66. Just Mentioning Patterns and Groups
  67. 67. Patterns 73
  68. 68. Groups• Logical unit• Common attributes – Color – Opacity – Fill, stroke, gradients• Attributes can be overriden a lower level 74
  69. 69. Code-Along Part 7 – Filters
  70. 70. Filters• Primitives – Lighting – Blur – Color tranformations – Displacement – Turbulence• Filter mathematics – Composition – Blending – Addition 76
  71. 71. Filter<svg width="600" height="400" version="1.1" xmlns="http://www.w3.org/2000/svg"> <filter id="f1" width="150%" height="150%"> <feOffset result="offOut" in="SourceGraphic" dx="10" dy="10"/> <feBlend in="SourceGraphic" in2="offOut" mode="normal"/> </filter> <rect filter="url(#f1)" x="40" y="40" rx="40" ry="40" width="400" height="200" style="fill:red;stroke:black; stroke-width:5;opacity:0.5"/></svg> 77
  72. 72. Filter (contd) <filter id="f2" width="150%" height="150%"> <feOffset result="offOut" in="SourceGraphic" dx="10" dy="10"/> <feGaussianBlur result="blurOut" in="offOut" stdDeviation="5"/> <feBlend in="SourceGraphic" in2="blurOut" mode="normal"/> </filter> 78
  73. 73. Filter Sources• Result from another filter• SourceGraphic• SourceAlpha• BackgroundImage• BackgroundAlpha• FillPaint• StrokePaint 79
  74. 74. Filter (contd) <filter id="f3" width="150%" height="150%"> <feOffset result="offOut" in="SourceAlpha" dx="10" dy="10"/> <feGaussianBlur result="blurOut" in="offOut" stdDeviation="5"/> <feBlend in="SourceGraphic" in2="blurOut" mode="normal"/> </filter> 80
  75. 75. Filter (contd) <filter id="f4" width="150%" height="150%"> <feOffset result="offOut" in="SourceGraphic" dx="10" dy="10"/> <feColorMatrix result="matrixOut" in="offOut" type="matrix" values="0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0"/> <feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="5"/> <feBlend in="SourceGraphic" in2="blurOut" mode="normal"/> </filter> 81
  76. 76. Color Transformations• Matrix: – Transformation per color channel (r, g, b and α) – 0 is black (no color)• Alternatives: – Saturate, HueRotate, LuminanceToAlpha 82
  77. 77. Code-Along Part 8 – Animation
  78. 78. Animation• Animation elements• Scripting – ECMAScript a.o.• SMIL – Synchronized Multimedia Integration Language 84
  79. 79. Animate<circle cx="100" cy="50" stroke="green" stroke-width="2" fill="yellow"> <animate attributeName="r" attributeType="XML" begin="0s" dur="9s" from="20" to="60" fill="freeze"/></circle><rect x="20" y="30" width="200" height="100" fill="blue" opacity="0.5"> <animate attributeName="opacity" attributeType="XML" begin="0s" dur="9s" fill="remove" from="0.2" to="1"/></rect> 85
  80. 80. AnimateTransform<rect x="20" y="30" width="200" height="100" fill="blue"> <animateTransform attributeName="transform" attributeType="XML" type="scale" from="1" to="2" dur="5s" fill="freeze"/></rect><rect x="10" y="70" width="100" height="100" fill="red"> <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0" to="360" dur="5s" repeatCount="indefinite"/></rect> 86
  81. 81. OnClick<rect x="10" y="70" width="100" height="100" fill="red" onclick="evt.target.setAttribute(fill,green)"/> 87
  82. 82. OnLoad<svg … onload="StartAnimation(evt)"> <script type="application/ecmascript"><![CDATA[ … function StartAnimation(evt) { blue_rect =evt.target.ownerDocument.getElementById("BlueRect"); blue_rect.setAttribute("transform", "scale(" + scalefactor + ")"); … } ]]></script> <rect id="BlueRect" x="20" y="30" width="20" height="10" fill="blue"/> 88
  83. 83. Topics Not Covered
  84. 84. Topics Not Covered• Transform and viewBox• Clipping, masking and compositing• Fonts• Glyphs• Linking• Metadata• Extensibility 90
  85. 85. Learn More about SVG• W3C Recommendation – http://www.w3.org/TR/SVG/Overview.html• SVG Basics Tutorial – http://www.svgbasics.com/index.html• Open Clip Art Library – http://www.openclipart.org/• Inkscape – http://www.inkscape.org/ 91
  86. 86. Questions? Comments?Filip.van.Laenen@computas.com f.a.vanlaenen@ieee.org @filipvanlaenen
  87. 87. Thanks!Filip.van.Laenen@computas.com f.a.vanlaenen@ieee.org @filipvanlaenen

×