Introduction to SVG (Part 3)

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 )

• ltsvg width"200" height"200" viewBox"0 0 200
  200"gt
• ltdefsgt
• ltg id"petal"gt
• ltpath d"M 10 0 Q 27 -15 40 0 27 15 10 0" /gt
• lt/ggt
• ltfilter id"drop-shadow"gt
• ltfeGaussianBlur in"SourceAlpha"
  stdDeviation"2"/gt
• lt/filtergt
• lt/defsgt
• ltg id"flower" filter"url(drop-shadow)"gt
• ltpath d"M 50 50 Q 40 70, 70 100 T 70 150"
• style"stroke green fill none stroke-width
  3"/gt
• ltpath d"M 70 100 Q 80 70, 120 80, 90 75, 75 105"
  
• style"stroke none fill green"/gt
• ltcircle cx"40" cy"50" r"10" style"fill
  gray"/gt
• ltg style"stroke black fill yellow"gt
• ltuse xlinkhref"petal" transform"translate(40,5
  0)"/gt
• ltuse xlinkhref"petal" transform"translate(40,5
  0) rotate(40)"/gt
• ltuse xlinkhref"petal" transform"translate(40,5
  0) rotate(80)"/gt

5
Filter ( Merging filter result )
ltsvg width"200" height"200" viewBox"0 0 200
200"gt ltdefsgtltg id"petal"gt ltpath d"M 10 0 Q 27
-15 40 0 27 15 10 0" /gtlt/ggt ltfilter
id"drop-shadow"gt ltfeGaussianBlur
in"SourceAlpha" stdDeviation"2"/gt ltfeOffset
in"blur" dx"4" dy"4" result"offsetBlur"/gt
ltfeMergegt ltfeMergeNode in"offsetBlur"/gt
ltfeMergeNode in"SourceGraphic"/gt
lt/feMergegt lt/filtergt lt/defsgt ltg id"flower"
filter"url(drop-shadow)"gt ltpath d"M 50 50 Q
40 70, 70 100 T 70 150 style"stroke green
fill none stroke-width 3"/gt ltpath d"M 70 100
Q 80 70, 120 80, 90 75, 75 105" style"stroke
none fill green"/gt ltcircle cx"40" cy"50"
r"10" style"fill gray"/gt ltg style"stroke
black fill yellow"gt ltuse xlinkhref"petal"
transform"translate(40,50)"/gt ltuse
xlinkhref"petal" transform"translate(40,50)
rotate(40)"/gt ltuse xlinkhref"petal"
transform"translate(40,50) rotate(80)"/gt ltuse
xlinkhref"petal" transform"translate(40,50)
rotate(120)"/gt ltuse xlinkhref"petal"
transform"translate(40,50) rotate(160)"/gt ltuse
xlinkhref"petal" transform"translate(40,50)
rotate(200)"/gt ltuse xlinkhref"petal"
transform"translate(40,50) rotate(240)"/gt ltuse
xlinkhref"petal" transform"translate(40,50)
rotate(280)"/gt ltuse xlinkhref"petal"
transform"translate(40,50) rotate(320)"/gt lt/ggt
lt/ggt lt/svggt
6
More Filter example (1)
ltsvg width"200" height"200" viewBox"0 0 200
200"gt ltdefsgtltg id"petal"gt ltpath d"M 10 0 Q 27
-15 40 0 27 15 10 0" /gtlt/ggt ltfilter id"sky-in"
filterUnits"objectBoundingBox"gt ltfeImage
xlinkhref"sky.jpg" result"sky"/gt ltfeComposite
in"sky" in2"SourceGraphic" operator"in"/gt lt/fil
tergt ltfilter id"sky-out" filterUnits"objectBound
ingBox"gt ltfeImage xlinkhref"sky.jpg"
result"sky"/gt ltfeComposite in"sky"
in2"SourceGraphic" operator"out"/gt lt/filtergt ltg
id"flower" gt ltpath d"M 50 50 Q 40 70, 70 100 T
70 150 style"stroke green fill none
stroke-width 3"/gt ltpath d"M 70 100 Q 80 70,
120 80, 90 75, 75 105" style"stroke none
fill green"/gt ltcircle cx"40" cy"50" r"10"
style"fill gray"/gt ltg style"stroke black
fill yellow"gt ltuse xlinkhref"petal"
transform"translate(40,50)"/gt ltuse
xlinkhref"petal" transform"translate(40,50)
rotate(40)"/gt ltuse xlinkhref"petal"
transform"translate(40,50) rotate(80)"/gt ltuse
xlinkhref"petal" transform"translate(40,50)
rotate(120)"/gt ltuse xlinkhref"petal"
transform"translate(40,50) rotate(160)"/gt ltuse
xlinkhref"petal" transform"translate(40,50)
rotate(200)"/gt ltuse xlinkhref"petal"
transform"translate(40,50) rotate(240)"/gt ltuse
xlinkhref"petal" transform"translate(40,50)
rotate(280)"/gt ltuse xlinkhref"petal"
transform"translate(40,50) rotate(320)"/gt lt/ggtlt/g
gtlt/defsgt ltuse xlinkhref"flower"
transform"translate(10,10) filter"url(sky-in)"
/gt ltuse xlinkhref"flower" transform"translate(
170,10) filter"url(sky-out)"/gt lt/svggt
7
More Filter example (2a)
8
More Filter example (2b)
ltdefsgt ltfilter id"turb1"gtltfeTurbulence
type"turbulence baseFrequency"0.1"
numOctaves"1" in"SourceGraphic"/gtlt/filtergt ltfilt
er id"turb2"gtltfeTurbulence type"turbulence
baseFrequency"0.1" numOctaves"5"
in"SourceGraphic"/gtlt/filtergt ltfilter
id"turb3"gtltfeTurbulence type"turbulence
baseFrequency"0.05" numOctaves"5"
in"SourceGraphic"/gtlt/filtergt ltfilter
id"turb4"gtltfeTurbulence type"fractalNoise
baseFrequency"0.1" numOctaves"1"
in"SourceGraphic"/gtlt/filtergt ltfilter
id"turb5"gtltfeTurbulence type"fractalNoise
baseFrequency"0.1" numOctaves"5"
in"SourceGraphic"/gtlt/filtergt ltfilter
id"turb6"gtltfeTurbulence type"fractalNoise
baseFrequency"0.05" numOctaves"5"
in"SourceGraphic"/gtlt/filtergt lt/defsgt ltg
transform"translate(10,20)"gt ltrect x"25" y"0"
width"50" height"50" style"filter
url(turb1)"/gt lt/ggt .
9
More Filter example (3)
ltsvg width"" height""gt ltfilter id"ragged"
filterUnits"objectBoundingBox" x"-15"
y"-15" width"150" height"150"gt
ltfeTurbulence baseFrequency"0.5" numOctaves"2"
result"turb"/gt ltfeDisplacementMap
in"SourceGraphic" in2"turb" scale"10"
xChannelSelector"R" yChannelSelector"G"
result"shifted"/gt ltfeFlood flood-color"rgb(71,1
33,183)" result"color"/gt ltfeComposite
in2"shifted" in"color" operator"in"/gt lt/filtergt
ltrect x"40px" y"20px" width"50px"
height"50px" filter"url(ragged)"/gt lttext
x"20px" y"150px" filter"url(ragged)"
style"fillred strokenone font-familyArial,
sans-serif font-size60"gt Text with filter
effectslt/textgt lt/svggt
10
More Filter example (4) with Lighting effects
11
ltsvg width"7.5cm" height"5cm" viewBox"0 0 200
120"gtltdefsgt ltfilter id"MyFilter"gt ltfeGaussianBl
ur in"SourceAlpha" stdDeviation"4"
result"blur"/gt ltfeOffset in"blur" dx"4" dy"4"
result"offsetBlur"/gt ltfeSpecularLighting
in"blur" surfaceScale"5" specularConstant"1"
specularExponent"10"
style"lighting-colorwhite" result"specOut"gt
ltfePointLight x"-5000" y"-10000"
z"20000"/gt lt/feSpecularLightinggt ltfeComposite
in"specOut" in2"SourceAlpha" operator"in"
result"specOut"/gt ltfeComposite
in"SourceGraphic" in2"specOut"
operator"arithmetic" k1"0" k2"1" k3"1" k4"0"
result"litPaint"/gt ltfeMergegt
ltfeMergeNode in"offsetBlur"/gt
ltfeMergeNode in"litPaint"/gt lt/feMergegt lt/filtergt
lt/defsgtltrect x"1" y"1" width"198"
height"118" style"fill888888 strokeblue"/gt
ltg style"filterurl(MyFilter)"gt ltggt ltpath
style"fillnone strokeD90000
stroke-width10 d"M50,90 C0,90 0,30 50,30
L150,30 C200,30 200,90 150,90 z" /gtltpath
style"fillD90000" d"M60,80 C30,80 30,40 60,40
L140,40 C170,40 170,80 140,80 z" /gtltg
style"fillFFFFFF strokeblack font-size45
font-familyVerdana"gtlttext x"52"
y"76"gtSVGlt/textgtlt/ggtlt/ggtlt/ggtlt/svggt
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/works
  hop.svgz
• (Time lt10mins)

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

• ltsvg width"250" height"100" viewBox"0 0 250
  100"gt
• ltrect x"10" y"10" width"200" height"20"
  style"stroke black fill none"gt
• ltanimate
• attributeName"width"
• attributeType"XML"
• from"200" to"20"
• begin"0s" dur"5s"
• fill"freeze" /gt
• lt/rectgt
• lt/svggt

17
Animation

• ltsvg width"250" height"200" viewBox"0 0 250
  200"gt
• ltrect x"10" y"10" width"20" height"20"
• style"stroke black fill cfc"gt
• ltanimate attributeName"width" attributeType"XML"
  
• begin"0s" dur"8s" from"20" to"120"
  fill"freeze"/gt
• ltanimate attributeName"height"
  attributeType"XML"
• begin"0s" dur"8s" from"20" to"120"
  fill"freeze"/gt
• lt/rectgt
• ltcircle cx"70" cy"70" r"20" style"fill ccf
  stroke black"gt
• ltanimate attributeName"r" attributeType"XML"
  
• begin"2s" dur"4s" from"20" to"50"
  fill"freeze"/gt
• lt/circlegt
• lt/svggt

18
Synchronization of Animations

• ltsvg width"250" height"200" viewBox"0 0 250
  200"gt
• ltcircle cx"60" cy"60" r"30" style"fill f9f
  stroke gray"gt
• ltanimate id"c1" attributeName"r"
  attributeType"XML"
• begin"0s" dur"4s" from"30" to"10"
  fill"freeze"/gt
• lt/circlegt
• ltcircle cx"120" cy"60" r"10" style"fill
  9f9 stroke gray"gt
• ltanimate attributeName"r" attributeType"XML"
  
• begin"c1.end" dur"4s" from"10" to"30"
  fill"freeze"/gt
• lt/circlegt
• lt/svggt

19
Repeated Animations

• ltsvg width"300" height"200" viewBox"0 0 300
  200"gt
• ltcircle cx"60" cy"60" r"30" style"fill none
  stroke red"gt
• ltanimate attributeName"cx" attributeType"XML"
• begin"0s" dur"5s" repeatCount"2"
• from"60" to"260" fill"freeze"/gt
• lt/circlegt
• ltcircle cx"260" cy"130" r"30" style"fill
  ccf stroke black"gt
• ltanimate attributeName"cx" attributeType"XML"
• begin"0s" dur"5s" repeatDur"8s"
• from"260" to"60" fill"freeze"/gt
• lt/circlegt
• lt/svggt

20
The set element

• ltsvg width"300" height"200" viewBox"0 0 300
  200"gt
• ltcircle cx"60" cy"60" r"30" style"fill ff9
  stroke gray"gt
• ltanimate id"c1" attributeName"r"
  attributeType"XML"
• begin"0s" dur"4s" from"30" to"0"
  fill"freeze"/gt
• lt/circlegt
• lttext text-anchor"middle" x"60" y"60"
  style"visibility hidden"gt
• ltset attributeName"visibility"
  attributeType"CSS"
• to"visible" begin"4.5s" dur"1s"
  fill"freeze"/gt
• All gone!
• lt/textgt
• lt/svggt

21
The animateColor element

• ltsvg width"300" height"200" viewBox"0 0 300
  200"gt
• ltcircle cx"60" cy"60" r"30"
• style"fill ff9 stroke gray
  stroke-width10"gt
• ltanimateColor attributeName"fill"
• begin"2s" dur"4s" from"ff9" to"red"
  fill"freeze"/gt
• ltanimateColor attributeName"stroke"
• begin"2s" dur"4s" from"gray" to"blue"
  fill"freeze"/gt
• lt/circlegt
• lt/svggt

22
The animateTransform

• ltsvg width"300" height"200" viewBox"0 0 300
  200"gt
• ltg transform"translate(120,60)"gt
• ltrect x"-10" y"-10" width"20" height"20"
• style"fill ff9 stroke black"gt
• ltanimateTransform attributeType"XML"
• attributeName"transform" type"scale"
• from"1" to"4 2"
• begin"0s" dur"4s" fill"freeze"/gt
• lt/rectgt
• lt/ggt
• lt/svggt

23
Multiple animateTransform

• ltsvg width"300" height"200" viewBox"0 0 300
  200"gt
• ltg transform"translate(120,60)"gt
• ltrect x"-10" y"-10" width"20" height"20"
• style"fill ff9 stroke black"gt
• ltanimateTransform attributeName"transform"
  attributeType"XML"
• type"scale" from"1" to"4 2"
• additive"sum" begin"0s" dur"4s"
  fill"freeze"/gt
• ltanimateTransform attributeName"transform"
  attributeType"XML"
• type"rotate" from"0" to"45"
• additive"sum" begin"0s" dur"4s"
  fill"freeze"/gt
• lt/rectgt
• lt/ggt
• lt/svggt

24
Animation Along a Linear Path

• ltsvg width"300" height"200" viewBox"0 0 300
  200"gt
• ltggt
• ltrect x"0" y"0" width"30" height"30"
• style"fill ccc"/gt
• ltcircle cx"30" cy"30" r"15"
• style"fill cfc stroke green"gt
• lt/circlegt
• ltanimateMotion from"0,0" to"60,30" dur"4s"
  fill"freeze"/gt
• lt/ggt
• lt/svggt

25
Animation Along CompaxPath

• ltsvg width"300" height"200" viewBox"0 0 300
  200"gt
• lt!-- show the path along which the triangle will
  move --gt
• ltpath d"M50,125 C 100,25 150,225, 200, 125"
• style"fill none stroke blue"/gt
• lt!-- 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. --gt
• ltpath d"M-10,-3 L10,-3 L0,-25z" style"fill
  yellow stroke red"gt
• ltanimateMotion path"M50,125 C 100,25 150,225,
  200, 125"
• dur"6s" fill"freeze"/gt
• lt/pathgt
• lt/svggt

26
Animation Along a Linear Path with Auto-Rotation

• ltsvg width"300" height"200" viewBox"0 0 300
  200"gt
• lt!-- show the path along which the triangle will
  move --gt
• ltpath d"M50,125 C 100,25 150,225, 200, 125"
• style"fill none stroke blue"/gt
• lt!-- 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. --gt
• ltpath d"M-10,-3 L10,-3 L0,-25z" style"fill
  yellow stroke red" gt
• ltanimateMotion path"M50,125 C 100,25 150,225,
  200, 125"
• rotate"auto" dur"6s" fill"freeze"/gt
• lt/pathgt
• lt/svggt

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

28
Links in SVG

• ltsvg width"300" height"200" viewBox"0 0 300
  200"gt
• lta xlinkhref"cat.svg"gt
• lttext x"100" y"30" style"font-size
  12pt"gtCatlt/textgt
• lt/agt
• lta xlinkhref"http//www.w3.org/SVG/"gt
• ltcircle cx"50" cy"70" r"20" style"fill
  red"/gt
• ltrect x"75" y"50" width"40" height"40"
  style"fill green"/gt
• ltpath d"M120 90, 140 50, 160 90 Z"
  style"fill blue"/gt
• lt/agt
• lt/svggt

29
SVG and HTML

• example_1119.html

30
Interaction in SVG

• Interaction using the mouse
• ltsvggt
• ltrect x"10" y"10" width"140" height"140"
  rx"5" ry"5" style"filllightgrey"gt
• ltset attributeName"fill" from"lightgrey"
  to"red" begin"mouseover" end"mouseout"/gt
• lt/rectgt
• lttext x"200" y"75" font-size"30"gtMove over me
  and click ltset attributeName"font-size"
  from"30" to"35" begin"mouseover"
  end"mouseout"/gt ltset attributeName"fill"
  from"black" to"red" begin"mousedown"
  end"mouseup"/gt
• lt/textgt
• lt/svggt

31
Interaction in SVG

• Capturing a keypress
• ltsvggt
• ltrect x"20" y"20" width"100" height"100"
  rx"5" ry"5" style"fillred"gt
• ltanimate attributeName"opacity" from"1" to"0"
  begin"accessKey(1)" dur"3s" fill"restore" /gt
• lt/rectgt
• ltrect x"140" y"20" width"100" height"100"
  rx"5" ry"5" style"fillred"gt
• ltanimateTransform attributeName"transform"
  type"rotate" from"0" to"90" begin"accessKey(2)
  " dur"3s"/gt lt/rectgt ltrect x"260" y"20"
  width"100" height"100" rx"5" ry"5"
  style"fillred"gt ltanimateColor
  attributeName"fill" from"red" to"green"
  begin"accessKey(3)" dur"3s" /gt ltanimate
  attributeName"y" from"20" to"100"
  begin"accessKey(13)" dur"3s" fill"restore"
  /gt
• lt/rectgt
• lt/svggt

1
Enter
2
32
Scripting in SVG (1)

• ltsvg width"300" height"200" viewBox"0 0 300
  200"gt
• ltscript type"text/ecmascript"gt lt!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)
• // gt lt/scriptgt
• ltcircle cx"150" cy"100" r"25" fill"red"
• onmouseover"enlarge_circle(evt)
  onmouseout"shrink_circle(evt)"/gt
• lttext x"150" y"175" style"text-anchor
  middle"gt
• Mouse over the circle to change its size.
• lt/textgt
• lt/svggt

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

SVG
PNG
35
Generating SVG

• Generate SVG chart with Excel
• Generate SVG with PHP scripts

36
END