SVG (Framsia, 27-SEP-2011)

Scalable Vector Graphics
(SVG)
Filip van Laenen
Framsia
2011-09-27

© Computas AS 27.09.11

Agenda

• Del I
• Hva er SVG?
• Hvorfor SVG?
• Verktøy
• Eksempler

• Del II
• Gjennomgang av SVG

2 © Computas AS 27.09.11

Min bakgrunn

• Java, (Smalltalk), (Perl), Ruby
• XML
• XSLT, XSD, navnerom
• HTML
• CSS


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

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


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


Hvorfor SVG? (forts.)

• In-line i HTML-dokumenter mulig
• Deling av CSS
• Animasjon og interaksjon
• SMIL
• ECMAScript
• Andre scriptspråk


Hvorfor ikke SVG?

• Gjett…


Nettleserstøtte for SVG

• Konqueror
• Google Chrome
• Opera
• Safari
• Firefox (siden 4.0)
• Internet Explorer 9


SVGs konkurrenter

• Flash
• VML†
• XAML†
• Silverlight(†)
• JPEG: Fotobilder
• PNG (GIF): Pikselbaserte tegninger

• Visio-diagrammer
• Powerpoint


SVG versus bitmaps


Verktøy

• Lage SVG
• Min favoritt: Inkscape
• http://inkscape.org/
• Enhver tekst- eller XML-editor
• Eksport fra andre program
• Se SVG
• Enhver nettleser


Eksempel 1


Eksempel 2


Eksempel 3


Open Clip Art Library


Eksempel 4


Eksempel 5


Eksempel 6


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/


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


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>


SVG-kodesnutt 1.2: Ellipse




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

</svg>


SVG-kodesnutt 1.3: Rect


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


SVG-kodesnutt 1.4: 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>

SVG-kodesnutt 1.5: Rx og ry



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

Oppgave 1

• Gul sirkel, grønn kant
• Blå firkant, 50% gjennomsiktig
• Rød firkant, runde hjørner, svart kant


SVG-kodesnutt 2.1: Line



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

</svg>


SVG-kodesnutt 2.2: Polygon



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

</svg>


Oppgave 2

• Kumulativt diagram
• X- og Y-akse
• Blå, gul og rød data


SVG-kodesnutt 3.1: Polyline (1)



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

</svg>


SVG-kodesnutt 3.2: Polyline (2)



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

</svg>


SVG-kodesnutt 3.3: Path (1)



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

</svg>


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


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


SVG-kodesnutt 3.4: Path (2)

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


SVG-kodesnutt 3.5: Marker (1)

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


SVG-kodesnutt 3.5: Marker (2)

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


Oppgave 3.1

• Samme som oppgave 2, men linjediagram


Oppgave 3.2

• Samme som oppgave 3.1, men med markører


Oppgave 3.3


SVG-kodesnutt 4.1: 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>


SVG-kodesnutt 4.2: 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>


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


Oppgave 4


Eksempel 4


Stroke

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


Oppgave 5

• Samme som oppgave 3.1
• Blå stiplet linje
• Rød linje gjennomsiktig


Eksempel 6


SVG-kodesnutt 6.1: Linear Gradient (1)

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



<defs>
<stop offset="100%" stop-color="green"/>
</linearGradient>
</defs>
stroke-width="2"/>
</svg>


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

Oppgave 6.1


SVG-kodesnutt 6.7: Radial Gradient (1)

<defs>
<radialGradient id="MyGradient"
cx="50%" cy="50%" r="50%">
</radialGradient>
</defs>
stroke-width="2" fill="url(#MyGradient)"/>
</svg>


SVG-kodesnutt 6.8: Radial Gradient (2)

<defs>
<radialGradient id="MyGradient" cx="50%"
cy="50%" r="50%" fx="25%" fy="25%">
</radialGradient>
</defs>
stroke-width="2" fill="url(#MyGradient)"/>
</svg>


Oppgave 6.2

• Samme som oppgave 4
• Bruk gradientUnits="userSpaceOnUse"


Mønstre


Grupper

• Gruppering av objekter til ett objekt
• Attributter gjelder for hele gruppen
• Farger
• Opasitet
• Gradiënter


Filtre

• Primitiver:
• Belysning og glans
• Skygge
• Fargetransformasjoner
• Flytting
• Turbulens
• Filtermatematikk
• Pluss
• Blending


SVG-kodesnutt 7.1: Filter (1)

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


dx="10" dy="10"/>
<feGaussianBlur result="blurOut" in="offOut"
stdDeviation="5"/>
<feBlend in="SourceGraphic" in2="blurOut"
mode="normal"/>
</filter>


Filtre: Kilder

• Resultatet fra andre filtre
• SourceGraphic
• SourceAlpha
• BackgroundImage
• BackgroundAlpha
• FillPaint
• StrokePaint



<feOffset result="offOut" in="SourceAlpha"
dx="10" dy="10"/>
<feGaussianBlur result="blurOut" in="offOut"
stdDeviation="5"/>
mode="normal"/>
</filter>



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> 69 © Computas AS 27.09.11

Transformasjon av farger

• Matrix:
• Transformasjon per kanal
• Svart er 0

[][ ][]
̃
R a 00 a01 a 02 a03 a04 R
̃
G a10 a11 a12 a13 a14 G
̃
B = a20 a21 a22 a23 a24 × B
̃
A a30 a31 a32 a33 a34 A
1 0 0 0 0 1 1

• Alternativer:
• Saturate, HueRotate, LuminanceToAlpha


Animasjon

• Animasjon-elementer
• Scripting
• ECMAScript m.m.
• SMIL
• Synchronized Multimedia Integration
Language


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


SVG-kodesnutt 8.2: 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>

SVG-kodesnutt 8.3: OnClick

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


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


Og enda mer…

• Transform og viewBox
• Clipping, masking og compositing
• Fonts
• Glyphs
• Linking
• Metadata
• Utvidbarhet


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?

Contact:

Computas AS Tel 67 83 10 00
Lysaker Torg 45, pb 482 Fax 67 83 10 01
1327 Lysaker Org.nr: NO 986 352 325 MVA
www.computas.com


SVG (Framsia, 27-SEP-2011)

More Related Content

SVG (Framsia, 27-SEP-2011)