SVG (Framsia, 27-SEP-2011)

© 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


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/

Spørsmål?


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)

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


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>

…


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>


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

]


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?

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:

SVG (Framsia, 27-SEP-2011)

Technology

Transcript of SVG (Framsia, 27-SEP-2011)