svg-on-the-web

Bild 1: By W3C, CC BY 2.5, Bild 2: By Bogie Garry, CC BY 2.0

SVG på webben

En OER om hur och varför SVG används på webben

 

Introduktion

Jag minns när surf på mobiltelefonen var nytt i mitt liv och knappt en enda webbsida fyllde sitt syfte på liten skärm – det är tur att det går framåt! Responsiv webbdesign är ett måste numera med tanke på att datorn inte längre är det självklara valet när det kommer till att surfa på nätet. Responsiv webbdesign innebär att man jobbar med flexibla layouter och innehåll som anpassas efter olika skärmstorlekar (Bushell, 2012). Man klarar sig långt på att skriva skriva media queries och/eller javascript. En stor del av innehållet på moderna webbplatser utgörs av bilder och däribland logotyper, ikoner och illustrationer som jag kommer fokusera på. För att gå steget längre behöver man också se till att dessa är anpassade till den responsiva designen. Vi vill att bilder ska se bra ut och vara skarpa oavsett vem som använder webbsidan men vi vill hålla filstorleken nere p g a prestanda. (Giltsoff, n.d.). Det är här SVG kommer in i bilden. SVG ger interaktiv webbgrafik av hög kvalitet (Adobe, n.d.).

SVG är mer än ett bildfilformat. Det finns en stor skillnad jämfört mot JPEG och PNG, en skillnad som är avgörande när det kommer till responsiv webbdesign. SVG är en del i “framtidsvänlig webbutveckling” som Bushell (2012) uttrycker det. Jag kommer gå igenom hur och varför man använder SVG på webben, men först: vad är SVG och vad skiljer det från JPEG och PNG?

 

Scalable Vector Graphics

SVG står för “Scalable Vector Graphics” och är ett filformat som används för att visa vektorgrafik på webben. SVG är baserat på märkspråket XML, med andra ord är SVG ett dokument bestående av kod som definierar egenskaperna (Wikipedia, 2015). Webbläsaren tolkar denna kod och därför ser vi en bild.

Eftersom SVG bygger på XML behöver man inte ett ritprogram, man kan koda upp en SVG direkt i sin texteditor. Men det är oftast mer praktiskt att använda ett ritprogram, t ex Adobe Illustator. När man exporterat ut en SVG har man precis samma möjligheter att redigera den i texteditorn vilket ger en oändliga möjligheter.

Varför vektorgrafik på webben?

Rastergrafik såsom JPEG och PNG består av pixlar, fyrkantiga bildrutor i olika färger. Drar man upp rastergrafik i storlek blir bilden blir “pixlig” eller suddig. Vektorgrafik däremot är oberoende av upplösning vilket gör det idealt för responsiv webbdesign (Creative Bloq, 2015). Vektorgrafik kan skalas upp hur mycket som helst utan att tappa i kvalitet eftersom det bygger på geometriska primitiver i form av matematiska uttryck (Wikipedia, 2015). Man kan förstora en SVG direkt i koden. Skalbarheten gör också att man kan zooma in på webbsidan utan att grafiken förändras i kvalitet. Det är inte ovanligt med “animationer” såsom hover-effekter på moderna webbplatser. En vanlig sådan effekt är en som zoomar in bilden när man för muspekaren över. Här är SVG att föredra av just den anledningen jag precis gått igenom.

När man skapar sin SVG i sitt ritprogram behöver man inte fungera särskilt mycket på vilken storlek man ska utgå från – större SVG-bilder tar inte upp nämnvärt mer plats än mindre (Webbgaraget, 2012). Bara om man gör en mycket detaljerad illustration kan man behöva tänka på filstorleken. De geometriska primitiver som vektorgrafik bygger på är punkter mellan linjer och kurvor. Ju färre punkter desto mindre filstorlek.

bitmap_vs_svg-svg

 

Finns det nackdelar med SVG?

SVG är “framtidsvänligt” och allt, men man måste kunna välja när det är värt besväret (Webbgaraget, 2012). Om man lägger störst vikt på webbläsarkompabilitet kanske det inte är värt besväret. Behöver man av någon outgrundlig anledning supporta Internet Explorer 8 och främst IE8 så kanske man ska hålla sig helt till PNG.

Statistik (Can I use…, n.d.) visar nämligen att alla webbläsare stödjer SVG förutom Internet Explorer 8. Det går dock att jobba runt detta problem men det kanske ses som ett extra “besvär”. Det går att helgardera sig genom att använda en PNG-bild som backup till din SVG. Antingen genom en s k “image fallback” som du kan läsa mer om i artikeln “A complete guide to SVG fallbacks” (Bellamy-Royds, 2015). Eller om man gillar att skriva javascript så kan man göra ett script som kollar om webbläsaren stödjer SVG och använder PNG-bilden i de fall den inte gör det. Nyare versioner av IE är inte heller så mycket för SVG, skalningen sker inte korrekt i varken desktop eller mobil. Men det går att komma runt det problemet också genom att lägga till css-regler och “wiewBox” (Can I use…, n.d.). Men vem använder IE kanske man frågar sig?

En annan nackdel man kan jobba runt – om man jobbar med en mycket detaljerad Illustration kan den ta stor plats som SVG-fil. Som tur är har Illustrator två olika exportalternativ för SVG: SVG och komprimerad SVG (SVGZ). Den komprimerade versionen kan minska filstorleken 50-80%, däremot är koden sen inte redigerbar i en texteditor (Adobe, u.å.) Men när det gäller en stor illustration kanske man inte har behovet att kunna göra det.

 

Implementera SVG på din webbsida

Det finns flera sätt att lägga in en SVG på en webbsida, vissa smidigare än andra. Vilket sätt man ska välja beror på i vilken utsträckning man vill kunna manipulera sin SVG. Man kan lägga in en SVG som en img-tagg i HTML-koden men denna metod begränsar möjligheterna (Giltsoff, n.d.). En sådan ser ut såhär:

<img src=”logo.svg”>

Att öppna din svg-fil i din texteditor gör att man (uppenbarligen) kommer åt den koden som den består av. Man kan använda den koden istället för en img-tagg för att lägga in din SVG. Man kallar det för en “inline SVG”. Detta sätt gör det enklast att manipulera bilden. Koden ser ut såhär, fast längre:

<svg xmlns=”http://www.w3.org/2000/svg” viewBox=”0 0 68 65″><path fill=”#1A374D” d=”M42 27v-20c0-3.7-3.3-7-7-7s-7 3.3-7…

Ett annat alternativ, som dessvärre också begränsar möjligheterna till manipulering, är att ange sin SVG som bakgrundsbild i en CSS-class:

.logo {
background-image: url(logo.svg);
}

Har man inte behovet att redigera, animera eller på annat sätt styla sin SVG så fungerar img-tagg eller CSS-bakgrundsbild okej. Men det bästa alternativet för att kunna manipulera sin SVG utan att använda en inline SVG verkar vara att använda sig av “object”:

<object type=”image/svg+xml” data=”logo.svg”></object>

De olika implementeringsalternativen fungerar olika bra responsivt. Anger man 100% som bredd på “object” fungerar det som väntat. Men kör man med CSS background-image behöver du ange padding-bottom för att filen överhuvudtaget ska visas i webbläsaren. Vill man lära sig mer om de olika sätten att lägga in SVG på sin webbsida kan man kika in på Giltsoffs guide “SVG on the web”.

 

Testa!

Varför inte göra ett försök? Är du bekant med Illustrator, skapa en ikon och exportera ut den som SVG. Adobe har en tutorial på hur du gör det här.

Annars kan du gå in på flaticon, där kan du ladda ner ikoner med CC BY 3.0 licens. Välj en ikon och ladda ner som SVG.

…Sen är det bara att öppna din texteditor och börja experimentera!

 

Extra

  • Om du vill läsa mer om hur man skapar SVG-filer direkt i texteditorn kan jag hänvisa till w3schools tutorial.
  • Vill du prova skapa vektorgrafik men inte har Illustrator så är Incscape ett alternativ, det är en gratis och öppen (open source) programvara.
  • Har du en ikon eller något annat du gjort i rasterformat kan du kan konvertera om den till vektorgrafik, den här korta videon visar hur du gör i Illustrator.

Referenser

Adobe (u.å.). Så här sparar du teckningar i Illustrator |Lärobjekt]. Tillgänglig: https://helpx.adobe.com/se/illustrator/using/saving-artwork.html [2016-11-04]

Bellamy-Royds, A. (2015). A complete guide to SVG fallbacks [Elektronisk]. Tillgänglig: https://css-tricks.com/a-complete-guide-to-svg-fallbacks/ [2015-11-05]

Bushell, D. (2012). Resolution Independence With SVG [Elektronisk]. Smashing Magazine, 16 januari Tillgänglig: https://www.smashingmagazine.com/2012/01/resolution-independence-with-svg/ [2016-11-01]

Can I use… (n.d.). Can I use SVG? [Elektronisk]. Tillgänglig: http://caniuse.com/#search=SVG [2016-11-04]

Creative Bloq (2015). Get started with SVG for responsive web design [Elektronisk]. Creative Bloq, 17 juli. Tillgänglig: http://www.creativebloq.com/web-design/get-started-svg-responsive-web-design-71515781 [2016-11-02]

Giltsoff, J. (n.d.). SVG on the web – A Practical Guide [Elektronisk]. Tillgänglig: https://svgontheweb.com/ [2016-11-04]

Webbgaraget (2012). SVG – Ett första steg mot anpassningen till retinaskärmar. Webbgaraget [Blogg]. 30 augusti. Tillgänglig: http://webbgaraget.se/2012/08/30/svg-ett-forsta-steg-mot-anpassningen-till-retinaskarmar/ [2016-11-01]

Wikipedia (2015-02-19). Scalable Vector Graphics [Elektronisk]. Tillgänglig: https://sv.wikipedia.org/wiki/Scalable_Vector_Graphics [2016-11-01]