Med tanke på att användningen och verktygen som stöder formatet har ökat under de senare åren är det lätt att tro att formatet skulle vara relativt nytt. Men nej, SVG som format har funnits länge. Specifikationen infördes av World Wide Web Consortium, eller W3C, hela vägen tillbaka till 1999 och har sedan dess använts i olika applikationer.
Anledningen till att vi bara börjat prata om SVGs på webben under de senaste åren, trots att standarden är gammal, är att webbläsarsupporten nyligen har blivit pålitlig. Så vad är SVGs och varför är de så populära och viktiga idag? Svaret finns i dess fullständiga namn. SVGs är bokstavligen skalbar vektorgrafik. Skalbar i den bemärkelsen att grafiken kan renderas i alla tänkbara storlekar och upplösningar. Vektor som i att formen skapas med hjälp utav punkter istället för pixlar.
SVG, ursäkta?
För att se varför det här är viktigt måste vi jämföra SVG med andra grafikformat som vi använder på webben idag. JPG, PNG, GIF, etc. är alla Bitmaps, vilket innebär att dessa grafiska filer består av ett pixelnät där färgen på varje enskild cell definieras. Det gör det möjligt att korrekt reproducera bilder och grafik, men betyder också att filen har en fördefinerad höjd och bredd och att filstorleken bär väldigt mycket bilddata.
På dagens webbsidor, där skärmstorlekar och upplösningar varierar kraftigt och vi behöver grafik som ser bra ut på samtliga, kan detta leda till dålig prestanda och korrupta bilder. SVG är helt annorlunda. En SVG är ett XML-baserat dokument som beskriver för webbläsaren eller annan visningsapplikation hur man ritar grafiken utifrån det aktuella visningsområdet. Så snarare än att ge en karta över varje enskild pixel, säger SVG att jag vill skapa en kvadrat, en cirkel, en linje eller annan form till dessa specifikationer.
Kristallklart
Det betyder att det inte längre spelar någon roll vilken storlek den grafik som visas har eller hur upplösningen på skärmen är. Grafiken kommer alltid vara kristallklar och skalas korrekt! Och detta är inte allt. Nu blir det lite tekniskt, men medan bitmappar är sammanställda bildformat är SVG-filer XML-dokument som lever i webbläsaren tillsammans med den övriga HTML-koden. Det betyder att SVG-grafik är gjord av element i webbläsardokumentets objektmodell, och vi kan därför interagera med grafiken med hjälp utav CSS och JavaScript.
Ja, du hörde rätt. SVG kan styras med CSS och JavaScript vilket på många sätt gör det till den heliga gralen av webbgrafik.
