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.


Op De Hoogte Blijven?

Online Succes realiseren is een vak, een vak wat wij verstaan en waarover we je graag vertellen. Schrijf je in voor onze maandelijkse nieuwsbrief en blijf op de hoogte van trends, thema’s en succesverhalen.

Aanhef

Andere blogartikelen

Bel 072 5345 888
Meer dan 40 bedrijven vertrouwen op ons
Allrig is de alles in een leverancier binnen de energie-industrie
Aliancys is een toonaangevend wereldwijd bedrijf actief in de verkoop van kwaliteitsharsen
ERIKS is een toonaangevende en innovatieve leverancier aan de procesindustrie en aan machinebouwers, die zowel de rol van specialist als die van brede MRO-leverancier vervult
Industrieel dienstverlener Heinen & Hopman Engineering uit Bunschoten is dé wereldwijde specialist op het gebied van klimaatbeheersing
Handicare is een internationale organisatie die ouderen helpt om hun dagelijks leven gemakkelijker te maken door het produceren van hoogwaardige trapliften
Onze Middelen en Technologieën
Microsoft partner
Adobe partner
Asp dotnet
Google analytics
Google adwords
TelefoonE-mail