Wat zijn Scalable Vector Graphic of SVG’s?

Geschreven door: op donderdag 29 oktober 2015

Leestijd:

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

  • SQL: Geclusterde en niet-geclusterde index

    Geschreven door: op zondag 30 juni 2019

    Het kan soms voorkomen dat het veel tijd kost voordat een bepaalde query resultaten teruggeeft. Dit kan liggen aan een scala aan problemen, zoals het gebruik van veel joins. Wat de query kan helpen ve ...

    Bekijk het artikel »
  • Hoe werkt OAuth 2.0

    Geschreven door: op zondag 30 juni 2019

    In de huidige samenleving is iedereen bijna altijd online, zo ook de applicaties waarvan de mensen gebruik maken. Als je jouw applicatie niet goed afschermt, kan dit allemaal veiligheidsrisico’s met z ...

    Bekijk het artikel »
  • OAuth 2.0: JWT token en claims

    Geschreven door: op zondag 30 juni 2019

    In mijn vorige blog heb ik uitgelegd hoe OAuth 2.0 ervoor kan zorgen dat derde partijen op een veilige manier gebruik kunnen maken van jouw applicatie met behulp van tokens. In deze blog gaan we wat m ...

    Bekijk het artikel »
Bel 072 5345 888
Onze Middelen en Technologieën
microsoft silver partner
Adobe partner
fd-gazellen-2018.jpg
Google analytics
partners-logo.jpg
Op de hoogte blijven?

Meld u aan voor de gratis nieuwsbrief om op de hoogte te blijven van onze activiteiten