SVG på webben är ett smart val för logotyper, ikoner, symboler och annan vektorgrafik. Formatet kan förstoras och förminskas utan att grafiken blir suddig eller pixlig.
Dessutom fungerar SVG mycket bra i responsiv webbdesign, eftersom samma fil kan användas på mobil, surfplatta och desktop. För fotografier är däremot WebP oftast ett bättre alternativ.
Genom att välja rätt bildformat för rätt typ av innehåll får du både bättre kvalitet och en snabbare webbplats. Här går vi igenom varför SVG är användbart, när formatet passar bäst och hur det skiljer sig från WebP, PNG och JPG.
Vad är SVG och hur fungerar formatet?
SVG står för Scalable Vector Graphics och är ett vektorbaserat bildformat.
Till skillnad från fotografier, som består av pixlar, byggs vektorgrafik upp av linjer, former, kurvor och färger. Därför kan grafiken skalas upp utan att kvaliteten försämras.
En PNG- eller JPG-bild har däremot en bestämd upplösning. Om den förstoras för mycket kan kanterna börja se suddiga ut.
Med SVG uppstår inte samma problem. Formatet passar därför särskilt bra när grafiken behöver fungera i flera olika storlekar.
Skarp grafik i alla storlekar
En av de största fördelarna med SVG på webben är att grafiken behåller sin skärpa oavsett storlek.
Det är särskilt användbart för:
- logotyper
- ikoner
- symboler
- enkla illustrationer
- diagram
- grafiska former
Till exempel kan samma logotyp visas som en liten detalj i mobilmenyn och som ett större grafiskt element på startsidan.
På så sätt slipper du skapa flera versioner av samma bild bara för att få rätt kvalitet.
Ett smart val för logotyper
Logotypen är ett av de tydligaste exemplen på grafik som passar bra som SVG.
En företagslogotyp används ofta på flera olika platser. Den kan exempelvis finnas i navigationen, sidfoten, presentationer och olika delar av webbplatsen.
Eftersom storleken varierar behöver logotypen kunna anpassas utan att bli oskarp.
Därför är SVG ofta ett bättre alternativ än en vanlig PNG-fil när originalet är vektorbaserat.
Dessutom kan samma fil fungera på både små och stora skärmar.
Bättre resultat på högupplösta skärmar
Moderna mobiltelefoner och datorer har ofta mycket hög pixeltäthet.
Det innebär att bilder med låg upplösning lätt kan se oskarpa ut. Vektorgrafik påverkas däremot inte på samma sätt.
Eftersom formerna beräknas utifrån skärmens storlek förblir grafiken skarp även på Retina-skärmar och andra högupplösta displayer.
Det gör formatet särskilt användbart för små detaljer där tydliga linjer är viktiga.
Mindre filer kan ge snabbare laddning
En enkel vektorfil kan vara mycket liten.
Det gäller framför allt grafik med:
- få färger
- rena linjer
- enkla former
- symboler
- ikoner
Därför kan SVG i många fall bidra till en lättare webbplats.
Samtidigt är det viktigt att komma ihåg att en SVG inte automatiskt är liten. En komplicerad illustration med tusentals objekt kan bli tung.
För bästa resultat bör filen därför optimeras innan den används på webben.
Flexibelt på alla skärmstorlekar
Responsiv webbdesign innebär att innehållet anpassas efter olika skärmar.
Här passar vektorgrafik mycket bra.
Samma ikon eller logotyp kan användas på mobil, surfplatta och desktop utan att du behöver exportera olika bildstorlekar.
Dessutom blir underhållet enklare eftersom färre filer behöver hanteras.
På så sätt får du både en mer flexibel design och en enklare arbetsprocess.
Transparent bakgrund utan extra bildfil
Vektorgrafik kan användas utan bakgrund.
Det betyder att logotyper och ikoner kan placeras på flera olika färger och sektioner utan en vit ruta runt omkring.
Till exempel kan samma grafik användas på:
- vit bakgrund
- mörk bakgrund
- färgade sektioner
- fotografier
Det gör formatet särskilt användbart i modern webbdesign där samma element ofta återkommer på flera typer av bakgrunder.
Byt färg direkt med CSS
En annan fördel är att färgen i vissa SVG-element kan styras med CSS.
Det innebär att en ikon till exempel kan vara blå i normalt läge och gul när användaren håller muspekaren över den.
Dessutom kan samma element visas i vitt på en mörk bakgrund.
Istället för att skapa flera separata bildfiler kan du alltså återanvända samma grafik.
Det gör designen mer flexibel och kan samtidigt minska antalet filer på webbplatsen.
Skapa rörelse och interaktion
Vektorgrafik kan även användas för små animationer och interaktiva effekter.
Till exempel kan:
- en linje ritas upp
- en ikon byta färg
- en symbol ändra form
- ett grafiskt element reagera vid hover
- delar av en illustration röra sig
Sådana effekter kan skapa mer liv på webbplatsen.
Samtidigt bör animation alltid användas med ett tydligt syfte. För mycket rörelse kan istället göra sidan rörig och distrahera från innehållet.
Därför fungerar subtila animationer ofta bäst.
Fotografier behöver ett annat format
Trots många fördelar är SVG inte rätt val för alla bilder.
Fotografier innehåller stora mängder detaljer, färgvariationer och nyanser. Därför lämpar de sig bättre för rasterformat.
För moderna webbplatser är WebP ofta ett mycket bra alternativ.
WebP passar exempelvis för:
- hero-bilder
- porträtt
- produktbilder
- bloggbilder
- miljöbilder
- fotografiska bakgrunder
På så sätt kan SVG och WebP användas tillsammans istället för att konkurrera med varandra.
WebP är bättre för foton
WebP är utvecklat för digitala bilder och kan ofta ge hög kvalitet med relativt liten filstorlek.
Därför används formatet allt oftare för fotografier på webben.
Ett stort foto sparat som PNG kan väga betydligt mer än nödvändigt. Om samma bild istället exporteras som WebP kan filstorleken ofta minskas.
Resultatet blir en lättare sida utan att bilden behöver se märkbart sämre ut.
En enkel tumregel är därför:
Logotyp och vektorgrafik → SVG
Fotografier och hero-bilder → WebP
Så kompletterar SVG och WebP varandra
SVG och WebP används för olika typer av innehåll och fungerar därför mycket bra tillsammans.
Vektorgrafik passar bäst för logotyper, ikoner och grafiska element. Fotografier bör däremot vanligtvis sparas som WebP.
På en vanlig företagswebbplats kan det se ut så här:
- logotyp → SVG
- ikoner → SVG
- vektorillustrationer → SVG
- hero-foto → WebP
- porträtt → WebP
- bloggbilder → WebP
- produktbilder → WebP
Genom att kombinera formaten får du både skarp grafik och effektiva bildfiler.
Skillnaden mellan SVG, WebP, PNG och JPG
Alla bildformat har sina styrkor.
Logotyper och vektorgrafik utan kvalitetsförlust
För logotyper, ikoner, symboler och enklare illustrationer är SVG ofta det bästa valet.
Eftersom grafiken är vektorbaserad förblir den skarp även när storleken förändras.
WebP för fotografier och hero-bilder
WebP passar bra för mer detaljrika bilder.
Dessutom kan formatet ofta ge mindre filer än äldre alternativ.
Därför används det ofta för fotografier, produktbilder och större bilder på webbplatser.
PNG när rastergrafik behöver transparens
PNG är fortfarande användbart när en vanlig rasterbild behöver transparent bakgrund.
Formatet passar också bra för vissa skärmdumpar och enklare digital grafik.
Däremot kan PNG-filer bli stora, särskilt när de innehåller fotografier.
JPG som ett äldre fotoformat
JPG används fortfarande mycket för fotografier.
Formatet fungerar bra, men WebP är ofta mer effektivt för moderna webbplatser.
Därför är JPG inte alltid förstahandsvalet längre.
Bildformat påverkar webbplatsens hastighet
Stora bilder är en vanlig anledning till att webbplatser blir långsamma.
Därför handlar bildoptimering inte bara om hur en bild ser ut.
Du bör även tänka på:
- filstorlek
- bilddimensioner
- komprimering
- lazy loading
- antal bilder på sidan
- vilket format som används
En hero-bild behöver till exempel inte vara 6000 pixlar bred om den visas betydligt mindre på webbplatsen.
Genom att optimera bilderna kan du förbättra både laddningstid och användarupplevelse.
Säker användning i WordPress
WebP kan normalt användas direkt i WordPress.
SVG fungerar däremot lite annorlunda.
Anledningen är att en SVG-fil bygger på XML och kan innehålla kod. Av säkerhetsskäl behöver filerna därför hanteras på rätt sätt.
Om du använder SVG i WordPress bör du:
- använda filer från betrodda källor
- exportera egna filer korrekt
- sanitera SVG-filer
- använda en säker plugin eller lösning
På så sätt kan du använda formatets fördelar utan att skapa onödiga säkerhetsrisker.
Säkerheten bakom SVG-filer
En SVG ser ut som en vanlig bild, men tekniskt sett innehåller filen kod.
Därför kan en manipulerad fil i vissa fall innehålla skadligt innehåll.
Av den anledningen bör du inte ladda upp SVG-filer från okända källor direkt på webbplatsen.
Använd istället grafik som du själv har skapat eller fått från en designer du litar på.
Dessutom kan filen sanitiseras innan den laddas upp.
Dessa logotypfiler bör ett företag ha
När du beställer en professionell logotyp är det bra att få flera filformat.
En komplett leverans kan exempelvis innehålla:
- SVG
- PNG
- EPS
- JPG vid behov
För webbplatsen är SVG ofta det viktigaste vektorformatet.
PNG är däremot användbart på plattformar som inte accepterar SVG eller när en vanlig transparent bild behövs.
PDF och EPS används ofta för tryck och andra professionella produktioner.
Behöver du både vektor och raster?
Ja, i många fall är det smart att ha båda.
En SVG-fil är utmärkt på webbplatsen, men alla system och plattformar accepterar inte vektorformat.
Därför är en transparent PNG-version av logotypen fortfarande bra att ha.
Genom att spara flera versioner har du alltid rätt fil för rätt användningsområde.
Ikoner som håller sig skarpa
Ikoner är ett område där SVG verkligen kommer till sin rätt.
Eftersom de ofta består av enkla former kan filstorleken hållas låg.
Dessutom förblir ikonerna skarpa även när storleken förändras.
Färg och storlek kan i många fall också styras direkt via webbdesignen.
På så sätt blir samma ikon enkel att återanvända på flera platser.
Illustrationer som kan skalas utan kvalitetsförlust
Vektorillustrationer fungerar också mycket bra på webben.
En illustration med tydliga former och ett begränsat antal färger kan skalas från mobilformat till stora desktopsektioner utan att bli pixlig.
Samtidigt bör mycket komplexa illustrationer optimeras.
Om filen innehåller ett stort antal detaljer kan ett annat format ibland vara mer effektivt.
Därför är det alltid bra att kontrollera filstorleken innan publicering.
Bra filnamn och alt-text
Rätt bildformat är bara en del av en väloptimerad webbplats.
Filnamnen bör också vara tydliga.
Till exempel är:
logotyp-webbdesign.svg
bättre än:
final-version-03.svg
För innehållsbilder är alt-text dessutom viktig när bilden förmedlar relevant information.
Dekorativa bilder behöver däremot inte alltid en beskrivande alt-text.
Använd rätt format till rätt innehåll
Det viktigaste är inte att använda SVG överallt.
Istället bör du välja format utifrån vad bilden faktiskt innehåller.
Vektorgrafik fungerar bäst som SVG, medan fotografier vanligtvis passar bättre som WebP.
PNG har fortfarande en funktion när rastertransparens behövs. Samtidigt fungerar JPG som ett alternativ i äldre system och vissa specifika situationer.
Genom att välja rätt från början slipper du onödigt stora filer och dålig bildkvalitet.
En bra kombination för moderna webbplatser
En modern företagswebbplats använder ofta flera olika bildformat.
Ett praktiskt upplägg är:
SVG för logotyper, ikoner och vektorillustrationer.
WebP för fotografier, hero-bilder och bloggbilder.
PNG när rastergrafik behöver transparens.
JPG när det finns ett särskilt behov eller äldre system kräver det.
På så sätt får varje bildformat göra det som det är bäst på.
Sammanfattning
SVG på webben är ett mycket bra val för logotyper, ikoner, symboler och annan vektorgrafik.
Eftersom formatet är skalbart behåller grafiken sin skärpa på både små och stora skärmar. Dessutom kan SVG ofta ge små filer och stor flexibilitet i responsiv design.
För fotografier är WebP däremot ett bättre alternativ. PNG och JPG har fortfarande sina användningsområden, men bör inte automatiskt användas till alla bilder.
Sammanfattningsvis handlar en bra webbplats inte om att välja ett enda bildformat. Genom att kombinera SVG för grafik och WebP för fotografier får du både hög bildkvalitet och bättre prestanda.
Läs mer om våra tjänster
Vill du skapa en professionell webbplats där logotyper, bilder och grafiska element är anpassade för webben? Läs mer om våra tjänster inom webbdesign och grafisk design och hur Svea Designs kan hjälpa dig skapa en tydlig, snabb och genomtänkt webbplats.