SVG (Devoxx 2011, 2011-NOV-14)

Scalable Vector Graphics (SVG)
An Introduction
Filip van Laenen
Chief Engineer
Computas

Agenda
• Part I – Introduction
– What's SVG?
– Why use SVG?
– Tools
– Sample art work
• Part II – Code-along
– Examples and exercises

2

About Me
Filip.van.Laenen@computas.com
f.a.vanlaenen@ieee.org
@filipvanlaenen

My Background
• Java, (Smalltalk)
• (Perl), Ruby
• XML
– XSLT
– XSD
– Namespaces
• HTML
– CSS

4

Introduction to SVG
History of SVG
What's SVG?
Why use SVG?
Related and Competing Standards

History of SVG
• 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 progress
6

What's SVG?
• 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

Why SVG?
• Scaling

8

Why SVG? (cont'd)
• 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

Why SVG? (cont'd)
• In-line in HTML possible
– Shared CSS
• Animation and interaction
– SMIL
– ECMAScript
– Other scripting languages

10

Why not SVG?
• Take a guess…

11

Browser Support for SVG
• Konqueror
• Google Chrome
• Opera
• Safari
• Firefox (since version 4.0)
• Internet Explorer 9

12

Related and Competing Standards
• Flash
• VML †

• XAML †

• Silverlight (†)

• JPEG
– Photos
• PNG (GIF ) †

– Pixel based drawings

13

Competing Non-Standards
• Visio diagrammes
• Powerpoint slides

14

Creating SVG Files
Manually
Programmatically

Manual Production
• 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

Programmatical Production
• API
– SVG library based
– XML
– Text
• Structure
– Template based
– From scratch

17

Learn More about SVG
• 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

Tools
• Text editor
– (XML editor)
• Browser

26

Topics
• Circle, ellipse, rect, opacity, rx, ry
• Line, polygon
• Polyline, path, marker
• Text, tspan
• Stroke
• Linear and radial gradient
• Patterns
• Groups
• Filters
• Animation 27

Code-along
Part 1 – Circle, ellipse, rect, opacity, rx, ry

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

Ellipse



<ellipse cx="100" cy="50" rx="40" ry="30"
stroke="black" stroke-width="2" fill="red"/>

</svg>

30

Rectangle

<svg width="100%" height="100%" version="1.1"

<rect width="300" height="100"
style="fill:rgb(0,0,255);stroke-width:1;
stroke:rgb(0,0,0)"/>

</svg>

31

Opacity


<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

Rounded Corners


<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

Excercise #1
• Yellow circle, green border
• Blue rectangle, 50% opaque
• Red rectangle, rounded corners, black border

34

Code-along
Part 2 – Line, polygon

Line


<line x1="0" y1="0" x2="300" y2="300"
stroke="red" stroke-width="2"/>

</svg>

36

Polygon


<polygon points="220,100 300,210 170,250"
fill="#cccccc" stroke="#000000"
stroke-width="1"/>

</svg>

37

Excercise #2
• Cumulative diagramme
• X and Y axis
• Blue, yellow and red data

38

Code-along
Part 3 – Polyline, path, marker

Polyline


<polyline
points="0,0 0,20 20,20 20,40 40,40 40,60"
fill="none" stroke="red" stroke-width="2"/>

</svg>

40

Polyline (cont'd)


<polyline
points="0,0 0,20 20,20 20,40 40,40 40,60"
fill="blue" stroke="red" stroke-width="2"/>

</svg>

41

Path


<path d="M250 150 L150 350 L350 350 Z" />

</svg>

42

Path Commands
• 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

Elliptic Arc
• 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

Eliptic Arc (cont'd)
<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

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

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

Excercise #3.1
• Same as exercise #2, but line diagramme

48

Excercise #3.2
• Same as exercise #3.1, but with markers

49

Excercise #3.3
• Pie diagramme

50

Code-along
Part 4 – Text, tspan

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

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

Text Style
• 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

Excercise #4
• Pie diagramme with labels

55

Code-along
Part 5 – Stroke

Stroke
• Stroke-width
• Stroke-linecap: butt, round, square
• Stroke-linejoin: miter, round, bevel
• Stroke-miterlimit
• Stroke-dasharray
• Stroke-dashoffset
• Stroke-opacity

58

Excercise #5
• Same as exercise #3.1
– Blue line dashed
– Red line half transparent

59

Code-along
Part 6 – Linear and radial gradients

Linear Gradient
<defs>
<linearGradient id="MyGradient">
<stop offset="0%" stop-color="orange"/>
<stop offset="100%" stop-color="yellow"/>
</linearGradient>
</defs>
fill="url(#MyGradient)" stroke="black"
stroke-width="2"/>
</svg>
62

Linear Gradient (cont'd)
<defs>
<stop offset="100%" stop-color="green"/>
</linearGradient>
</defs>
stroke-width="2"/>
</svg> 63

<defs>
</linearGradient>
</defs>
stroke-width="2"/>
</svg> 64

<defs>
<linearGradient id="MyGradient"
x1="0%" y1="0%" x2="100%" y2="100%">
</linearGradient>
</defs>

65

<defs>
x1="0%" y1="0%" x2="100%" y2="50%">
</linearGradient>
</defs>

66

<defs>
x1="0%" y1="0%" x2="100%" y2="50%">
<stop offset="100%" stop-color="green"
stop-opacity=".3"/>
</linearGradient>
</defs>

67

Excercise #6.1
• Same as exercise #2, but with gradients

68

Radial Gradient
<defs>
<radialGradient id="MyGradient"
cx="50%" cy="50%" r="50%">
</radialGradient>
</defs>
<circle cx="300" cy="200" r="180"
stroke="black"
stroke-width="2" fill="url(#MyGradient)"/>
</svg> 69

Radial Gradient (cont'd)
<defs>
<radialGradient id="MyGradient" cx="50%"
cy="50%" r="50%" fx="25%" fy="25%">
</radialGradient>
</defs>
<circle cx="300" cy="200" r="180"
stroke="black"
stroke-width="2" fill="url(#MyGradient)"/>
</svg> 70

Excercise #6.2
• Same as exercise #4, but with gradients
– Use gradientUnits="userSpaceOnUse"

71

Just Mentioning
Patterns and Groups

Groups
• Logical unit
• Common attributes
– Color
– Opacity
– Fill, stroke, gradients
• Attributes can be overriden a lower level

74

Code-Along
Part 7 – Filters

Filters
• Primitives
– Lighting
– Blur
– Color tranformations
– Displacement
– Turbulence
• Filter mathematics
– Composition
– Blending
– Addition
76

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

Filter (cont'd)
dx="10" dy="10"/>
<feGaussianBlur result="blurOut" in="offOut"
stdDeviation="5"/>
<feBlend in="SourceGraphic" in2="blurOut"
mode="normal"/>
</filter>

78

Filter Sources
• Result from another filter
• SourceGraphic
• SourceAlpha
• BackgroundImage
• BackgroundAlpha
• FillPaint
• StrokePaint

79

Filter (cont'd)
<feOffset result="offOut" in="SourceAlpha"
dx="10" dy="10"/>
<feGaussianBlur result="blurOut" in="offOut"
stdDeviation="5"/>
mode="normal"/>
</filter>

80

Filter (cont'd)
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"/>
mode="normal"/>
</filter> 81

Color Transformations
• Matrix:
– Transformation per color channel (r, g, b and α)
– 0 is black (no color)

• Alternatives:
– Saturate, HueRotate, LuminanceToAlpha
82

Code-Along
Part 8 – Animation

Animation
• Animation elements
• Scripting
– ECMAScript a.o.
• SMIL
– Synchronized Multimedia Integration Language

84

Animate
<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>
fill="blue" opacity="0.5">
<animate attributeName="opacity"
attributeType="XML" begin="0s" dur="9s"
fill="remove" from="0.2" to="1"/>
</rect>
85

AnimateTransform
fill="blue">
<animateTransform attributeName="transform"
attributeType="XML" type="scale"
from="1" to="2" dur="5s" fill="freeze"/>
</rect>
fill="red">
<animateTransform attributeName="transform"
attributeType="XML" type="rotate"
from="0" to="360" dur="5s"
repeatCount="indefinite"/>
</rect> 86

OnClick
fill="red"
onclick="evt.target.setAttribute('fill','green')"
/>

87

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

Topics Not Covered
• Transform and viewBox
• Clipping, masking and compositing
• Fonts
• Glyphs
• Linking
• Metadata
• Extensibility

90

Learn More about SVG
• 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

Questions?
Comments?
@filipvanlaenen

Thanks!
@filipvanlaenen

SVG (Devoxx 2011, 2011-NOV-14)

More Related Content

Viewers also liked

Similar to SVG (Devoxx 2011, 2011-NOV-14)

More from Filip Van Laenen

Recently uploaded

SVG (Devoxx 2011, 2011-NOV-14)