Introduction to SVG (Part 3)

Introduction to SVG (Part 3)

Prepared by K.M.SODepartment 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 imagefeGaussianBlur on

alpha channelimage with drop

shadow

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)"/>








</g>

</g>

</svg>

Filter ( Merging filter result )


<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;"/>




<use xlink:href="#petal" transform="translate(40,50) rotate(40)"/> <use xlink:href="#petal" transform="translate(40,50) rotate(80)"/>




</g> </g>

</svg>

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;"/>








</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>

More Filter example (2a)

More Filter example (2b)

<defs>

<filter id="turb1"><feTurbulence type="turbulence“

baseFrequency="0.1" numOctaves="1" in="SourceGraphic"/></filter>





<filter id="turb4"><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>

….

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>

More Filter example (4) with Lighting effects

More Filter example (4) with Lighting effects

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

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’, ‘animateMotion’,

‘animateColor’, ‘animateTransform’. Animation introduces the time

dimension to the document. Time units: h (hour), min (minutes), s

(seconds), ms (milliseconds)

Animation


<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>

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"


</rect>

<circle cx="70" cy="70" r="20" style="fill: #ccf; stroke: black;">

<animate attributeName="r" attributeType="XML"


</circle></svg>

Synchronization of Animations


<circle cx="60" cy="60" r="30" style="fill: #f9f; stroke: gray;">

<animate id="c1" attributeName="r" attributeType="XML"


</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>

start end

Repeated Animations


<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>

The set element


<circle cx="60" cy="60" r="30" style="fill: #ff9; stroke: gray;">

<animate id="c1" attributeName="r" attributeType="XML"


</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>

start end

start end

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"/>

</circle>

</svg>

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"/></rect>

</g>

</svg>

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"/>

</rect>

</g>

</svg>

Animation Along a Linear Path


<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>

Animation Along CompaxPath




<path d="M50,125 C 100,25 150,225, 200, 125"

style="fill: none; stroke: blue;"/>



<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>

Animation Along a Linear Path with Auto-Rotation




<path d="M50,125 C 100,25 150,225, 200, 125"

style="fill: none; stroke: blue;"/>



<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>

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

Links in SVG


<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>

www.w3.org/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 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>

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( )" dur="3s" fill="restore" />

</rect>

</svg>

1 Enter2

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>

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

AutoTrace– Converts bitmap to vector graphics– On-line demo is available

– http://autotrace.sourceforge.net/index.html

(Time: <10mins)

Activity

SVG tools

PNG SVG

Generating SVG Generate SVG chart with Excel

Generate SVG with PHP scripts

Introduction to SVG (Part 3)

Documents

Transcript of Introduction to SVG (Part 3)