Scalable Vector Graphics, of SVG, spelen tegenwoordig een belangrijke rol bij het ontwerpen van websites. Als u SVG momenteel niet gebruikt in uw webontwerpwerk, zijn hier enkele redenen waarom u hiermee zou moeten beginnen, evenals fallbacks die u kunt gebruiken voor oudere browsers die deze bestanden niet ondersteunen.
Resolutie
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 de kwaliteit ervan in het gedrang te brengen.
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.
vectorafbeeldingen daarentegen zijn 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 te wijzigen voor zweeftoestanden en andere ontwerpbehoeften.
Bottom Line
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 nodig hebben, 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 het feit dat ze schaalbaar zijn 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 (die Microsoft niet langer ondersteunt) en een paar 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 zonder zorgen SVG 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.
