1 / 36

Introduction to SVG (Part 3)

Introduction to SVG (Part 3). Prepared by K.M.SO Department of Computer Science ver. 2 last update: June 2004. Adobe SVG 6.0 Viewer Pre-Release !. The Adobe SVG viewer 6 allows integration of Video, text-wrapping, rendering custum XML content, cursor support and many more features.

sadah
Download Presentation

Introduction to SVG (Part 3)

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Introduction to SVG (Part 3) Prepared by K.M.SO Department of Computer Science ver. 2 last update: June 2004

  2. Adobe SVG 6.0 Viewer Pre-Release ! • The Adobe SVG viewer 6 allows integration of Video, text-wrapping, rendering custum XML content, cursor support and many more features. • http://www.adobe.com/svg/viewer/install/beta.html

  3. Filters feGaussianBlur on alpha channel image with drop shadow Source image

  4. Filter ( feGaussianBlur on alpha channel ) <svg width="200" height="200" viewBox="0 0 200 200"> <defs> <g id="petal"> <path d="M 10 0 Q 27 -15 40 0 27 15 10 0" /> </g> <filter id="drop-shadow"> <feGaussianBlur in="SourceAlpha" stdDeviation="2"/> </filter> </defs> <g id="flower" filter="url(#drop-shadow)"> <path d="M 50 50 Q 40 70, 70 100 T 70 150" style="stroke: green; fill: none; stroke-width: 3;"/> <path d="M 70 100 Q 80 70, 120 80, 90 75, 75 105" style="stroke: none; fill: green;"/> <circle cx="40" cy="50" r="10" style="fill: gray;"/> <g style="stroke: black; fill: yellow;"> <use xlink:href="#petal" transform="translate(40,50)"/> <use xlink:href="#petal" transform="translate(40,50) rotate(40)"/> <use xlink:href="#petal" transform="translate(40,50) rotate(80)"/> <use xlink:href="#petal" transform="translate(40,50) rotate(120)"/> <use xlink:href="#petal" transform="translate(40,50) rotate(160)"/> <use xlink:href="#petal" transform="translate(40,50) rotate(200)"/> <use xlink:href="#petal" transform="translate(40,50) rotate(240)"/> <use xlink:href="#petal" transform="translate(40,50) rotate(280)"/> <use xlink:href="#petal" transform="translate(40,50) rotate(320)"/> </g> </g> </svg>

  5. Filter ( Merging filter result ) <svg width="200" height="200" viewBox="0 0 200 200"> <defs><g id="petal"> <path d="M 10 0 Q 27 -15 40 0 27 15 10 0" /></g> <filter id="drop-shadow"> <feGaussianBlur in="SourceAlpha" stdDeviation="2"/> <feOffset in="blur" dx="4" dy="4" result="offsetBlur"/> <feMerge> <feMergeNode in="offsetBlur"/> <feMergeNode in="SourceGraphic"/> </feMerge> </filter> </defs> <g id="flower" filter="url(#drop-shadow)"> <path d="M 50 50 Q 40 70, 70 100 T 70 150“ style="stroke: green; fill: none; stroke-width: 3;"/> <path d="M 70 100 Q 80 70, 120 80, 90 75, 75 105" style="stroke: none; fill: green;"/> <circle cx="40" cy="50" r="10" style="fill: gray;"/> <g style="stroke: black; fill: yellow;"> <use xlink:href="#petal" transform="translate(40,50)"/> <use xlink:href="#petal" transform="translate(40,50) rotate(40)"/> <use xlink:href="#petal" transform="translate(40,50) rotate(80)"/> <use xlink:href="#petal" transform="translate(40,50) rotate(120)"/> <use xlink:href="#petal" transform="translate(40,50) rotate(160)"/> <use xlink:href="#petal" transform="translate(40,50) rotate(200)"/> <use xlink:href="#petal" transform="translate(40,50) rotate(240)"/> <use xlink:href="#petal" transform="translate(40,50) rotate(280)"/> <use xlink:href="#petal" transform="translate(40,50) rotate(320)"/> </g> </g> </svg>

  6. More Filter example (1) <svg width="200" height="200" viewBox="0 0 200 200"> <defs><g id="petal"> <path d="M 10 0 Q 27 -15 40 0 27 15 10 0" /></g> <filter id="sky-in" filterUnits="objectBoundingBox"> <feImage xlink:href="sky.jpg" result="sky"/> <feComposite in="sky" in2="SourceGraphic" operator="in"/> </filter> <filter id="sky-out" filterUnits="objectBoundingBox"> <feImage xlink:href="sky.jpg" result="sky"/> <feComposite in="sky" in2="SourceGraphic" operator="out"/> </filter> <g id="flower" > <path d="M 50 50 Q 40 70, 70 100 T 70 150“ style="stroke: green; fill: none; stroke-width: 3;"/> <path d="M 70 100 Q 80 70, 120 80, 90 75, 75 105" style="stroke: none; fill: green;"/> <circle cx="40" cy="50" r="10" style="fill: gray;"/> <g style="stroke: black; fill: yellow;"> <use xlink:href="#petal" transform="translate(40,50)"/> <use xlink:href="#petal" transform="translate(40,50) rotate(40)"/> <use xlink:href="#petal" transform="translate(40,50) rotate(80)"/> <use xlink:href="#petal" transform="translate(40,50) rotate(120)"/> <use xlink:href="#petal" transform="translate(40,50) rotate(160)"/> <use xlink:href="#petal" transform="translate(40,50) rotate(200)"/> <use xlink:href="#petal" transform="translate(40,50) rotate(240)"/> <use xlink:href="#petal" transform="translate(40,50) rotate(280)"/> <use xlink:href="#petal" transform="translate(40,50) rotate(320)"/> </g></g></defs> <use xlink:href="#flower" transform="translate(10,10)“ filter="url(#sky-in)"/> <use xlink:href="#flower" transform="translate(170,10)“ filter="url(#sky-out)"/> </svg>

  7. More Filter example (2a)

  8. More Filter example (2b) <defs> <filter id="turb1"><feTurbulence type="turbulence“ baseFrequency="0.1" numOctaves="1" in="SourceGraphic"/></filter> <filter id="turb2"><feTurbulence type="turbulence“ baseFrequency="0.1" numOctaves="5" in="SourceGraphic"/></filter> <filter id="turb3"><feTurbulence type="turbulence“ baseFrequency="0.05" numOctaves="5" in="SourceGraphic"/></filter> <filter id="turb4"><feTurbulence type="fractalNoise“ baseFrequency="0.1" numOctaves="1" in="SourceGraphic"/></filter> <filter id="turb5"><feTurbulence type="fractalNoise“ baseFrequency="0.1" numOctaves="5" in="SourceGraphic"/></filter> <filter id="turb6"><feTurbulence type="fractalNoise“ baseFrequency="0.05" numOctaves="5" in="SourceGraphic"/></filter> </defs> <g transform="translate(10,20)"> <rect x="25" y="0" width="50" height="50" style="filter: url(#turb1);"/> </g> ….

  9. More Filter example (3) <svg width="" height=""> <filter id="ragged" filterUnits="objectBoundingBox" x="-15%" y="-15%" width="150%" height="150%"> <feTurbulence baseFrequency="0.5" numOctaves="2" result="turb"/> <feDisplacementMap in="SourceGraphic" in2="turb" scale="10" xChannelSelector="R" yChannelSelector="G" result="shifted"/> <feFlood flood-color="rgb(71,133,183)" result="color"/> <feComposite in2="shifted" in="color" operator="in"/> </filter> <rect x="40px" y="20px" width="50px" height="50px" filter="url(#ragged)"/> <text x="20px" y="150px" filter="url(#ragged)" style="fill:red; stroke:none; font-family:Arial, sans-serif; font-size:60"> Text with filter effects</text> </svg>

  10. More Filter example (4) with Lighting effects

  11. <svg width="7.5cm" height="5cm" viewBox="0 0 200 120"><defs> <filter id="MyFilter"> <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/> <feOffset in="blur" dx="4" dy="4" result="offsetBlur"/> <feSpecularLighting in="blur" surfaceScale="5" specularConstant="1" specularExponent="10" style="lighting-color:white" result="specOut"> <fePointLight x="-5000" y="-10000" z="20000"/> </feSpecularLighting> <feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut"/> <feComposite in="SourceGraphic" in2="specOut" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="litPaint"/> <feMerge> <feMergeNode in="offsetBlur"/> <feMergeNode in="litPaint"/> </feMerge> </filter> </defs><rect x="1" y="1" width="198" height="118" style="fill:#888888; stroke:blue"/> <g style="filter:url(#MyFilter)"> <g> <path style="fill:none; stroke:#D90000; stroke-width:10“ d="M50,90 C0,90 0,30 50,30 L150,30 C200,30 200,90 150,90 z" /><path style="fill:#D90000" d="M60,80 C30,80 30,40 60,40 L140,40 C170,40 170,80 140,80 z" /><g style="fill:#FFFFFF; stroke:black; font-size:45; font-family:Verdana"><text x="52" y="76">SVG</text></g></g></g></svg> Source code for reference only !!

  12. More Filter example (4) with Lighting effects

  13. Activity SVG tools • SVG Filter Editor 0.1b • An drag-N-drop filter tool (for testing only) • http://www.treebuilder.de/svg/filterworkshop/workshop.svgz (Time: <10mins)

  14. Animation • SVG supports the ability to change vector graphics over time. • There are 2 main ways for animating SVG content: • Through SVG animation elements. • By access to the SVG DOM.

  15. Animation Elements • Main animation elements in SVG: • ‘animate’ , ‘set’, ‘animateMotion’, ‘animateColor’, ‘animateTransform’. • Animation introduces the time dimension to the document. • Time units: h (hour), min (minutes), s (seconds), ms (milliseconds)

  16. Animation <svg width="250" height="100" viewBox="0 0 250 100"> <rect x="10" y="10" width="200" height="20" style="stroke: black; fill: none;"> <animate attributeName="width" attributeType="XML" from="200" to="20" begin="0s" dur="5s" fill="freeze" /> </rect> </svg>

  17. Animation <svg width="250" height="200" viewBox="0 0 250 200"> <rect x="10" y="10" width="20" height="20" style="stroke: black; fill: #cfc;"> <animate attributeName="width" attributeType="XML" begin="0s" dur="8s" from="20" to="120" fill="freeze"/> <animate attributeName="height" attributeType="XML" begin="0s" dur="8s" from="20" to="120" fill="freeze"/> </rect> <circle cx="70" cy="70" r="20" style="fill: #ccf; stroke: black;"> <animateattributeName="r" attributeType="XML" begin="2s" dur="4s" from="20" to="50" fill="freeze"/> </circle> </svg>

  18. start end Synchronization of Animations <svg width="250" height="200" viewBox="0 0 250 200"> <circle cx="60" cy="60" r="30" style="fill: #f9f; stroke: gray;"> <animate id="c1" attributeName="r" attributeType="XML" begin="0s" dur="4s" from="30" to="10" fill="freeze"/> </circle> <circle cx="120" cy="60" r="10" style="fill: #9f9; stroke: gray;"> <animate attributeName="r" attributeType="XML" begin="c1.end" dur="4s" from="10" to="30" fill="freeze"/> </circle> </svg>

  19. Repeated Animations <svg width="300" height="200" viewBox="0 0 300 200"> <circle cx="60" cy="60" r="30" style="fill: none; stroke: red;"> <animate attributeName="cx" attributeType="XML" begin="0s" dur="5s" repeatCount="2" from="60" to="260" fill="freeze"/> </circle> <circle cx="260" cy="130" r="30" style="fill: #ccf; stroke: black;"> <animate attributeName="cx" attributeType="XML" begin="0s" dur="5s" repeatDur="8s" from="260" to="60" fill="freeze"/> </circle> </svg>

  20. start end The set element <svg width="300" height="200" viewBox="0 0 300 200"> <circle cx="60" cy="60" r="30" style="fill: #ff9; stroke: gray;"> <animate id="c1" attributeName="r" attributeType="XML" begin="0s" dur="4s" from="30" to="0" fill="freeze"/> </circle> <text text-anchor="middle" x="60" y="60" style="visibility: hidden;"> <set attributeName="visibility" attributeType="CSS" to="visible" begin="4.5s" dur="1s" fill="freeze"/> All gone! </text> </svg>

  21. start end The animateColor element <svg width="300" height="200" viewBox="0 0 300 200"> <circle cx="60" cy="60" r="30" style="fill: #ff9; stroke: gray; stroke-width:10;"> <animateColor attributeName="fill" begin="2s" dur="4s" from="#ff9" to="red" fill="freeze"/> <animateColor attributeName="stroke" begin="2s" dur="4s" from="gray" to="blue" fill="freeze"/> </circle> </svg>

  22. The animateTransform <svg width="300" height="200" viewBox="0 0 300 200"> <g transform="translate(120,60)"> <rect x="-10" y="-10" width="20" height="20" style="fill: #ff9; stroke: black;"> <animateTransform attributeType="XML" attributeName="transform" type="scale" from="1" to="4 2" begin="0s" dur="4s" fill="freeze"/> </rect> </g> </svg>

  23. Multiple animateTransform <svg width="300" height="200" viewBox="0 0 300 200"> <g transform="translate(120,60)"> <rect x="-10" y="-10" width="20" height="20" style="fill: #ff9; stroke: black;"> <animateTransform attributeName="transform" attributeType="XML" type="scale" from="1" to="4 2" additive="sum" begin="0s" dur="4s" fill="freeze"/> <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0" to="45" additive="sum" begin="0s" dur="4s" fill="freeze"/> </rect> </g> </svg>

  24. Animation Along a Linear Path <svg width="300" height="200" viewBox="0 0 300 200"> <g> <rect x="0" y="0" width="30" height="30" style="fill: #ccc;"/> <circle cx="30" cy="30" r="15" style="fill: #cfc; stroke: green;"> </circle> <animateMotion from="0,0" to="60,30" dur="4s" fill="freeze"/> </g> </svg>

  25. Animation Along CompaxPath <svg width="300" height="200" viewBox="0 0 300 200"> <!-- show the path along which the triangle will move --> <path d="M50,125 C 100,25 150,225, 200, 125" style="fill: none; stroke: blue;"/> <!-- Triangle to be moved along the motion path. It is defined with an upright orientation with the base of the triangle centered horizontally just above the origin. --> <path d="M-10,-3 L10,-3 L0,-25z" style="fill: yellow; stroke: red;"> <animateMotion path="M50,125 C 100,25 150,225, 200, 125" dur="6s" fill="freeze"/> </path> </svg>

  26. Animation Along a Linear Path with Auto-Rotation <svg width="300" height="200" viewBox="0 0 300 200"> <!-- show the path along which the triangle will move --> <path d="M50,125 C 100,25 150,225, 200, 125" style="fill: none; stroke: blue;"/> <!-- Triangle to be moved along the motion path. It is defined with an upright orientation with the base of the triangle centered horizontally just above the origin. --> <path d="M-10,-3 L10,-3 L0,-25z" style="fill: yellow; stroke: red;" > <animateMotion path="M50,125 C 100,25 150,225, 200, 125" rotate="auto" dur="6s" fill="freeze"/> </path> </svg>

  27. Activity SVG tools • Inkscape • An open source SVG editor. • Fully XML, SVG, and CSS2 compliant SVG drawing tool • Supported SVG features include • basic shapes, paths, text, alpha blending, transforms, gradients, node editing, svg-to-png export, grouping, and more... • http://www.inkscape.org/ (Time: <10mins)

  28. www.w3.org/SVG/ Links in SVG <svg width="300" height="200" viewBox="0 0 300 200"> <a xlink:href="cat.svg"> <text x="100" y="30" style="font-size: 12pt;">Cat</text> </a> <a xlink:href="http://www.w3.org/SVG/"> <circle cx="50" cy="70" r="20" style="fill: red;"/> <rect x="75" y="50" width="40" height="40" style="fill: green;"/> <path d="M120 90, 140 50, 160 90 Z" style="fill: blue;"/> </a> </svg>

  29. SVG and HTML example_1119.html

  30. Interaction in SVG • Interaction using the mouse <svg> <rect x="10" y="10" width="140" height="140" rx="5" ry="5" style="fill:lightgrey"> <set attributeName="fill" from="lightgrey" to="red" begin="mouseover" end="mouseout"/> </rect> <text x="200" y="75" font-size="30">Move over me and click <set attributeName="font-size" from="30" to="35" begin="mouseover" end="mouseout"/> <set attributeName="fill" from="black" to="red" begin="mousedown" end="mouseup"/> </text> </svg>

  31. Interaction in SVG • Capturing a keypress <svg> <rect x="20" y="20" width="100" height="100" rx="5" ry="5" style="fill:red"> <animate attributeName="opacity" from="1" to="0" begin="accessKey(1)" dur="3s" fill="restore" /> </rect> <rect x="140" y="20" width="100" height="100" rx="5" ry="5" style="fill:red"> <animateTransform attributeName="transform" type="rotate" from="0" to="90" begin="accessKey(2)" dur="3s"/> </rect> <rect x="260" y="20" width="100" height="100" rx="5" ry="5" style="fill:red"> <animateColor attributeName="fill" from="red" to="green" begin="accessKey(3)" dur="3s" /> <animate attributeName="y" from="20" to="100" begin="accessKey(&#13;)" dur="3s" fill="restore" /> </rect> </svg> 1 2 Enter

  32. Scripting in SVG (1) <svg width="300" height="200" viewBox="0 0 300 200"> <script type="text/ecmascript"> <![CDATA[ function enlarge_circle(evt) { var circle = evt.getTarget(); circle.setAttribute("r", 50); } function shrink_circle(evt) { var circle = evt.getTarget(); circle.setAttribute("r", 25); } // ]]> </script> <circle cx="150" cy="100" r="25" fill="red" onmouseover="enlarge_circle(evt)“ onmouseout="shrink_circle(evt)"/> <text x="150" y="175" style="text-anchor: middle;"> Mouse over the circle to change its size. </text> </svg>

  33. Scripting in SVG (2) demo file: /lab/listing.html

  34. Activity SVG tools • AutoTrace • Converts bitmap to vector graphics • On-line demo is available • http://autotrace.sourceforge.net/index.html (Time: <10mins) SVG PNG

  35. Generating SVG • Generate SVG chart with Excel • Generate SVG with PHP scripts

  36. END

More Related