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. § http: //www. adobe. com/svg/viewer/install/beta. html
Filters Source image fe. Gaussian. Blur on alpha channel image with drop shadow
Filter ( fe. Gaussian. Blur on alpha channel ) <svg width="200" height="200" view. Box="0 0 200"> <defs> <g id="petal"> <path d="M 10 0 Q 27 -15 40 0 27 15 10 0" /> </g> <filter id="drop-shadow"> <fe. Gaussian. Blur in="Source. Alpha" std. Deviation="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> </svg>
Filter ( Merging filter result ) <svg width="200" height="200" view. Box="0 0 200"> <defs><g id="petal"> <path d="M 10 0 Q 27 -15 40 0 27 15 10 0" /></g> <filter id="drop-shadow"> <fe. Gaussian. Blur in="Source. Alpha" std. Deviation="2"/> <fe. Offset in="blur" dx="4" dy="4" result="offset. Blur"/> <fe. Merge. Node in="offset. Blur"/> <fe. Merge. Node in="Source. Graphic"/> </fe. Merge> </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> </svg>
More Filter example (1) <svg width="200" height="200" view. Box="0 0 200"> <defs><g id="petal"> <path d="M 10 0 Q 27 -15 40 0 27 15 10 0" /></g> <filter id="sky-in" filter. Units="object. Bounding. Box"> <fe. Image xlink: href="sky. jpg" result="sky"/> <fe. Composite in="sky" in 2="Source. Graphic" operator="in"/> </filter> <filter id="sky-out" filter. Units="object. Bounding. Box"> <fe. Image xlink: href="sky. jpg" result="sky"/> <fe. Composite in="sky" in 2="Source. Graphic" 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></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>
More Filter example (2 a)
More Filter example (2 b) <defs> <filter id="turb 1"><fe. Turbulence type="turbulence“ base. Frequency="0. 1" num. Octaves="1" in="Source. Graphic"/></filter> <filter id="turb 2"><fe. Turbulence type="turbulence“ base. Frequency="0. 1" num. Octaves="5" in="Source. Graphic"/></filter> <filter id="turb 3"><fe. Turbulence type="turbulence“ base. Frequency="0. 05" num. Octaves="5" in="Source. Graphic"/></filter> <filter id="turb 4"><fe. Turbulence type="fractal. Noise“ base. Frequency="0. 1" num. Octaves="1" in="Source. Graphic"/></filter> <filter id="turb 5"><fe. Turbulence type="fractal. Noise“ base. Frequency="0. 1" num. Octaves="5" in="Source. Graphic"/></filter> <filter id="turb 6"><fe. Turbulence type="fractal. Noise“ base. Frequency="0. 05" num. Octaves="5" in="Source. Graphic"/></filter> </defs> <g transform="translate(10, 20)"> <rect x="25" y="0" width="50" height="50" style="filter: url(#turb 1); "/> </g> ….
More Filter example (3) <svg width="" height=""> <filter id="ragged" filter. Units="object. Bounding. Box" x="-15%" y="-15%" width="150%" height="150%"> <fe. Turbulence base. Frequency="0. 5" num. Octaves="2" result="turb"/> <fe. Displacement. Map in="Source. Graphic" in 2="turb" scale="10" x. Channel. Selector="R" y. Channel. Selector="G" result="shifted"/> <fe. Flood flood-color="rgb(71, 133, 183)" result="color"/> <fe. Composite in 2="shifted" in="color" operator="in"/> </filter> <rect x="40 px" y="20 px" width="50 px" height="50 px" filter="url(#ragged)"/> <text x="20 px" y="150 px" filter="url(#ragged)" style="fill: red; stroke: none; font-family: Arial, sans-serif; font-size: 60"> Text with filter effects</text> </svg>
More Filter example (4) with Lighting effects
<svg width="7. 5 cm" height="5 cm" view. Box="0 0 200 120"><defs> <filter id="My. Filter"> <fe. Gaussian. Blur in="Source. Alpha" std. Deviation="4" result="blur"/> <fe. Offset in="blur" dx="4" dy="4" result="offset. Blur"/> <fe. Specular. Lighting in="blur" surface. Scale="5" specular. Constant="1" specular. Exponent="10" style="lighting-color: white" result="spec. Out"> <fe. Point. Light x="-5000" y="-10000" z="20000"/> </fe. Specular. Lighting> <fe. Composite in="spec. Out" in 2="Source. Alpha" operator="in" result="spec. Out"/> <fe. Composite in="Source. Graphic" in 2="spec. Out" operator="arithmetic" k 1="0" k 2="1" k 3="1" k 4="0" result="lit. Paint"/> <fe. Merge. Node in="offset. Blur"/> <fe. Merge. Node in="lit. Paint"/> </fe. Merge> Source code for reference only !! </filter> </defs><rect x="1" y="1" width="198" height="118" style="fill: #888888; stroke: blue"/> <g style="filter: url(#My. Filter)"> <g> <path style="fill: none; stroke: #D 90000; stroke-width: 10“ d="M 50, 90 C 0, 90 0, 30 50, 30 L 150, 30 C 200, 30 200, 90 150, 90 z" /><path style="fill: #D 90000" d="M 60, 80 C 30, 80 30, 40 60, 40 L 140, 40 C 170, 40 170, 80 140, 80 z" /><g style="fill: #FFFFFF; stroke: black; font-size: 45; fontfamily: Verdana"><text x="52" y="76">SVG</text></g></g></svg>
More Filter example (4) with Lighting effects
Activity SVG tools n SVG Filter Editor 0. 1 b n An drag-N-drop filter tool (for testing only) – http: //www. treebuilder. de/svg/filterworkshop/workshop. svgz (Time: <10 mins)
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.
Animation Elements § Main animation elements in SVG: § ‘animate’ , ‘set’, ‘animate. Motion’, ‘animate. Color’, ‘animate. Transform’. § Animation introduces the time dimension to the document. § Time units: h (hour), min (minutes), s (seconds), ms (milliseconds)
Animation <svg width="250" height="100" view. Box="0 0 250 100"> <rect x="10" y="10" width="200" height="20" style="stroke: black; fill: none; "> <animate attribute. Name="width" attribute. Type="XML" from="200" to="20" begin="0 s" dur="5 s" fill="freeze" /> </rect> </svg>
Animation <svg width="250" height="200" view. Box="0 0 250 200"> <rect x="10" y="10" width="20" height="20" style="stroke: black; fill: #cfc; "> <animate attribute. Name="width" attribute. Type="XML" begin="0 s" dur="8 s" from="20" to="120" fill="freeze"/> <animate attribute. Name="height" attribute. Type="XML" begin="0 s" dur="8 s" from="20" to="120" fill="freeze"/> </rect> <circle cx="70" cy="70" r="20" style="fill: #ccf; stroke: black; "> <animate attribute. Name="r" attribute. Type="XML" begin="2 s" dur="4 s" from="20" to="50" fill="freeze"/> </circle> </svg>
Synchronization of Animations start end <svg width="250" height="200" view. Box="0 0 250 200"> <circle cx="60" cy="60" r="30" style="fill: #f 9 f; stroke: gray; "> <animate id="c 1" attribute. Name="r" attribute. Type="XML" begin="0 s" dur="4 s" from="30" to="10" fill="freeze"/> </circle> <circle cx="120" cy="60" r="10" style="fill: #9 f 9; stroke: gray; "> <animate attribute. Name="r" attribute. Type="XML" begin="c 1. end" dur="4 s" from="10" to="30" fill="freeze"/> </circle> </svg>
Repeated Animations <svg width="300" height="200" view. Box="0 0 300 200"> <circle cx="60" cy="60" r="30" style="fill: none; stroke: red; "> <animate attribute. Name="cx" attribute. Type="XML" begin="0 s" dur="5 s" repeat. Count="2" from="60" to="260" fill="freeze"/> </circle> <circle cx="260" cy="130" r="30" style="fill: #ccf; stroke: black; "> <animate attribute. Name="cx" attribute. Type="XML" begin="0 s" dur="5 s" repeat. Dur="8 s" from="260" to="60" fill="freeze"/> </circle> </svg>
The set element start end <svg width="300" height="200" view. Box="0 0 300 200"> <circle cx="60" cy="60" r="30" style="fill: #ff 9; stroke: gray; "> <animate id="c 1" attribute. Name="r" attribute. Type="XML" begin="0 s" dur="4 s" from="30" to="0" fill="freeze"/> </circle> <text-anchor="middle" x="60" y="60" style="visibility: hidden; "> <set attribute. Name="visibility" attribute. Type="CSS" to="visible" begin="4. 5 s" dur="1 s" fill="freeze"/> All gone! </text> </svg>
The animate. Color element <svg width="300" height="200" view. Box="0 0 300 200"> start <circle cx="60" cy="60" r="30" style="fill: #ff 9; stroke: gray; stroke-width: 10; "> <animate. Color attribute. Name="fill" begin="2 s" dur="4 s" from="#ff 9" to="red" fill="freeze"/> <animate. Color attribute. Name="stroke" begin="2 s" dur="4 s" from="gray" to="blue" fill="freeze"/> </circle> </svg> end
The animate. Transform <svg width="300" height="200" view. Box="0 0 300 200"> <g transform="translate(120, 60)"> <rect x="-10" y="-10" width="20" height="20" style="fill: #ff 9; stroke: black; "> <animate. Transform attribute. Type="XML" attribute. Name="transform" type="scale" from="1" to="4 2" begin="0 s" dur="4 s" fill="freeze"/> </rect> </g> </svg>
Multiple animate. Transform <svg width="300" height="200" view. Box="0 0 300 200"> <g transform="translate(120, 60)"> <rect x="-10" y="-10" width="20" height="20" style="fill: #ff 9; stroke: black; "> <animate. Transform attribute. Name="transform" attribute. Type="XML" type="scale" from="1" to="4 2" additive="sum" begin="0 s" dur="4 s" fill="freeze"/> <animate. Transform attribute. Name="transform" attribute. Type="XML" type="rotate" from="0" to="45" additive="sum" begin="0 s" dur="4 s" fill="freeze"/> </rect> </g> </svg>
Animation Along a Linear Path <svg width="300" height="200" view. Box="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> <animate. Motion from="0, 0" to="60, 30" dur="4 s" fill="freeze"/> </g> </svg>
Animation Along Compax. Path <svg width="300" height="200" view. Box="0 0 300 200"> <!-- show the path along which the triangle will move --> <path d="M 50, 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 L 0, -25 z" style="fill: yellow; stroke: red; "> <animate. Motion path="M 50, 125 C 100, 25 150, 225, 200, 125" dur="6 s" fill="freeze"/> </path> </svg>
Animation Along a Linear Path with Auto-Rotation <svg width="300" height="200" view. Box="0 0 300 200"> <!-- show the path along which the triangle will move --> <path d="M 50, 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 L 0, -25 z" style="fill: yellow; stroke: red; " > <animate. Motion path="M 50, 125 C 100, 25 150, 225, 200, 125" rotate="auto" dur="6 s" fill="freeze"/> </path> </svg>
Activity SVG tools n Inkscape – – An open source SVG editor. Fully XML, SVG, and CSS 2 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: <10 mins)
Links in SVG <svg width="300" height="200" view. Box="0 0 300 200"> <a xlink: href="cat. svg"> www. w 3. org/SVG/ <text x="100" y="30" style="font-size: 12 pt; ">Cat</text> </a> <a xlink: href="http: //www. w 3. 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="M 120 90, 140 50, 160 90 Z" style="fill: blue; "/> </a> </svg>
SVG and HTML example_1119. html
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 attribute. Name="fill" from="lightgrey" to="red" begin="mouseover" end="mouseout"/> </rect> <text x="200" y="75" font-size="30">Move over me and click <set attribute. Name="font-size" from="30" to="35" begin="mouseover" end="mouseout"/> <set attribute. Name="fill" from="black" to="red" begin="mousedown" end="mouseup"/> </text> </svg>
Interaction in SVG § Capturing a keypress <svg> <rect x="20" y="20" width="100" height="100" rx="5" ry="5" style="fill: red"> <animate attribute. Name="opacity" from="1" to="0" begin="access. Key(1)" dur="3 s" fill="restore" /> </rect> <rect x="140" y="20" width="100" height="100" rx="5" ry="5" style="fill: red"> <animate. Transform attribute. Name="transform" type="rotate" from="0" to="90" begin="access. Key(2)" dur="3 s"/> </rect> <rect x="260" y="20" width="100" height="100" rx="5" ry="5" style="fill: red"> <animate. Color attribute. Name="fill" from="red" to="green" begin="access. Key(3)" dur="3 s" /> <animate attribute. Name="y" from="20" to="100" begin="access. Key( )" dur="3 s" fill="restore" /> </rect> </svg> 1 2 Enter
Scripting in SVG (1) <svg width="300" height="200" view. Box="0 0 300 200"> <script type="text/ecmascript"> <![CDATA[ function enlarge_circle(evt) { var circle = evt. get. Target(); circle. set. Attribute("r", 50); } function shrink_circle(evt) { var circle = evt. get. Target(); circle. set. Attribute("r", 25); } // ]]> </script> <circle cx="150" cy="100" r="25" fill="red" onmouseover="enlarge_circle(evt)“ <text x="150" y="175" style="text-anchor: middle; "> Mouse over the circle to change its size. </text> </svg> onmouseout="shrink_circle(evt)"/>
Scripting in SVG (2) demo file: /lab/listing. html
Activity SVG tools n Auto. Trace – Converts bitmap to vector graphics – On-line demo is available – http: //autotrace. sourceforge. net/index. html (Time: <10 mins) PNG SVG
Generating SVG § Generate SVG chart with Excel § Generate SVG with PHP scripts
END
Скачать презентацию Introduction to SVG Part 3 Prepared by K
fb6cf823ba558e4dfa87370df1eb0f19.ppt