SVG (Devoxx 2011, 2011-NOV-14)

Scalable Vector Graphics (SVG)An IntroductionFilip van LaenenChief EngineerComputas

Agenda

2

• Part I – Introduction–What's SVG?

–Why use SVG?

–Tools

–Sample art work

• Part II – Code-along–Examples and exercises

2

About [email protected]

[email protected]@filipvanlaenen

My Background

4

• Java, (Smalltalk)

• (Perl), Ruby

• XML– XSLT

– XSD

– Namespaces

• HTML– CSS

4

Introduction to SVGHistory of SVG

What's SVG?Why use SVG?

Related and Competing Standards

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

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

Why SVG?

8

• Scaling

8

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

Why SVG? (cont'd)

10

• In-line in HTML possible– Shared CSS

• Animation and interaction– SMIL

– ECMAScript

– Other scripting languages

10

Why not SVG?

11

• Take a guess…

11

Browser Support for SVG

12

• Konqueror

• Google Chrome

• Opera

• Safari

• Firefox (since version 4.0)

• Internet Explorer 9

12

Related and Competing Standards

13

• Flash

• VML†

• XAML†

• Silverlight(†)

• JPEG– Photos

• PNG (GIF†)– Pixel based drawings

13

Competing Non-Standards

14

• Visio diagrammes

• Powerpoint slides

14

Creating SVG FilesManually

Programmatically

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

Programmatical Production

17

• API– SVG library based

– XML

– Text

• Structure– Template based

– From scratch

17

Sample Art Work

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

Questions?

Code-along

Tools

26

• Text editor– (XML editor)

• Browser

26

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

Code-alongPart 1 – Circle, ellipse, rect, opacity, rx, ry

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

Ellipse

30






<ellipse cx="100" cy="50" rx="40" ry="30"

stroke="black" stroke-width="2" fill="red"/>

</svg>

30

Rectangle

31




<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

32






<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

33






<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

34

• Yellow circle, green border

• Blue rectangle, 50% opaque

• Red rectangle, rounded corners, black border

34

Code-alongPart 2 – Line, polygon

Line

36






<line x1="0" y1="0" x2="300" y2="300"

stroke="red" stroke-width="2"/>

</svg>

36

Polygon

37






<polygon points="220,100 300,210 170,250"

fill="#cccccc" stroke="#000000"

stroke-width="1"/>

</svg>

37

Excercise #2

38

• Cumulative diagramme

• X and Y axis

• Blue, yellow and red data

38

Code-alongPart 3 – Polyline, path, marker

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

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


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

</svg>

41

Path

42






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

</svg>

42

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

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

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

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

Marker Definition

47


<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

48

• Same as exercise #2, but line diagramme

48

Excercise #3.2

49

• Same as exercise #3.1, but with markers

49

Excercise #3.3

50

• Pie diagramme

50

Code-alongPart 4 – Text, tspan

Text

52



<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

53



<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

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

Excercise #4

55

• Pie diagramme with labels

55

Code-alongPart 5 – Stroke

Stroke

58

• Stroke-width

• Stroke-linecap: butt, round, square

• Stroke-linejoin: miter, round, bevel

• Stroke-miterlimit

• Stroke-dasharray

• Stroke-dashoffset

• Stroke-opacity

58

Excercise #5

59

• Same as exercise #3.1– Blue line dashed

– Red line half transparent

59

Code-alongPart 6 – Linear and radial gradients

Linear Gradient

62



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

63



<defs>




<stop offset="100%" stop-color="green"/>

</linearGradient>

</defs>



stroke-width="2"/>

</svg> 63


64



<defs>





</linearGradient>

</defs>



stroke-width="2"/>

</svg> 64


65



<defs>

<linearGradient id="MyGradient"

x1="0%" y1="0%" x2="100%" y2="100%">




</linearGradient>

</defs>

65


66



<defs>


x1="0%" y1="0%" x2="100%" y2="50%">




</linearGradient>

</defs>

66


67



<defs>


x1="0%" y1="0%" x2="100%" y2="50%">



<stop offset="100%" stop-color="green"

stop-opacity=".3"/>

</linearGradient>

</defs>

67

Excercise #6.1

68

• Same as exercise #2, but with gradients

68

Radial Gradient

69



<defs>

<radialGradient id="MyGradient"

cx="50%" cy="50%" r="50%">



</radialGradient>

</defs>


stroke-width="2" fill="url(#MyGradient)"/>

</svg> 69

Radial Gradient (cont'd)

70



<defs>

<radialGradient id="MyGradient" cx="50%"

cy="50%" r="50%" fx="25%" fy="25%">



</radialGradient>

</defs>


stroke-width="2" fill="url(#MyGradient)"/>

</svg> 70

Excercise #6.2

71

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

71

Just MentioningPatterns and Groups

Patterns

7373

Groups

74

• Logical unit

• Common attributes– Color

– Opacity

– Fill, stroke, gradients

• Attributes can be overriden a lower level

74

Code-AlongPart 7 – Filters

Filters

76

• Primitives– Lighting

– Blur

– Color tranformations

– Displacement

– Turbulence

• Filter mathematics– Composition

– Blending

– Addition

76

Filter

77



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

78



dx="10" dy="10"/>

<feGaussianBlur result="blurOut" in="offOut"

stdDeviation="5"/>

<feBlend in="SourceGraphic" in2="blurOut"

mode="normal"/>

</filter>

78

Filter Sources

79

• Result from another filter

• SourceGraphic

• SourceAlpha

• BackgroundImage

• BackgroundAlpha

• FillPaint

• StrokePaint

79

Filter (cont'd)

80


<feOffset result="offOut" in="SourceAlpha"

dx="10" dy="10"/>

<feGaussianBlur result="blurOut" in="offOut"

stdDeviation="5"/>


mode="normal"/>

</filter>

80

Filter (cont'd)

81



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

82

• Matrix:– Transformation per color channel (r, g, b and α)

– 0 is black (no color)

• Alternatives:– Saturate, HueRotate, LuminanceToAlpha

82

Code-AlongPart 8 – Animation

Animation

84

• Animation elements

• Scripting– ECMAScript a.o.

• SMIL– Synchronized Multimedia Integration Language

84

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>


fill="blue" opacity="0.5">

<animate attributeName="opacity"

attributeType="XML" begin="0s" dur="9s"

fill="remove" from="0.2" to="1"/>

</rect>85

AnimateTransform

86


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

87


fill="red"

onclick="evt.target.setAttribute('fill','green')"

/>

87

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

Topics Not Covered

Topics Not Covered

90

• Transform and viewBox

• Clipping, masking and compositing

• Fonts

• Glyphs

• Linking

• Metadata

• Extensibility

90

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

Questions?Comments?

[email protected] [email protected]

@filipvanlaenen

[email protected]

[email protected]@filipvanlaenen

Technology

SVG (Devoxx 2011, 2011-NOV-14)