Wat zijn Scalable Vector Graphic of SVG’s?

Scalable Vector Graphic of SVG is een afbeeldingsformaat dat gebruikt wordt op het internet. SVG zijn vector gebaseerde afbeeldingen die animaties en interacties ondersteunen. De afbeeldingen in SVG worden gedefinieerd door middel van de Extensible Markup Language (XML). Doordat de afbeeldingen zijn gemaakt door gebruik van vectoren wordt de kwaliteit niet aangepast als er wordt ingezoomd op de afbeelding.

Waarom SVG gebruiken in plaats van JPG of GIF?

SVG’s hebben veel voordelen ten opzichte van traditionele afbeeldingsformaten zoals JPG, PNG en GIF. Toch worden SVG’s nog nauwelijks gebruikt op internet. Dit komt vaak doordat ontwikkelaars of andere gebruikers de voordelen niet weten van SVG’s. Enkele voordelen van SVG’s zijn:

Schaalbaar. Je kunt inzoomen op SVG afbeeldingen zonder de kwaliteit te verliezen. Dit kan heel erg nuttig zijn bij het maken van een responsive website.
Aanpasbaar. Een SVG afbeelding is opgemaakt doormiddel van XML. Hierdoor kan elk element worden aangepast of worden geanimeerd.
Zoekmachine vriendelijk. Zoekmachines indexeren en cachen de SVG afbeeldingen net zoals normale afbeeldingen.
Aangeraden door de W3C. De W3C organisatie raad het gebruik van SVG aan.

Waar gebruik je SVG afbeeldingen in je website

SVG afbeeldingen kunnen overal in de website worden gebruikt. Het is hierbij mogelijk om alle huidige afbeeldingen te vervangen voor SVG-afbeeldingen. Het is niet nodig om overal een SVG-afbeelding van te maken. De oude vertrouwde JPG afbeeldingen voor afbeeldingen die gebruikt worden in de content van de website zijn geen enkel probleem.

Het is dus vooral aan te raden om SVG te gebruiken op plaatsen waar de afbeelding schaalbaar moet zijn. Zoals het logo van de website die op een mobiel apparaat een andere resolutie heeft dan op de desktop.

Browser ondersteuning

Alle moderne browsers ondersteunen afbeeldingen in het SVG formaat. Alleen de oudere versies van Internet Explorer (8 of lager) hebben geen ondersteuning voor SVG. Dit kan worden opgelost door een fallback te gebruiken naar een JPEG of PNG afbeelding.

Hoe maak ik een SVG afbeelding

Een SVG afbeelding kan er erg complex uitzien en daarom lijkt het alsof deze moeilijk is om te maken. Gelukkig zijn er genoeg programma’s ontwikkeld die het maken van SVG-afbeeldingen eenvoudig maken. Enkele van deze programma’s zijn:

SVG-afbeeldingen gebruiken op je website

Er zijn een aantal verschillende manieren om SVG-afbeeldingen te gebruiken op je website. Je kunt deze plaatsen zoals normale afbeeldingen, maar dan is er geen controle meer over de afbeeldingen en kun je dus geen eventuele fallback realiseren voor oudere browsers die SVG niet ondersteunen.

Wilt u ook uw B2B Webdesign optimaliseren door CMS die gebruik maakt van afbeeldingen die oneindig schaalbaar zijn? Neem dan contact op met Sigma Solutions via de mail of door het formulier rechts in te vullen.