Skip to content

Waarom u SVG op uw website zou moeten gebruiken

12 de augustus de 2021
web development 473456596 5b6313934cedfd0050a89a1e

Scalable Vector Graphics, of SVG, spelen tegenwoordig een belangrijke rol bij het ontwerpen van websites. Als u SVG momenteel niet gebruikt in uw webontwerpwerk, volgen hier enkele redenen waarom u hiermee zou moeten beginnen, evenals fallbacks die u kunt gebruiken voor oudere browsers die deze bestanden niet ondersteunen.

Oplossing

Het grootste voordeel van SVG is resolutie-onafhankelijkheid. Omdat SVG-bestanden vectorafbeeldingen zijn (in tegenstelling tot op pixels gebaseerde rasterafbeeldingen), kunt u het formaat ervan wijzigen zonder de beeldkwaliteit te verliezen. Dit is vooral handig wanneer u responsieve websites maakt die er goed uit moeten zien en goed moeten werken op een breed scala aan schermformaten en apparaten. U kunt SVG-bestanden omhoog of omlaag schalen om tegemoet te komen aan de veranderende grootte en lay-outbehoeften van uw responsieve website zonder dat dit op enige manier afbreuk doet aan de kwaliteit ervan. Over het algemeen zien SVG’s er vloeiender en scherper uit dan afbeeldingen van andere formaten, ongeacht de grootte.

Bestandsgrootte

Een uitdaging bij het gebruik van rasterafbeeldingen (bijv. JPG, PNG, GIF) op responsieve websites is de bestandsgrootte. Omdat rasterafbeeldingen niet op dezelfde manier worden geschaald als vectorafbeeldingen, moet u uw op pixels gebaseerde afbeeldingen aanleveren in het grootste formaat waarop ze worden weergegeven. Dit komt omdat je een afbeelding altijd kleiner kunt maken en de kwaliteit behoudt, maar hetzelfde geldt niet voor het groter maken van afbeeldingen. Het resultaat zijn afbeeldingen die veel groter zijn dan de grootte waarop ze worden bekeken, waardoor browsers gedwongen worden grote bestanden te downloaden. Daarentegen zijn vectorafbeeldingen schaalbaar, dus u kunt zeer kleine bestandsgroottes gebruiken, ongeacht hoe groot die afbeeldingen mogelijk moeten worden weergegeven. Dit optimaliseert uiteindelijk de algehele prestaties en downloadsnelheid van een site.

CSS-styling

U kunt SVG eenvoudig rechtstreeks aan de HTML van een pagina toevoegen. Dit staat bekend als inline SVG. Een voordeel van het gebruik van inline SVG is dat, omdat de afbeeldingen daadwerkelijk door de browser worden getekend, er geen HTTP-verzoek nodig is om een ​​afbeeldingsbestand op te halen. Nog een voordeel: u kunt inline SVG opmaken met CSS. Wilt u de kleur van een SVG-pictogram wijzigen? In plaats van die afbeelding in grafische bewerkingssoftware te bewerken en het bestand vervolgens opnieuw te exporteren en te uploaden, kunt u het SVG-bestand eenvoudig wijzigen met een paar regels CSS. U kunt CSS ook gebruiken om SVG’s voor zweeftoestanden en andere ontwerpbehoeften te wijzigen.

Animaties

Omdat je inline SVG-bestanden kunt stylen met CSS, kun je er ook CSS-animaties op gebruiken. CSS-transformaties en -overgangen zijn twee eenvoudige manieren om SVG’s leven te geven. Je kunt rijke Flash-achtige ervaringen op een pagina krijgen zonder Flash te gebruiken, wat de iPad niet langer ondersteunt. Adobe stopt zelfs met het uitfaseren van Flash tegen het einde van 2020.

Gebruik van SVG

Hoe krachtig SVG’s ook zijn, ze kunnen niet elk ander afbeeldingsformaat vervangen. Foto’s die een rijke kleurdiepte vereisen, moeten nog steeds in JPG- of PNG-indeling zijn, maar eenvoudige afbeeldingen zoals pictogrammen zijn perfect geschikt om als SVG te worden uitgevoerd. SVG is ook geschikt voor sommige complexe illustraties, zoals grafieken, grafieken en bedrijfslogo’s. Al deze afbeeldingen profiteren van schaalbaarheid en kunnen worden gestyled met CSS.

Ondersteuning voor oudere browsers

De huidige ondersteuning voor SVG is erg goed in moderne webbrowsers. De enige browsers die deze afbeeldingen niet ondersteunen, zijn oude versies van Internet Explorer (versie 8 en lager) en enkele oude versies van Android. Al met al gebruikt een zeer klein percentage van de browserpopulatie nog steeds deze browsers, en dat aantal blijft krimpen. Dit betekent dat u SVG zonder zorgen op uw website kunt gebruiken. Als je een fallback voor SVG wilt bieden, gebruik dan een tool zoals Grumpicon van de Filament Group. Deze bron maakt PNG’s van uw SVG-afbeeldingsbestanden.