HTML5 SVG

SVG

SVG står för Scalable Vector Graphics och är ett bildformat, som gif och jpg. Skillnaden mot dessa är att svg är vektorbaserad grafik(informationen sparas som geometriska figurer, som punkter, linjer, cirklar och liknande som tillsammans beskriver en bild jämfört med rastergrafik/bitmap som gif/jpg/png där varje pixel innehåller info) vilket gör att den kan förstoras respektive förminskas utan att bildinformation förstörs. Bildinformationen sparas i XML format. SVG är rekommenderat av W3C. Lite speciellt är att du kan skapa en svg bild i vilken texteditor som helst (även om det är mycket bättre att utnyttja ett program. Även online finns hjälpprogram). Alla delar i en SVG bild finns i SVG DOM vilket gör att man lätt kan manipulera en del med hjälp av Javascript. Varje del blir som ett eget objekt och även om man bara ändrar en egenskap på delen(objektet) så ritar webbläsaren automatiskt om delen men ritar inte om övriga delar.

Vi visar nedan statiska bilder för att se hur de fungerar och ser ut. Men den stora vitsen med SVG-bilder är att de är dynamiska och kan vara interaktiva på webbsidan, dvs de kan ändra utseende beroende på vad användaren väljer.

SVG kontra PNG/JPG/GIF

SVG: PNG: png-bild

Förstora sidan och se skillnaderna mellan vektorgrafik och raster(pixel)grafik.

Fördelar med SVG formatet kontra PNG/JPG/GIF:
SVG bilder kan skapas i en vanlig texteditor
SVG bilder är skalbara, dvs går att förstora utan kvalitetsförsämring
SVG är en öppen standard och använder XML för uppbyggnad
SVG bilder kan förändras med javascript
SVG går att komprimer och kan skrivas ut i olika upplösningar med hög kvalite

SVG på webbsidan

object

Object-taggen har en nackdel genom att det inte går att komma åt delarna via javascript.

embed

Embed-taggen har fördelen att det går att komma åt med javascript. Taggen är okej i HTML5 men egentligen inte i HTML4 och XHTML där taggen är "depreciated".

img

svg-bild

iframe

Det blir fult med ramen runt.

svg-kod direkt i webbsidan

Vad kan du rita

Vanliga figurer som cirklar, ellipser, rektanglar, linjer, polygoner, streckfigurer och text.

Se w3schools sida med grundläggande figurtips. Där hittar du även många små exempel.
Där hittar vi även toningar(gradients). Se upp med filter (fungerar inte i IE) och övrigt(misc) bland alla små exempel där vissa exempel bara fungerar i några webbläsare.

Lättast att rita svg-bilder är annars med ett program. Ett gratisprogram att ladda ner är Inkscape (rekommenderas av W3C och Microsoft). Det finns även flera online-editorer som ImageBot och Google's SVG-edit.

SVG kontra Flash

SVG är en konkurrent till Flash. Den största fördelen SVG har i det här fallet är att det följer olika standarder (som XML och DOM). Flash är inte öppen källkod utan ägs av Adobe.

SVG Animering (fungerar ej i IE)

SVG filter

OBS! Filter fungerar väldigt begränsat eller inte alls i IE och Safari.

SVG kontra Canvas

Båda har sin egen funktionalitet, det är inte så att man väljer en av teknikerna utan de har sina fördelar båda två.

Använd SVG:
för webbsidor med upplösningsoberoende delar, starkt interaktivt animerade delar, olika typer av statistik redovisningar, ändra i vektorbaserade bilder.

Använd Canvas:
interaktiv bildeditering som storleksändring, pixelförändringar, beskärningar. Skapa bilder(bitmapfiler) som statistikbilder, funktionskurvor, fraktaler. Skapa bakgrunder till spel.

Ibland kan det vara bra att använda båda teknikerna för att åstadkomma det du vill..

När ska man då inte använda dessa tekniker. För att till exempel skapa runda hörn, skuggor, effekter och genomskinlighet så finns det lösningar i HTML/CSS. I vsisa fall kan det vara bättre att använda Javascriptpaket som jQuery UI. Fråga dig själv om du verkligen behöver SVG eller Canvas över huvudtaget eller om du kan skapa allt med äkta HTML/CSS.