svg (framsia, 27-sep-2011)
DESCRIPTION
Presentasjonen om SVG for Framsia, 27. september 2011TRANSCRIPT
© Computas AS 27.09.11
Scalable Vector Graphics(SVG)
Filip van LaenenFramsia
2011-09-27
2 © Computas AS 27.09.11
Agenda
• Del I• Hva er SVG?• Hvorfor SVG?• Verktøy• Eksempler
• Del II• Gjennomgang av SVG
3 © Computas AS 27.09.11
Min bakgrunn
• Java, (Smalltalk), (Perl), Ruby• XML
• XSLT, XSD, navnerom• HTML
• CSS
4 © Computas AS 27.09.11
Historikk og varianter
• 1999: Versjon 1.0• PGML (Precision Graphics Markup Language)• VML (Vector Markup Language)
• 2001: Versjon 1.0 recommendation• 2003: Versjon 1.1 recommendation
• SVG Mobile: SVG Basic & SVG Tiny• 2008: SVG Tiny 1.2 recommendation• 2011: Versjon 1.1 SE recommendation• Versjon 1.2 working draft• SVG 2.0
5 © Computas AS 27.09.11
Hva er SVG?
• Scalable Vector Graphics• Vektorbasert grafikk på nett• Ingen kvalitetstap ved skalering
• XML-basert• Integrerer med DOM og XSL
• Hvert element kan animeres
6 © Computas AS 27.09.11
Hvorfor SVG?
• Skalerer• Mindre filer
• Bedre komprimering enn JPEG eller PNG• Enda bedre komprimering med SVGZ
• Åpen standard, del av HTML5• Ren XML• Kan leses og endres av mange verktøy
• Tekst kan selekteres og indekseres
7 © Computas AS 27.09.11
Hvorfor SVG? (forts.)
• In-line i HTML-dokumenter mulig• Deling av CSS
• Animasjon og interaksjon• SMIL• ECMAScript• Andre scriptspråk
8 © Computas AS 27.09.11
Hvorfor ikke SVG?
• Gjett…
9 © Computas AS 27.09.11
Nettleserstøtte for SVG
• Konqueror• Google Chrome• Opera• Safari• Firefox (siden 4.0)• Internet Explorer 9
10 © Computas AS 27.09.11
SVGs konkurrenter
• Flash• VML†
• XAML†
• Silverlight(†)
• JPEG: Fotobilder• PNG (GIF): Pikselbaserte tegninger
• Visio-diagrammer• Powerpoint
11 © Computas AS 27.09.11
SVG versus bitmaps
12 © Computas AS 27.09.11
Verktøy
• Lage SVG• Min favoritt: Inkscape
• http://inkscape.org/• Enhver tekst- eller XML-editor• Eksport fra andre program
• Se SVG• Enhver nettleser
13 © Computas AS 27.09.11
Eksempel 1
14 © Computas AS 27.09.11
Eksempel 2
15 © Computas AS 27.09.11
Eksempel 3
16 © Computas AS 27.09.11
Open Clip Art Library
17 © Computas AS 27.09.11
Eksempel 4
18 © Computas AS 27.09.11
Eksempel 5
19 © Computas AS 27.09.11
Eksempel 6
20 © Computas AS 27.09.11
Lære mer om 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/
Spørsmål?
Pause
23 © Computas AS 27.09.11
Gjennomgang av SVG
• Circle, rect, opacity, rx, ry• Line, polygon• Polyline, path, marker• Text, tspan• Stroke• Linear og radial gradient• Mønstre• Grupper• Filtre• Animasjon
24 © Computas AS 27.09.11
SVG-kodesnutt 1.1: 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>
25 © Computas AS 27.09.11
SVG-kodesnutt 1.2: Ellipse
<?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>
26 © Computas AS 27.09.11
SVG-kodesnutt 1.3: Rect
<?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>
27 © Computas AS 27.09.11
SVG-kodesnutt 1.4: Opacity
<?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>
28 © Computas AS 27.09.11
SVG-kodesnutt 1.5: Rx og ry
<?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>
29 © Computas AS 27.09.11
Oppgave 1
• Gul sirkel, grønn kant• Blå firkant, 50% gjennomsiktig• Rød firkant, runde hjørner, svart kant
30 © Computas AS 27.09.11
SVG-kodesnutt 2.1: Line
<?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>
31 © Computas AS 27.09.11
SVG-kodesnutt 2.2: Polygon
<?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>
32 © Computas AS 27.09.11
Oppgave 2
• Kumulativt diagram• X- og Y-akse• Blå, gul og rød data
33 © Computas AS 27.09.11
SVG-kodesnutt 3.1: Polyline (1)
<?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>
34 © Computas AS 27.09.11
SVG-kodesnutt 3.2: Polyline (2)
<?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>
35 © Computas AS 27.09.11
SVG-kodesnutt 3.3: Path (1)
<?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>
36 © Computas AS 27.09.11
SVG Path-kommandoer
• 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
37 © Computas AS 27.09.11
Elliptical Arc
• Rx og ry: Radii• X-axis-rotation: Rotasjonen for X-aksen• Large-arc-flag:
• 0 hvis mindre enn 180°• 1 hvis mer enn 180°
• Sweep-flag:• 0 hvis negativ retning• 1 hvis positiv retning
• X og y: Sluttpunktet
38 © Computas AS 27.09.11
SVG-kodesnutt 3.4: Path (2)
<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>
39 © Computas AS 27.09.11
SVG-kodesnutt 3.5: Marker (1)
<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>
40 © Computas AS 27.09.11
SVG-kodesnutt 3.5: Marker (2)
<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>
…
41 © Computas AS 27.09.11
Oppgave 3.1
• Samme som oppgave 2, men linjediagram
42 © Computas AS 27.09.11
Oppgave 3.2
• Samme som oppgave 3.1, men med markører
43 © Computas AS 27.09.11
Oppgave 3.3
44 © Computas AS 27.09.11
SVG-kodesnutt 4.1: Text
<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>
45 © Computas AS 27.09.11
SVG-kodesnutt 4.2: Tspan
<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>
46 © Computas AS 27.09.11
Formattering av tekst
• Font-family• Font-size• Font-style: normal, italic eller oblique• Font-variant: normal, small-caps• Font-weight: normal, bold, bolder, lighter, …• Text-anchor: start, middle, end• Text-decoration: none, underline, overline, …
47 © Computas AS 27.09.11
Oppgave 4
48 © Computas AS 27.09.11
Eksempel 4
49 © Computas AS 27.09.11
Stroke
• Stroke-width• Stroke-linecap: butt, round, square• Stroke-linejoin: miter, round, bevel
• Stroke-miterlimit• Stroke-dasharray• Stroke-dashoffset• Stroke-opacity
50 © Computas AS 27.09.11
Oppgave 5
• Samme som oppgave 3.1• Blå stiplet linje• Rød linje gjennomsiktig
51 © Computas AS 27.09.11
Eksempel 6
52 © Computas AS 27.09.11
SVG-kodesnutt 6.1: Linear Gradient (1)
<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>
53 © Computas AS 27.09.11
SVG-kodesnutt 6.2: Linear Gradient (2)
<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>
54 © Computas AS 27.09.11
SVG-kodesnutt 6.3: Linear Gradient (3)
<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>
55 © Computas AS 27.09.11
SVG-kodesnutt 6.4: Linear Gradient (4)
<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>
56 © Computas AS 27.09.11
SVG-kodesnutt 6.5: Linear Gradient (5)
<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>
57 © Computas AS 27.09.11
SVG-kodesnutt 6.6: Linear Gradient (6)
<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>
58 © Computas AS 27.09.11
Oppgave 6.1
59 © Computas AS 27.09.11
SVG-kodesnutt 6.7: Radial Gradient (1)
<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>
60 © Computas AS 27.09.11
SVG-kodesnutt 6.8: Radial Gradient (2)
<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>
61 © Computas AS 27.09.11
Oppgave 6.2
• Samme som oppgave 4• Bruk gradientUnits="userSpaceOnUse"
62 © Computas AS 27.09.11
Mønstre
63 © Computas AS 27.09.11
Grupper
• Gruppering av objekter til ett objekt• Attributter gjelder for hele gruppen
• Farger• Opasitet• Gradiënter
64 © Computas AS 27.09.11
Filtre
• Primitiver:• Belysning og glans• Skygge• Fargetransformasjoner• Flytting• Turbulens
• Filtermatematikk• Pluss• Blending
65 © Computas AS 27.09.11
SVG-kodesnutt 7.1: Filter (1)
<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>
66 © Computas AS 27.09.11
SVG-kodesnutt 7.2: Filter (2)
<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>
67 © Computas AS 27.09.11
Filtre: Kilder
• Resultatet fra andre filtre• SourceGraphic• SourceAlpha• BackgroundImage• BackgroundAlpha• FillPaint• StrokePaint
68 © Computas AS 27.09.11
SVG-kodesnutt 7.3: Filter (3)
<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>
69 © Computas AS 27.09.11
SVG-kodesnutt 7.4: Filter (4)
<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>
70 © Computas AS 27.09.11
Transformasjon av farger
• Matrix:• Transformasjon per kanal• Svart er 0
• Alternativer:• Saturate, HueRotate, LuminanceToAlpha
[RGBA1]=[
a00 a01 a02 a03 a04
a10 a11 a12 a13 a14
a20 a21 a22 a23 a24
a30 a31 a32 a33 a34
0 0 0 0 1]×[
RGBA1
]
71 © Computas AS 27.09.11
Animasjon
• Animasjon-elementer• Scripting
• ECMAScript m.m.• SMIL
• Synchronized Multimedia Integration Language
72 © Computas AS 27.09.11
SVG-kodesnutt 8.1: 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>
<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>
73 © Computas AS 27.09.11
SVG-kodesnutt 8.2: AnimateTransform
<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>
74 © Computas AS 27.09.11
SVG-kodesnutt 8.3: OnClick
<rect x="10" y="70" width="100" height="100"
fill="red"
onclick="evt.target.setAttribute('fill','green')"
/>
75 © Computas AS 27.09.11
SVG-kodesnutt 8.4: 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"/>
76 © Computas AS 27.09.11
Og enda mer…
• Transform og viewBox• Clipping, masking og compositing• Fonts• Glyphs• Linking• Metadata• Utvidbarhet
77 © Computas AS 27.09.11
Lære mer om 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/
78 © Computas AS 27.09.11
Spørsmål?
Computas ASLysaker Torg 45, pb 4821327 Lysaker
Tel 67 83 10 00Fax 67 83 10 01Org.nr: NO 986 352 325 MVAwww.computas.com
Contact: