Scalable Vector Graphics, eller SVG, spelar en viktig roll i webbdesign idag. Om du för närvarande inte använder SVG i ditt webbdesignarbete, här är några anledningar till varför du bör börja göra det, samt reservdelar du kan använda för äldre webbläsare som inte stöder dessa filer.
Upplösning
Den största fördelen med SVG är upplösningsoberoende. Eftersom SVG-filer är vektorgrafik (i motsats till pixelbaserade rasterbilder) kan du ändra storlek på dem utan att förlora bildkvalitet. Detta är särskilt användbart när du skapar responsiva webbplatser som måste se bra ut och fungera bra på ett brett utbud av skärmstorlekar och enheter. Du kan skala upp eller ner SVG-filer för att tillgodose de ändrade storleks- och layoutbehoven på din responsiva webbplats utan att kompromissa med kvaliteten på dem på något sätt.
Allmänt sett har SVG:er ett jämnare, skarpare utseende än bilder i andra format, oavsett storlek.
Filstorlek
En utmaning med att använda rasterbilder (t.ex. JPG, PNG, GIF) på responsiva webbplatser är filstorleken. Eftersom rasterbilder inte skalas på det sätt som vektorbilder gör, måste du leverera dina pixelbaserade bilder i den största storleken där de kommer att visas. Det beror på att du alltid kan göra en bild mindre och behålla dess kvalitet, men detsamma gäller inte för att göra bilder större. Resultatet är bilder som är mycket större än den storlek som de visas i, vilket tvingar webbläsare att ladda ner stora filer.
Vektorgrafik är däremot skalbar, så du kan använda mycket små filstorlekar oavsett hur stora dessa bilder kan behöva visas. Detta optimerar i slutändan webbplatsens övergripande prestanda och nedladdningshastighet.
CSS Styling
Du kan enkelt lägga till SVG direkt i HTML-koden på en sida. Detta är känt som inline SVG. En fördel med att använda inline SVG är att eftersom grafiken faktiskt ritas av webbläsaren så behövs det ingen HTTP-begäran för att hämta en bildfil.
En annan fördel: Du kan utforma inline SVG med CSS. Behöver du ändra färgen på en SVG-ikon? Istället för att redigera den bilden i grafikredigeringsprogram och sedan exportera och ladda upp filen igen, kan du ändra SVG-filen helt enkelt med några rader CSS. Du kan använda CSS för att ändra SVG:er för hovringstillstånd och andra designbehov.
Bottom Line
Eftersom du kan styla inline SVG-filer med CSS, kan du använda CSS-animationer på dem också. CSS-transformationer och -övergångar är två enkla sätt att lägga till lite liv till SVG:er. Du kan få rika Flash-liknande upplevelser på en sida utan att använda Flash-som iPaden inte längre stöder. Faktum är att Adobe fasar ut Flash i slutet av 2020.
Användningar av SVG
Så kraftfulla som SVG-filer är kan de inte ersätta alla andra bildformat. Foton som kräver rikt färgdjup stillbild bör vara i JPG- eller PNG-format, men enkla bilder som ikoner är perfekta att köras som SVG.
SVG är också lämpligt för vissa komplexa illustrationer, som grafer, diagram och företagslogotyper. All denna grafik drar nytta av att den är skalbar och kan stylas med CSS.
Support för äldre webbläsare
Nuvarande stöd för SVG är mycket bra i moderna webbläsare. De enda webbläsarna som saknar stöd för denna grafik är gamla versioner av Internet Explorer (som Microsoft inte längre stöder) och några gamla versioner av Android. Sammantaget använder fortfarande en mycket liten andel av surfarpopulationen dessa webbläsare, och den siffran fortsätter att minska. Det betyder att du kan använda SVG på din webbplats utan oro.
Om du vill tillhandahålla en reserv för SVG, använd ett verktyg som Grumpikon från Filament Group. Den här resursen skapar PNG-filer från dina SVG-bildfiler.
