6 fördelar med SVG-vektorgrafik

Fördel 1: oändlig skalning utan förvrängning

SVG beskriver former med matematiska sökvägar, och när du förstorar ritar webbläsaren helt enkelt om den i den nya storleken. Ikoner förblir skarpa på Retina-skärmar, och en logotyp som skalas till affischstorlek är fortfarande tydlig — du behöver inte ta fram flera upplösningar som med en bitmap. Det är kärnfördelen med vektorgrafik och skälet till att logotyper och ikoner måste vektoriseras. För responsiva sidor täcker en enda SVG-ikon alla scenarier från telefon till 4K-skärm, så du behöver inte klippa separata bilder för varje enhet.

Fördel 2: små filer och snabb sidladdning

SVG för en enkel ikon väger ofta bara några kB — mycket mindre än en uppsättning PNG:er i flera upplösningar. Och eftersom SVG är text komprimeras den extremt väl med gzip eller Brotli, vilket minskar den överförda storleken med ytterligare sextio till åttio procent. På en ikonstätts sida märks byteöverföringen tydligt när man byter till SVG. Komplexa illustrationer kräver dock att antalet sökvägar hålls under kontroll; se tips för SVG-optimering för detaljerna. När ett ikonsystem byter till SVG minskar de totala bytes som efterfrågas för bilder ovanför viktförlusten ofta med mer än hälften, vilket är särskilt värdefullt på långsamma anslutningar.

Fördel 3: programmerbar, interaktiv och animerbar

SVG är en del av DOM: du kan ändra en ikons fyllning med CSS, styra en streckritningsanimation med JavaScript och reagera på klick och hovring. Byte av ikonfärger i mörkt läge, markering av ett diagramsegment vid hovring och laddningsanimationer kan göras direkt i SVG — ingen bildbyte och inga bildruteanimationer. Rasterformat kan helt enkelt inte göra detta. Datavisualisering gynnas mest: varje stapel och varje linjsegment i ett diagram är en oberoende sökväg, så hovringsmarkering och drilldown-händelser kan kopplas direkt.

Fördel 4: redigerbar text, vänlig mot SEO och tillgänglighet

Text i en SVG är riktig text — den går att markera, söka och översätta. Lägg till beskrivningar med <title> och <desc> i en grafik så kan skärmläsare meddela den och sökmotorer förstå bildens betydelse. Text i en bitmap är bara pixlar, osynlig för både sökmotorer och skärmläsaranvändare. Flerspråkiga webbplatser kan dessutom översätta texten i en SVG direkt, utan att exportera om bilden.

Fördel 5: en källfil som återanvänds överallt

Samma SVG fungerar på en webbsida, kan exporteras som högupplöst PNG till ett dokument och kan lämnas till tryck- och lasergravyrutrustning. När varumärkesfärgen ändras redigerar du en källfil och alla användningar uppdateras samtidigt, i stället för att bygga om varje storlek separat. För ett team innebär det mycket lägre underhållskostnad för resurserna. E-handel och varumärkesteam gynnas särskilt: en enda vektorisering låter varje produktsida, förpackning och evenemangsmaterial återanvända samma grafik, och en färgändring blir underhåll av en enda källfil.

Fördel 6: en öppen standard med mognat ekosystem

SVG är en öppen W3C-standard som stöds direkt av alla moderna webbläsare och som kan läsas och skrivas av designverktyg som Illustrator, Figma och Inkscape, utan att du binds till någon leverantör. Objektivt sett har SVG också begränsningar: det lämpar sig inte för fotografiska bilder, renderingsprestandan sjunker när sökvägarna blir alltför komplexa, och foton bör ligga kvar i JPG eller WEBP. Open source-gemenskapen har också byggt ett mogget verktygsskede runt SVG — SVGO för komprimering, ikonbibliotek och animationsbibliotek — allt redo att använda.

Ny på SVG? Använd verktyget Bild till SVG för att göra om dina bitmapar till vektorer, eller bläddra bland och ladda ner fria vektorresurser i PolySVG-galleriet. Börja med att läsa Vad är SVG och Skillnaden mellan PNG och SVG.