svg (devoxx 2011, 2011-nov-14)
DESCRIPTION
Tutorial about Scalable Vector Graphics, including some exercises.TRANSCRIPT
![Page 1: SVG (Devoxx 2011, 2011-NOV-14)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55561b39d8b42a3f168b5481/html5/thumbnails/1.jpg)
Scalable Vector Graphics (SVG)An IntroductionFilip van LaenenChief EngineerComputas
![Page 2: SVG (Devoxx 2011, 2011-NOV-14)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55561b39d8b42a3f168b5481/html5/thumbnails/2.jpg)
Agenda
2
• Part I – Introduction–What's SVG?
–Why use SVG?
–Tools
–Sample art work
• Part II – Code-along–Examples and exercises
2
![Page 4: SVG (Devoxx 2011, 2011-NOV-14)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55561b39d8b42a3f168b5481/html5/thumbnails/4.jpg)
My Background
4
• Java, (Smalltalk)
• (Perl), Ruby
• XML– XSLT
– XSD
– Namespaces
• HTML– CSS
4
![Page 5: SVG (Devoxx 2011, 2011-NOV-14)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55561b39d8b42a3f168b5481/html5/thumbnails/5.jpg)
Introduction to SVGHistory of SVG
What's SVG?Why use SVG?
Related and Competing Standards
![Page 6: SVG (Devoxx 2011, 2011-NOV-14)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55561b39d8b42a3f168b5481/html5/thumbnails/6.jpg)
History of SVG
6
• 1999: Version 1.0– PGML (Precision Graphics Markup Language)
– VML (Vector Markup Language)
• 2001: Version 1.0 recommendation
• 2003: Version 1.1 recommendation– SVG Mobile: SVG Basic & SVG Tiny
• 2008: SVG Tiny 1.2 recommendation
• 2011: SVG 1.1 SE recommendation
• Version 1.2 working draft
• SVG 2.0 in progress6
![Page 7: SVG (Devoxx 2011, 2011-NOV-14)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55561b39d8b42a3f168b5481/html5/thumbnails/7.jpg)
What's SVG?
7
• Scalable Vector Graphics– Vector based graphics on the net
– No quality loss after scaling
• XML based– Integrates with DOM and XSL
• Animation on every element
7
![Page 8: SVG (Devoxx 2011, 2011-NOV-14)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55561b39d8b42a3f168b5481/html5/thumbnails/8.jpg)
Why SVG?
8
• Scaling
8
![Page 9: SVG (Devoxx 2011, 2011-NOV-14)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55561b39d8b42a3f168b5481/html5/thumbnails/9.jpg)
Why SVG? (cont'd)
9
• Smaller files– Better compression than JPEG or PNG
– Even better with SVGZ
• Open standard, part of HTML 5– Pure XML
– Can be read and manipulated by many tools
– Extensible
• Text based– Text manipulation
– Indexing
9
![Page 10: SVG (Devoxx 2011, 2011-NOV-14)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55561b39d8b42a3f168b5481/html5/thumbnails/10.jpg)
Why SVG? (cont'd)
10
• In-line in HTML possible– Shared CSS
• Animation and interaction– SMIL
– ECMAScript
– Other scripting languages
10
![Page 11: SVG (Devoxx 2011, 2011-NOV-14)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55561b39d8b42a3f168b5481/html5/thumbnails/11.jpg)
Why not SVG?
11
• Take a guess…
11
![Page 12: SVG (Devoxx 2011, 2011-NOV-14)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55561b39d8b42a3f168b5481/html5/thumbnails/12.jpg)
Browser Support for SVG
12
• Konqueror
• Google Chrome
• Opera
• Safari
• Firefox (since version 4.0)
• Internet Explorer 9
12
![Page 13: SVG (Devoxx 2011, 2011-NOV-14)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55561b39d8b42a3f168b5481/html5/thumbnails/13.jpg)
Related and Competing Standards
13
• Flash
• VML†
• XAML†
• Silverlight(†)
• JPEG– Photos
• PNG (GIF†)– Pixel based drawings
13
![Page 14: SVG (Devoxx 2011, 2011-NOV-14)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55561b39d8b42a3f168b5481/html5/thumbnails/14.jpg)
Competing Non-Standards
14
• Visio diagrammes
• Powerpoint slides
14
![Page 15: SVG (Devoxx 2011, 2011-NOV-14)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55561b39d8b42a3f168b5481/html5/thumbnails/15.jpg)
Creating SVG FilesManually
Programmatically
![Page 16: SVG (Devoxx 2011, 2011-NOV-14)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55561b39d8b42a3f168b5481/html5/thumbnails/16.jpg)
Manual Production
16
• Drawing tools– Inkscape
•http://www.inkscape.org/
– Export from other drawing tools
• Any XML editor
• Any text editor
• Any browser to view/check the result
16
![Page 17: SVG (Devoxx 2011, 2011-NOV-14)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55561b39d8b42a3f168b5481/html5/thumbnails/17.jpg)
Programmatical Production
17
• API– SVG library based
– XML
– Text
• Structure– Template based
– From scratch
17
![Page 18: SVG (Devoxx 2011, 2011-NOV-14)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55561b39d8b42a3f168b5481/html5/thumbnails/18.jpg)
Sample Art Work
![Page 19: SVG (Devoxx 2011, 2011-NOV-14)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55561b39d8b42a3f168b5481/html5/thumbnails/19.jpg)
![Page 20: SVG (Devoxx 2011, 2011-NOV-14)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55561b39d8b42a3f168b5481/html5/thumbnails/20.jpg)
![Page 21: SVG (Devoxx 2011, 2011-NOV-14)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55561b39d8b42a3f168b5481/html5/thumbnails/21.jpg)
![Page 22: SVG (Devoxx 2011, 2011-NOV-14)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55561b39d8b42a3f168b5481/html5/thumbnails/22.jpg)
![Page 23: SVG (Devoxx 2011, 2011-NOV-14)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55561b39d8b42a3f168b5481/html5/thumbnails/23.jpg)
Learn More about SVG
23
• W3C Recommendation– http://www.w3.org/TR/SVG/Overview.html
• SVG Basics Tutorial– http://www.svgbasics.com/index.html
• Open Clip Art Library– http://www.openclipart.org/
• Inkscape–http://www.inkscape.org/
23
![Page 24: SVG (Devoxx 2011, 2011-NOV-14)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55561b39d8b42a3f168b5481/html5/thumbnails/24.jpg)
Questions?
![Page 25: SVG (Devoxx 2011, 2011-NOV-14)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55561b39d8b42a3f168b5481/html5/thumbnails/25.jpg)
Code-along
![Page 26: SVG (Devoxx 2011, 2011-NOV-14)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55561b39d8b42a3f168b5481/html5/thumbnails/26.jpg)
Tools
26
• Text editor– (XML editor)
• Browser
26
![Page 27: SVG (Devoxx 2011, 2011-NOV-14)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55561b39d8b42a3f168b5481/html5/thumbnails/27.jpg)
Topics
27
• Circle, ellipse, rect, opacity, rx, ry
• Line, polygon
• Polyline, path, marker
• Text, tspan
• Stroke
• Linear and radial gradient
• Patterns
• Groups
• Filters
• Animation 27
![Page 28: SVG (Devoxx 2011, 2011-NOV-14)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55561b39d8b42a3f168b5481/html5/thumbnails/28.jpg)
Code-alongPart 1 – Circle, ellipse, rect, opacity, rx, ry
![Page 29: SVG (Devoxx 2011, 2011-NOV-14)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55561b39d8b42a3f168b5481/html5/thumbnails/29.jpg)
Circle
29
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="150" height="100" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
</svg>
29
![Page 30: SVG (Devoxx 2011, 2011-NOV-14)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55561b39d8b42a3f168b5481/html5/thumbnails/30.jpg)
Ellipse
30
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="150" height="100" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<ellipse cx="100" cy="50" rx="40" ry="30"
stroke="black" stroke-width="2" fill="red"/>
</svg>
30
![Page 31: SVG (Devoxx 2011, 2011-NOV-14)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55561b39d8b42a3f168b5481/html5/thumbnails/31.jpg)
Rectangle
31
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect width="300" height="100"
style="fill:rgb(0,0,255);stroke-width:1;
stroke:rgb(0,0,0)"/>
</svg>
31
![Page 32: SVG (Devoxx 2011, 2011-NOV-14)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55561b39d8b42a3f168b5481/html5/thumbnails/32.jpg)
Opacity
32
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="20" width="250" height="250"
style="fill:blue;stroke:pink;
stroke-width:5;
fill-opacity:0.1;stroke-opacity:0.9"/>
</svg>
32
![Page 33: SVG (Devoxx 2011, 2011-NOV-14)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55561b39d8b42a3f168b5481/html5/thumbnails/33.jpg)
Rounded Corners
33
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="20" rx="20" ry="20" width="250"
height="100"
style="fill:red;stroke:black;
stroke-width:5;opacity:0.5"/>
</svg>
33
![Page 34: SVG (Devoxx 2011, 2011-NOV-14)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55561b39d8b42a3f168b5481/html5/thumbnails/34.jpg)
Excercise #1
34
• Yellow circle, green border
• Blue rectangle, 50% opaque
• Red rectangle, rounded corners, black border
34
![Page 35: SVG (Devoxx 2011, 2011-NOV-14)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55561b39d8b42a3f168b5481/html5/thumbnails/35.jpg)
Code-alongPart 2 – Line, polygon
![Page 36: SVG (Devoxx 2011, 2011-NOV-14)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55561b39d8b42a3f168b5481/html5/thumbnails/36.jpg)
Line
36
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<line x1="0" y1="0" x2="300" y2="300"
stroke="red" stroke-width="2"/>
</svg>
36
![Page 37: SVG (Devoxx 2011, 2011-NOV-14)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55561b39d8b42a3f168b5481/html5/thumbnails/37.jpg)
Polygon
37
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<polygon points="220,100 300,210 170,250"
fill="#cccccc" stroke="#000000"
stroke-width="1"/>
</svg>
37
![Page 38: SVG (Devoxx 2011, 2011-NOV-14)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55561b39d8b42a3f168b5481/html5/thumbnails/38.jpg)
Excercise #2
38
• Cumulative diagramme
• X and Y axis
• Blue, yellow and red data
38
![Page 39: SVG (Devoxx 2011, 2011-NOV-14)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55561b39d8b42a3f168b5481/html5/thumbnails/39.jpg)
Code-alongPart 3 – Polyline, path, marker
![Page 40: SVG (Devoxx 2011, 2011-NOV-14)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55561b39d8b42a3f168b5481/html5/thumbnails/40.jpg)
Polyline
40
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<polyline points="0,0 0,20 20,20 20,40 40,40 40,60" fill="none" stroke="red" stroke-width="2"/>
</svg>
40
![Page 41: SVG (Devoxx 2011, 2011-NOV-14)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55561b39d8b42a3f168b5481/html5/thumbnails/41.jpg)
Polyline (cont'd)
41
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<polyline points="0,0 0,20 20,20 20,40 40,40 40,60" fill="blue" stroke="red" stroke-width="2"/>
</svg>
41
![Page 42: SVG (Devoxx 2011, 2011-NOV-14)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55561b39d8b42a3f168b5481/html5/thumbnails/42.jpg)
Path
42
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="400" height="400" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<path d="M250 150 L150 350 L350 350 Z" />
</svg>
42
![Page 43: SVG (Devoxx 2011, 2011-NOV-14)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55561b39d8b42a3f168b5481/html5/thumbnails/43.jpg)
Path Commands
43
• M/m: Moveto
• L/l: Lineto
• H/h: Horizontal lineto
• V/v: Vertical lineto
• C/c: Curveto
• S/s: Smooth curveto
• Q/q: Quadratic Bézier curve
• T/t: Smooth quadratic Bézier curveto
• A/a: Elliptical arc
• Z/z: Closepath 43
![Page 44: SVG (Devoxx 2011, 2011-NOV-14)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55561b39d8b42a3f168b5481/html5/thumbnails/44.jpg)
Elliptic Arc
44
• Rx and ry: radius
• X-axis-rotation: Rotation of the X axis
• Large-arc-flag:– 0 if less than 180°
– 1 if more than 180°
• Sweep-flag:– 0 if negative direction
– 1 if positive direction
• X and y: end points
44
![Page 45: SVG (Devoxx 2011, 2011-NOV-14)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55561b39d8b42a3f168b5481/html5/thumbnails/45.jpg)
Eliptic Arc (cont'd)
45
<svg width="700" height="500" version="1.1" xmlns="http://www.w3.org/2000/svg"> <path d="M300 200 A200 150 30 0 0 400 300" fill="none" stroke="black" stroke-width="2"/> <path d="M300 200 A200 150 30 0 1 400 300" fill="none" stroke="red" stroke-width="2"/> <path d="M300 200 A200 150 30 1 0 400 300" fill="none" stroke="green" stroke-width="2"/> <path d="M300 200 A200 150 30 1 1 400 300" fill="none" stroke="blue" stroke-width="2"/></svg>
45
![Page 46: SVG (Devoxx 2011, 2011-NOV-14)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55561b39d8b42a3f168b5481/html5/thumbnails/46.jpg)
Marker
46
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">… <path d="M 200 250 L 700 100 L 900 350 L 1200 400" fill="none" stroke="black" stroke-width="50" marker-start="url(#StartMarker)" marker-mid="url(#MidMarker)" marker-end="url(#EndMarker)"/></svg>
46
![Page 47: SVG (Devoxx 2011, 2011-NOV-14)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55561b39d8b42a3f168b5481/html5/thumbnails/47.jpg)
Marker Definition
47
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<marker id="StartMarker" viewBox="0 0 12 12"
refX="12" refY="6"
markerWidth="3" markerHeight="3"
stroke="green" stroke-width="2"
fill="none" orient="auto">
<circle cx="6" cy="6" r="5"/>
</marker>
…
</defs>
…47
![Page 48: SVG (Devoxx 2011, 2011-NOV-14)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55561b39d8b42a3f168b5481/html5/thumbnails/48.jpg)
Excercise #3.1
48
• Same as exercise #2, but line diagramme
48
![Page 49: SVG (Devoxx 2011, 2011-NOV-14)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55561b39d8b42a3f168b5481/html5/thumbnails/49.jpg)
Excercise #3.2
49
• Same as exercise #3.1, but with markers
49
![Page 50: SVG (Devoxx 2011, 2011-NOV-14)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55561b39d8b42a3f168b5481/html5/thumbnails/50.jpg)
Excercise #3.3
50
• Pie diagramme
50
![Page 51: SVG (Devoxx 2011, 2011-NOV-14)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55561b39d8b42a3f168b5481/html5/thumbnails/51.jpg)
Code-alongPart 4 – Text, tspan
![Page 52: SVG (Devoxx 2011, 2011-NOV-14)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55561b39d8b42a3f168b5481/html5/thumbnails/52.jpg)
Text
52
<svg width="150" height="60" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<text x="10" y="25" fill="navy" font-size="15">
Lorem ipsum
</text>
<text x="10" y="25" dx="5" dy="15" fill="red"
font-size="18">
Dolor sit amet
</text>
</svg>
52
![Page 53: SVG (Devoxx 2011, 2011-NOV-14)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55561b39d8b42a3f168b5481/html5/thumbnails/53.jpg)
Tspan
53
<svg width="150" height="60" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<text x="30" y="25" fill="navy" font-size="15">
<tspan>
Lorem ipsum
</tspan>
<tspan dx="-50" dy="15" font-style="italic">
Dolor sit amet
</tspan>
</text>
</svg>
53
![Page 54: SVG (Devoxx 2011, 2011-NOV-14)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55561b39d8b42a3f168b5481/html5/thumbnails/54.jpg)
Text Style
54
• Font-family
• Font-size
• Font-style: normal, italic or oblique
• Font-variant: normal, small-caps
• Font-weight: normal, bold, bolder, lighter, …
• Text-anchor: start, middle, end
• Text-decoration: none, underline, overline, …
54
![Page 55: SVG (Devoxx 2011, 2011-NOV-14)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55561b39d8b42a3f168b5481/html5/thumbnails/55.jpg)
Excercise #4
55
• Pie diagramme with labels
55
![Page 56: SVG (Devoxx 2011, 2011-NOV-14)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55561b39d8b42a3f168b5481/html5/thumbnails/56.jpg)
![Page 57: SVG (Devoxx 2011, 2011-NOV-14)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55561b39d8b42a3f168b5481/html5/thumbnails/57.jpg)
Code-alongPart 5 – Stroke
![Page 58: SVG (Devoxx 2011, 2011-NOV-14)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55561b39d8b42a3f168b5481/html5/thumbnails/58.jpg)
Stroke
58
• Stroke-width
• Stroke-linecap: butt, round, square
• Stroke-linejoin: miter, round, bevel
• Stroke-miterlimit
• Stroke-dasharray
• Stroke-dashoffset
• Stroke-opacity
58
![Page 59: SVG (Devoxx 2011, 2011-NOV-14)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55561b39d8b42a3f168b5481/html5/thumbnails/59.jpg)
Excercise #5
59
• Same as exercise #3.1– Blue line dashed
– Red line half transparent
59
![Page 60: SVG (Devoxx 2011, 2011-NOV-14)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55561b39d8b42a3f168b5481/html5/thumbnails/60.jpg)
![Page 61: SVG (Devoxx 2011, 2011-NOV-14)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55561b39d8b42a3f168b5481/html5/thumbnails/61.jpg)
Code-alongPart 6 – Linear and radial gradients
![Page 62: SVG (Devoxx 2011, 2011-NOV-14)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55561b39d8b42a3f168b5481/html5/thumbnails/62.jpg)
Linear Gradient
62
<svg width="600" height="400" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="MyGradient">
<stop offset="0%" stop-color="orange"/>
<stop offset="100%" stop-color="yellow"/>
</linearGradient>
</defs>
<rect x="50" y="50" width="500" height="300"
fill="url(#MyGradient)" stroke="black"
stroke-width="2"/>
</svg>62
![Page 63: SVG (Devoxx 2011, 2011-NOV-14)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55561b39d8b42a3f168b5481/html5/thumbnails/63.jpg)
Linear Gradient (cont'd)
63
<svg width="600" height="400" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="MyGradient">
<stop offset="0%" stop-color="orange"/>
<stop offset="50%" stop-color="yellow"/>
<stop offset="100%" stop-color="green"/>
</linearGradient>
</defs>
<rect x="50" y="50" width="500" height="300"
fill="url(#MyGradient)" stroke="black"
stroke-width="2"/>
</svg> 63
![Page 64: SVG (Devoxx 2011, 2011-NOV-14)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55561b39d8b42a3f168b5481/html5/thumbnails/64.jpg)
Linear Gradient (cont'd)
64
<svg width="600" height="400" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="MyGradient">
<stop offset="20%" stop-color="orange"/>
<stop offset="50%" stop-color="yellow"/>
<stop offset="80%" stop-color="green"/>
</linearGradient>
</defs>
<rect x="50" y="50" width="500" height="300"
fill="url(#MyGradient)" stroke="black"
stroke-width="2"/>
</svg> 64
![Page 65: SVG (Devoxx 2011, 2011-NOV-14)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55561b39d8b42a3f168b5481/html5/thumbnails/65.jpg)
Linear Gradient (cont'd)
65
<svg width="600" height="400" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="MyGradient"
x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="orange"/>
<stop offset="50%" stop-color="yellow"/>
<stop offset="100%" stop-color="green"/>
</linearGradient>
</defs>
65
![Page 66: SVG (Devoxx 2011, 2011-NOV-14)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55561b39d8b42a3f168b5481/html5/thumbnails/66.jpg)
Linear Gradient (cont'd)
66
<svg width="600" height="400" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="MyGradient"
x1="0%" y1="0%" x2="100%" y2="50%">
<stop offset="0%" stop-color="orange"/>
<stop offset="50%" stop-color="yellow"/>
<stop offset="100%" stop-color="green"/>
</linearGradient>
</defs>
66
![Page 67: SVG (Devoxx 2011, 2011-NOV-14)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55561b39d8b42a3f168b5481/html5/thumbnails/67.jpg)
Linear Gradient (cont'd)
67
<svg width="600" height="400" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="MyGradient"
x1="0%" y1="0%" x2="100%" y2="50%">
<stop offset="0%" stop-color="orange"/>
<stop offset="50%" stop-color="yellow"/>
<stop offset="100%" stop-color="green"
stop-opacity=".3"/>
</linearGradient>
</defs>
67
![Page 68: SVG (Devoxx 2011, 2011-NOV-14)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55561b39d8b42a3f168b5481/html5/thumbnails/68.jpg)
Excercise #6.1
68
• Same as exercise #2, but with gradients
68
![Page 69: SVG (Devoxx 2011, 2011-NOV-14)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55561b39d8b42a3f168b5481/html5/thumbnails/69.jpg)
Radial Gradient
69
<svg width="600" height="400" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="MyGradient"
cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="orange"/>
<stop offset="100%" stop-color="yellow"/>
</radialGradient>
</defs>
<circle cx="300" cy="200" r="180" stroke="black"
stroke-width="2" fill="url(#MyGradient)"/>
</svg> 69
![Page 70: SVG (Devoxx 2011, 2011-NOV-14)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55561b39d8b42a3f168b5481/html5/thumbnails/70.jpg)
Radial Gradient (cont'd)
70
<svg width="600" height="400" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="MyGradient" cx="50%"
cy="50%" r="50%" fx="25%" fy="25%">
<stop offset="0%" stop-color="orange"/>
<stop offset="100%" stop-color="yellow"/>
</radialGradient>
</defs>
<circle cx="300" cy="200" r="180" stroke="black"
stroke-width="2" fill="url(#MyGradient)"/>
</svg> 70
![Page 71: SVG (Devoxx 2011, 2011-NOV-14)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55561b39d8b42a3f168b5481/html5/thumbnails/71.jpg)
Excercise #6.2
71
• Same as exercise #4, but with gradients– Use gradientUnits="userSpaceOnUse"
71
![Page 72: SVG (Devoxx 2011, 2011-NOV-14)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55561b39d8b42a3f168b5481/html5/thumbnails/72.jpg)
Just MentioningPatterns and Groups
![Page 73: SVG (Devoxx 2011, 2011-NOV-14)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55561b39d8b42a3f168b5481/html5/thumbnails/73.jpg)
Patterns
7373
![Page 74: SVG (Devoxx 2011, 2011-NOV-14)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55561b39d8b42a3f168b5481/html5/thumbnails/74.jpg)
Groups
74
• Logical unit
• Common attributes– Color
– Opacity
– Fill, stroke, gradients
• Attributes can be overriden a lower level
74
![Page 75: SVG (Devoxx 2011, 2011-NOV-14)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55561b39d8b42a3f168b5481/html5/thumbnails/75.jpg)
Code-AlongPart 7 – Filters
![Page 76: SVG (Devoxx 2011, 2011-NOV-14)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55561b39d8b42a3f168b5481/html5/thumbnails/76.jpg)
Filters
76
• Primitives– Lighting
– Blur
– Color tranformations
– Displacement
– Turbulence
• Filter mathematics– Composition
– Blending
– Addition
76
![Page 77: SVG (Devoxx 2011, 2011-NOV-14)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55561b39d8b42a3f168b5481/html5/thumbnails/77.jpg)
Filter
77
<svg width="600" height="400" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<filter id="f1" width="150%" height="150%">
<feOffset result="offOut" in="SourceGraphic"
dx="10" dy="10"/>
<feBlend in="SourceGraphic" in2="offOut"
mode="normal"/>
</filter>
<rect filter="url(#f1)" x="40" y="40"
rx="40" ry="40" width="400" height="200"
style="fill:red;stroke:black;
stroke-width:5;opacity:0.5"/>
</svg> 77
![Page 78: SVG (Devoxx 2011, 2011-NOV-14)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55561b39d8b42a3f168b5481/html5/thumbnails/78.jpg)
Filter (cont'd)
78
<filter id="f2" width="150%" height="150%">
<feOffset result="offOut" in="SourceGraphic"
dx="10" dy="10"/>
<feGaussianBlur result="blurOut" in="offOut"
stdDeviation="5"/>
<feBlend in="SourceGraphic" in2="blurOut"
mode="normal"/>
</filter>
78
![Page 79: SVG (Devoxx 2011, 2011-NOV-14)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55561b39d8b42a3f168b5481/html5/thumbnails/79.jpg)
Filter Sources
79
• Result from another filter
• SourceGraphic
• SourceAlpha
• BackgroundImage
• BackgroundAlpha
• FillPaint
• StrokePaint
79
![Page 80: SVG (Devoxx 2011, 2011-NOV-14)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55561b39d8b42a3f168b5481/html5/thumbnails/80.jpg)
Filter (cont'd)
80
<filter id="f3" width="150%" height="150%">
<feOffset result="offOut" in="SourceAlpha"
dx="10" dy="10"/>
<feGaussianBlur result="blurOut" in="offOut"
stdDeviation="5"/>
<feBlend in="SourceGraphic" in2="blurOut"
mode="normal"/>
</filter>
80
![Page 81: SVG (Devoxx 2011, 2011-NOV-14)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55561b39d8b42a3f168b5481/html5/thumbnails/81.jpg)
Filter (cont'd)
81
<filter id="f4" width="150%" height="150%">
<feOffset result="offOut" in="SourceGraphic"
dx="10" dy="10"/>
<feColorMatrix result="matrixOut" in="offOut"
type="matrix"
values="0.2 0 0 0 0
0 0.2 0 0 0
0 0 0.2 0 0
0 0 0 1 0"/>
<feGaussianBlur result="blurOut"
in="matrixOut" stdDeviation="5"/>
<feBlend in="SourceGraphic" in2="blurOut"
mode="normal"/>
</filter> 81
![Page 82: SVG (Devoxx 2011, 2011-NOV-14)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55561b39d8b42a3f168b5481/html5/thumbnails/82.jpg)
Color Transformations
82
• Matrix:– Transformation per color channel (r, g, b and α)
– 0 is black (no color)
• Alternatives:– Saturate, HueRotate, LuminanceToAlpha
82
![Page 83: SVG (Devoxx 2011, 2011-NOV-14)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55561b39d8b42a3f168b5481/html5/thumbnails/83.jpg)
Code-AlongPart 8 – Animation
![Page 84: SVG (Devoxx 2011, 2011-NOV-14)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55561b39d8b42a3f168b5481/html5/thumbnails/84.jpg)
Animation
84
• Animation elements
• Scripting– ECMAScript a.o.
• SMIL– Synchronized Multimedia Integration Language
84
![Page 85: SVG (Devoxx 2011, 2011-NOV-14)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55561b39d8b42a3f168b5481/html5/thumbnails/85.jpg)
Animate
85
<circle cx="100" cy="50" stroke="green"
stroke-width="2" fill="yellow">
<animate attributeName="r" attributeType="XML"
begin="0s" dur="9s" from="20" to="60"
fill="freeze"/>
</circle>
<rect x="20" y="30" width="200" height="100"
fill="blue" opacity="0.5">
<animate attributeName="opacity"
attributeType="XML" begin="0s" dur="9s"
fill="remove" from="0.2" to="1"/>
</rect>85
![Page 86: SVG (Devoxx 2011, 2011-NOV-14)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55561b39d8b42a3f168b5481/html5/thumbnails/86.jpg)
AnimateTransform
86
<rect x="20" y="30" width="200" height="100"
fill="blue">
<animateTransform attributeName="transform"
attributeType="XML" type="scale"
from="1" to="2" dur="5s" fill="freeze"/>
</rect>
<rect x="10" y="70" width="100" height="100"
fill="red">
<animateTransform attributeName="transform"
attributeType="XML" type="rotate"
from="0" to="360" dur="5s"
repeatCount="indefinite"/>
</rect> 86
![Page 87: SVG (Devoxx 2011, 2011-NOV-14)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55561b39d8b42a3f168b5481/html5/thumbnails/87.jpg)
OnClick
87
<rect x="10" y="70" width="100" height="100"
fill="red"
onclick="evt.target.setAttribute('fill','green')"
/>
87
![Page 88: SVG (Devoxx 2011, 2011-NOV-14)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55561b39d8b42a3f168b5481/html5/thumbnails/88.jpg)
OnLoad
88
<svg … onload="StartAnimation(evt)">
<script type="application/ecmascript"><![CDATA[
…
function StartAnimation(evt) {
blue_rect = evt.target.ownerDocument.getElementById("BlueRect");
blue_rect.setAttribute("transform",
"scale(" + scalefactor + ")");
…
}
]]></script>
<rect id="BlueRect" x="20" y="30"
width="20" height="10" fill="blue"/>
88
![Page 89: SVG (Devoxx 2011, 2011-NOV-14)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55561b39d8b42a3f168b5481/html5/thumbnails/89.jpg)
Topics Not Covered
![Page 90: SVG (Devoxx 2011, 2011-NOV-14)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55561b39d8b42a3f168b5481/html5/thumbnails/90.jpg)
Topics Not Covered
90
• Transform and viewBox
• Clipping, masking and compositing
• Fonts
• Glyphs
• Linking
• Metadata
• Extensibility
90
![Page 91: SVG (Devoxx 2011, 2011-NOV-14)](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55561b39d8b42a3f168b5481/html5/thumbnails/91.jpg)
Learn More about SVG
91
• W3C Recommendation– http://www.w3.org/TR/SVG/Overview.html
• SVG Basics Tutorial– http://www.svgbasics.com/index.html
• Open Clip Art Library– http://www.openclipart.org/
• Inkscape–http://www.inkscape.org/
91