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 Source image feGaussianBlur on alpha channel image with drop shadow

4. Filter ( feGaussianBlur on alpha channel ) <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;"/>

5. Filter ( Merging filter result )

6. More Filter example (1)

7. More Filter example (2a)

8. More Filter example (2b) <feTurbulence type="turbulence“ baseFrequency="0.1" numOctaves="1" in="SourceGraphic"/> <feTurbulence type="turbulence“ baseFrequency="0.1" numOctaves="5" in="SourceGraphic"/> <feTurbulence type="turbulence“ baseFrequency="0.05" numOctaves="5" in="SourceGraphic"/> <feTurbulence type="fractalNoise“ baseFrequency="0.1" numOctaves="1" in="SourceGraphic"/> <feTurbulence type="fractalNoise“ baseFrequency="0.1" numOctaves="5" in="SourceGraphic"/> <feTurbulence type="fractalNoise“ baseFrequency="0.05" numOctaves="5" in="SourceGraphic"/> ….

9. More Filter example (3) <filter id="ragged" filterUnits="objectBoundingBox" x="-15%" y="-15%" width="150%" height="150%"> <feDisplacementMap in="SourceGraphic" in2="turb" scale="10" xChannelSelector="R" yChannelSelector="G" result="shifted"/> <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

10. More Filter example (4) with Lighting effects

11. SVG Source code for reference only !!

12. More Filter example (4) with Lighting effects

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

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 <animate attributeName="width" attributeType="XML" from="200" to="20" begin="0s" dur="5s" fill="freeze" />

17. Animation <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"/> <animate attributeName="r" attributeType="XML" begin="2s" dur="4s" from="20" to="50" fill="freeze"/>

18. Synchronization of Animations <animate id="c1" attributeName="r" attributeType="XML" begin="0s" dur="4s" from="30" to="10" fill="freeze"/> <animate attributeName="r" attributeType="XML" begin="c1.end" dur="4s" from="10" to="30" fill="freeze"/> startend

19. Repeated Animations <animate attributeName="cx" attributeType="XML" begin="0s" dur="5s" repeatCount="2" from="60" to="260" fill="freeze"/> <animate attributeName="cx" attributeType="XML" begin="0s" dur="5s" repeatDur="8s" from="260" to="60" fill="freeze"/>

20. The set element <animate id="c1" attributeName="r" attributeType="XML" begin="0s" dur="4s" from="30" to="0" fill="freeze"/> <set attributeName="visibility" attributeType="CSS" to="visible" begin="4.5s" dur="1s" fill="freeze"/> All gone! startend

21. startend The animateColor element <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"/>

22. The animateTransform <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"/>

23. Multiple animateTransform <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"/>

24. Animation Along a Linear Path <rect x="0" y="0" width="30" height="30" style="fill: #ccc;"/> <circle cx="30" cy="30" r="15" style="fill: #cfc; stroke: green;">

25. Animation Along CompaxPath <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. --> <animateMotion path="M50,125 C 100,25 150,225, 200, 125" dur="6s" fill="freeze"/>

26. Animation Along a Linear Path with Auto-Rotation <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. --> <animateMotion path="M50,125 C 100,25 150,225, 200, 125" rotate="auto" dur="6s" fill="freeze"/>

27. 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) Activity SVG tools

28. Links in SVG Cat www.w3.org/SVG/

29. SVG and HTML example_1119.html

30. Interaction in SVG  Interaction using the mouse Move over me and click

31. Interaction in SVG  Capturing a keypress 1Enter2

32. Scripting in SVG (1) <![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); } // ]]> <circle cx="150" cy="100" r="25" fill="red" onmouseover="enlarge_circle(evt)“ onmouseout="shrink_circle(evt)"/ > Mouse over the circle to change its size.

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

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

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

36. END