Skalbar vektorgrafik: ett litet intro

Emil Björklund

SVG står för Scalable Vector Graphics, skalbar vektorgrafik, och är ett format för grafik som funnit sedan slutet på 90-talet, med en stabil standard och massvis med features. Trots detta har formatet aldrig riktigt slagit, på grund av bristande stöd i webbläsare. När nu de sista kolosserna som saknar stöd kan räknas på en tvåfingrad hand börjar det bli dags att växla över och skörda fördelarna.

Grafik och bilder på webben är lite av ett problembarn. För många och för stora bilder (för allt mer högupplösta skärmar) saktar ner laddtider, grafik för bakgrundsbilder som ska kombineras ihop ger jobbiga arbetsflöden för utvecklare och designers, brist på dynamik i bildformaten gör responsiva lösningar svåra...

SVG har inte den definitiva lösningen på alla dessa problem, men kan hjälpa till att lösa många av dem. Nedan följer några saker du behöver veta för att förstå grunderna, både designmässigt, strategiskt och tekniskt.

Filformatet

SVG är ett deklarativt filformat för grafik, och liknar t.ex. HTML. Nu hoppas jag att jag inte skrämmer bort för många läsare med lite kod-exempel, men en enkel SVG-fil kan se ut så här:

<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="100px"> <circle r="50%" cx="50%" cy="50%" fill="rgb(234, 23, 125)" /> </svg>

Här ritar vi en cirkel med en radie på 50% av ytan (r="50%"), och placerar centrum på x-axelns mitt (cx="50%") och y-axelns mitt (cy="50%"), samt ger den en fyllnadsfärg (fill="rgb(234, 23, 125)").

SVG har ett antal grundformer med motsvarande element, t.ex. path, circle, rectangle, polygon etc. Samma former som du hittar i ett program för vektorgrafik som t.ex. Illustrator, men representerade i text, helt enkelt. Man skriver sällan SVG-filer för hand, utan exporterar från Illustrator, Sketch, Inkscape eller annat program där man skapat grafiken.

Filstorleken

SVG kan potentiellt bli mycket mindre som filformat - enkel grafik och grundläggande former kan komma ner i en bråkdel av filstorleken för motsvarande element som t.ex. PNG-bild. En gigantisk cirkel ritad med SVG är samma mängd kod som en liten cirkel, men en gigantisk cirkel i en PNG-fil ger en mycket större filstorlek. SVG skalar också med upplösningen, och är lika krispig på din superhögupplösta iPad eller telefon. Skalbarhet FTW!

Även komplexare grafik, som i ursprungligt format är lika stor eller större än motsvarande bild som PNG, kan komma ner till en bråkdel av storleken, eftersom koden i en SVG-fil består av så mycket repeterande element, och därmed kan komprimeras mycket effektivt när den ska skickas över nätet. Transfer-storleken blir alltså superliten, vilket i mångt och mycket är det som räknas. Den genomsnittliga webbsidan är idag runt 1.7 MB och har mer än dubblerats sen 2010, vilket är en otrolig övervikt med tanke på hur stor del av vår webbanvändning som sker över 3G-nät eller långsam och överbefolkad Wifi. 60-70% av den vikten består av bilder, och ökningen har mycket att göra med ökad skärmupplösning.

Här kan en ansvarsfull SVG-användning verkligen ge effekt. Som jämförelse byggde vi nyligen en produkt åt en av våra kunder, som består till nära 100% av animerad grafik i “storformat”, mängder av bilder och script för att animera, och skalar från liten tablet till högupplöst storbilds-TV. Ingen av sidorna på den sajten kräver mer än 300Kb för att ladda, eftersom allt var i SVG-format.

Om du jobbar med grafik och exporterar filer för webben från ditt program för vektor-grafik bör du veta att många program bäddar in extra metadata som är meningslös när filen ska ut i produktion, vilket också kan äta upp vinsterna i filstorlek. Därför behövs filen först “tvättas”, vilket är enkelt med program som SVGO, som hjälper dig att rensa bort onödigheter.

Flera sätt att använda SVG-filer i HTML-dokument

SVG kan användas antingen som en vanlig bild — som bakgrund i CSS, i en bild-tagg i sidan (<img>) etc — som ett inbäddat objekt med <object>-taggen (ungefär som man bäddar in ett filmklipp eller en flash-fil) eller direkt inbäddad i sidan. Det gör dels att man måste hålla reda på vilken teknik man använder, men också möjligheter till varierande fallback-lösningar för de webbläsare som inte stödjer formatet.

SVG går att scripta

SVG kan scriptas och påverkas med JavaScript på samma sätt som HTML-element. Det gör att SVG lämpar sig utomordentligt väl för rörlig grafik som t.ex. informationsvisualiseringar och statistik. Är SVG-elementen inbäddade direkt i källkoden för sidan kan samma script påverka övriga gränssnittet såväl som grafiken, vilket öppnar för intressanta möjligheter. Det börjar dyka upp gott om script-bibliotek avsedda specifikt för detta, t.ex. snap.svg.

Webbläsarstödet och “fallbacks”

De enda webbläsarna med signifikant marknadsandel i dagsläget som saknar stöd för SVG är Internet Explorer version 8 och nedåt (med en marknadsandel på 5-6 % i Sverige, något högre globalt) och den inbyggda webbläsaren hos äldre Android-smartphones (version 2, låg total marknadsandel, men utgör ca 25% av alla Android-enheter). För kunna börja använda SVG och samtidigt erbjuda fallbacks till vanliga bildfiler för äldre webbläsare behöver man vara lite klurig. Det finns flera sätt att lösa detta. I vissa fall kan man använda <object>-taggen med fallback-element inuti. Det finns också “färdiga” lösningar som t.ex. utmärkta grunticon (som också finns som webbtjänsten Grumpicon). Här använder man script för att känna av SVG-stödet och leverera olika stilmallar till olika browsers specifikt för SVG-ikoner. Det kräver med andra ord lite jobb, men för det flesta situationer är det fullt görbart att hitta ett arbetsflöde som ger dig stabila fallbacks, men med alla vinster som SVG ger intakta för alla moderna webbläsare.

SVG och CSS leker bra ihop — och ger plats för responsiva bilder!

CSS kan användas som styling-språk för SVG. Det gör att du kan återanvända SVG-filer ihop med olika stilmallar för att t.ex. skapa ikoner i flera färguppsättningar från samma fil. SVG har också den intressanta egenskapen (nu blir det lite tekniskt igen) att själva bildens yta reagerar på media queries på samma sätt som en webbsida i sig. Det innebär att man i en responsiv design kan ändra utseendet på en SVG-bild baserat på hur stort den visas på sidan (inte bara på hur stor sidan i sig är), t.ex. ändra detaljnivån på en ikon från “grovkornig” till “finkornig”. Man kan också, rent tekniskt, använda det som en teknik för att växla bakgrundsbilder baserat på elementets storlek, med den så kallade “Clown Car”-tekniken.

Slutligen: SVG är ingen silverkula.

Som så många andra verktyg så finns det vissa situationer där SVG passar utmärkt, och andra där gamla hederliga bitmap-bilder fortfarande är det som passar bäst. Foton är svåra att representera på vettigt sätt som vektorer, som ett solklart exempel. Detaljerade bakgrundsbilder med t.ex. finkorniga rastereffekter är också än så länge säkrast att åstadkomma med bildfiler. Däremot finns det utrymme att ställa sig frågan om vi kan anpassa vår estetik för att passa webbens förutsättningar lite bättre, vilket SVG gör på många plan — särskilt med bakgrund av den snabbt ökande vikten på våra sidor. Designern Paul Robert Lloyd har frågat sig detta i flera artiklar och konferensprat, med början i artikeln “The Web Aesthetic” för A List Apart.

Avslutningsvis har SVG legat längst ner i verktygslådan ett bra tag nu, men vi är på god väg att ge det en permanent plats på verktygsbordet.

Lämna en kommentar

2 kommentarer

  • Blogg 100 i mål &laquo; inUseful

    […] bredden hos ux-området, och kompetensen hos alla kollegor på InUse: från hbtq-frågor till en grundlig introduktion i SVG-formatet, från musikskapande handskar till internationella gester […]

  • i found your camera

    I am truly delighted to read this website posts which consists of lots of valuable information, thanks for providing these data.