Wat zijn Scalable Vector Graphic of SVG’s?

Geschreven door: op donderdag 29 oktober 2015

Leestijd: 2 minuten

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.

SVG logo

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:

  1. 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.
  2. Aanpasbaar. Een SVG afbeelding is opgemaakt doormiddel van XML. Hierdoor kan elk element worden aangepast of worden geanimeerd.
  3. Zoekmachine vriendelijk. Zoekmachines indexeren en cachen de SVG afbeeldingen net zoals normale afbeeldingen.
  4. 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 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.


Andere blogartikelen

  • Relationele data importeren in SQL vanuit Excel

    Geschreven door: op maandag 29 maart 2021

    In SQL Server kan je snel data importeren vanuit Excel-bestanden met behulp van OPENROWSET. Deze functie impoteert een werkblad in het Excel-bestand en plaatst de inhoud in een query, die je kan SEL ...

    Bekijk het artikel »
  • Google Page Experience

    Geschreven door: op vrijdag 26 maart 2021

    Wat is Google Page Experience?Voor de nieuwe update van Google die de algoritme gaat bepalen staat de Page Experience centraal, dit staat voor het centraal stellen van de gebruikerservaring.Zoals de ...

    Bekijk het artikel »
  • Verbeter je technische seo met behulp van SEMrush

    Geschreven door: op vrijdag 26 maart 2021

    Sigma Solutions gebruikt SEMrush om te monitoren wat de SEO staat van de website is van onze klanten. Dit systeem geeft meldingen wanneer er verbeteringen gevonden worden om beter te ranken in de zoek ...

    Bekijk het artikel »
Bel 072 5345 888
Meer dan 40 bedrijven vertrouwen op ons
Bekijk al onze tevreden klanten ›
Open Nieuwsbrief Inschrijving Footer

E-book

Zo wordt uw website een lead generator:
In 3 stappen uw website van visitekaartje naar salesfunnel

Download het E-book »

E-book

Zo wordt uw website een lead generator 
In 3 stappen uw website van visitekaartje naar salesfunnel

Download het E-book ›