Skip to content

Varför du borde använda SVG på din webbplats

16 de augusti de 2021
web development 473456596 5b6313934cedfd0050a89a1e

Skalbar vektorgrafik, eller SVG, spelar en viktig roll i webbdesign idag. Om du inte använder SVG för närvarande i ditt webbdesignarbete, här är några anledningar till varför du bör börja göra det, liksom fallbackar 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 resolutionsoberoende. Eftersom SVG-filer är vektorgrafik (i motsats till pixelbaserade rasterbilder) kan du ändra storlek på dem utan att förlora bildkvaliteten. Detta är särskilt användbart när du skapar responsiva webbplatser som måste se bra ut och fungera bra över ett stort antal skärmstorlekar och enheter. Du kan skala upp eller ner SVG -filer för att tillgodose den förändrade storleken och layoutbehovet på din responsiva webbplats utan att kompromissa med deras kvalitet på något sätt. Generellt sett har SVG: er ett jämnare och 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 filstorlek. Eftersom rasterbilder inte skalar så som vektorbilder gör, måste du leverera dina pixelbaserade bilder i den största storleken vid vilken de kommer att visas. Detta beror på att du alltid kan göra en bild mindre och behålla dess kvalitet, men samma sak gäller inte för att göra bilder större. Resultatet är bilder som är mycket större än storleken de visas på, vilket tvingar webbläsare att ladda ner stora filer. Däremot är vektorgrafik skalbar, så du kan använda mycket små filstorlekar oavsett hur stora dessa bilder kan behöva visas. Detta optimerar i slutändan en webbplats totala prestanda och nedladdningshastighet.

CSS Styling

Du kan enkelt lägga till SVG direkt till sidans HTML. Detta är känt som inline SVG. En fördel med att använda inline SVG är att eftersom grafiken faktiskt är ritad av webbläsaren, det inte behövs någon HTTP -begäran för att hämta en bildfil. En annan fördel: Du kan styla 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 enkelt ändra SVG -filen med några rader CSS. Du kan använda CSS för att ändra SVG: er för svävningstillstånd och andra designbehov också.

Animationer

Eftersom du kan utforma inbyggda SVG -filer med CSS kan du också använda CSS -animationer på dem. CSS -transformationer och övergångar är två enkla sätt att lägga till lite liv i SVG: er. Du kan få rika Flash-liknande upplevelser på en sida utan att använda Flash-som iPad inte längre stöder. Faktum är att Adobe fasar ut Flash i slutet av 2020.

Användning av SVG

Lika kraftfulla som SVG: erna kan de inte ersätta alla andra bildformat. Foton som kräver rikt färgdjup bör fortfarande vara i JPG- eller PNG -format, men enkla bilder som ikoner är perfekt lämpade att köras som SVG. SVG är också lämpligt för vissa komplexa illustrationer, till exempel diagram, diagram och företagslogotyper. All denna grafik gynnas av att den är skalbar och kan formateras med CSS.

Stöd för äldre webbläsare

Nuvarande stöd för SVG är mycket bra i moderna webbläsare. De enda webbläsare som saknar stöd för denna grafik är gamla versioner av Internet Explorer (version 8 och nedan) och några gamla versioner av Android. Sammantaget använder en mycket liten andel av surfpopulationen fortfarande dessa webbläsare, och det antalet fortsätter att minska. Det betyder att du kan använda SVG på din webbplats utan bekymmer. Om du vill ge en återkoppling för SVG, använd ett verktyg som Grumpicon från Filament Group. Denna resurs skapar PNG -filer från dina SVG -bildfiler.