Waarvoor worden SVG-bestanden gebruikt?.

De afgelopen jaren hebben Scalable Vector Graphics zich verder ontwikkeld – maar waarvoor worden ze in de praktijk gebruikt?

Ondersteunt SVG animaties?

Het SVG-bestandstype is er niet alleen voor statische afbeeldingen. Online vind je allerlei tools om bewegende elementen op te nemen in webafbeeldingen. SVG-animaties kunnen relatief eenvoudige elementen bevatten, zoals een schuifregelaarsfunctie om naar verschillende dia's in een infographic te gaan. Je kunt ook illustraties laten bewegen, bijvoorbeeld de wijzers van een klok.

Hoe herken ik een SVG?

De eenvoudigste manier om een SVG te herkennen is door naar de bestandsextensie te kijken. Een SVG-bestand heeft de extensie .SVG. Je kunt vectorafbeeldingen zoals een SVG ook herkennen door ze op het computerscherm tot 200% of meer te vergroten. Een vectorafbeelding behoudt zijn duidelijke lijnen en kleuren en blijft scherp. Er treedt ook geen verpixeling op.

Kun je SVG-bestanden alleen op internet gebruiken?

Hoewel SVG-afbeeldingen vooral op het web worden gebruikt, zijn ze ook buiten de online wereld te gebruiken. Omdat SVG-bestanden niet worden vervormd als je het formaat aanpast, zijn ze bijvoorbeeld handig als sjabloon voor het afdrukken van afbeeldingen op kleding, zoals t-shirts. Een JPEG, die uit heel veel pixels bestaat, geeft niet zo'n scherp resultaat.

Hoe groot zijn SVG-bestanden?

De grootte van een SVG-bestand hangt af van de hoeveelheid afbeeldingsgegevens erin, maar een SVG is vaak kleiner dan de meeste andere bestandstypen. Complexe afbeeldingen met veel paden en ankerpunten nemen meer opslagruimte in beslag dan meer eenvoudige, overzichtelijke ontwerpen. Probeer het aantal complexe instructies in het bestand klein te houden.

Wat is het verschil tussen een SVG- en een PNG-bestand?

Kort gezegd: SVG is een vectorbestand en PNG een rasterbestand. Als je een PNG-bestand te groot of te klein maakt, wordt het onscherp en treedt er verpixeling op. SVG's bevatten geen pixels en verliezen daarom nooit hun resolutie. Daarnaast ondersteunt PNG geen animaties.

SVG-bestanden.

SVG is een populair bestandstype voor de weergave van tweedimensionale afbeeldingen, grafieken en illustraties op websites. Het is een vectorbestand, dus je kunt het vergroten en verkleinen zonder verlies van resolutie. Ontdek meer over de belangrijkste eigenschappen van SVG-afbeeldingen, de voor- en nadelen ervan en de manier waarop het SVG-bestandstype zich heeft ontwikkeld.

Wat je leert.

Wat is een SVG-bestand?

SVG staat voor Scalable Vector Graphics. Het is een vectorbestandstype dat heel geschikt is voor het web. In tegenstelling tot pixelgebaseerde rasterbestanden zoals JPEG's, slaan vectorbestanden afbeeldingen op via wiskundige formules die zijn gebaseerd op punten en lijnen op een raster. Hierdoor kun je vectorbestanden als SVG zonder kwaliteitsverlies aanzienlijk vergroten en verkleinen. Dit maakt ze ideaal voor logo's en complexe online afbeeldingen.

Het is niet alleen vanwege de mogelijkheid om het formaat aan te passen dat SVG zo enorm populair is onder webontwerpers. SVG's zijn geschreven in XML-code: ze slaan tekstinformatie op als letterlijke tekst en niet als vormen. Hierdoor kunnen zoekmachines als Google de trefwoorden van SVG-afbeeldingen lezen en dit resulteert vaak in een hogere ranking voor de website.

Je herkent een SVG-bestand aan de extensie .SVG.

Geschiedenis van het SVG-bestand.

SVG dateert van eind jaren '90, toen het World Wide Web Consortium (W3C) ontwikkelaars uitnodigden een voorstel te doen voor een nieuw bestandstype voor vectorafbeeldingen. Er werden zes voorstellen ingediend, die samen de basis vormden van wat uiteindelijk het SVG-bestandstype van W3C werd.

Het duurde even voordat SVG populair werd. Pas in 2017 begon men zich de voordelen van SVG's in moderne webbrowsers te realiseren. SVG wordt nu overal gebruikt voor 2D-webafbeeldingen, vanwege het gemak waarmee de meeste browsers en tekenapps voor vectorbestanden ermee kunnen werken.

Voor- en nadelen van SVG-bestanden.

Kijk goed naar de voor- en nadelen van SVG voordat je afbeeldingen in dit bestandstype opslaat.

Voordelen van SVG-bestanden.

Anders dan rasterbestanden, die zijn opgebouwd met pixels, behouden vectorafbeeldingen zoals SVG's altijd hun resolutie, hoe groot of klein je ze ook maakt. Je hoeft je geen zorgen te maken over kwaliteitsverlies bij gebruik in bepaalde browsers of wanneer je het formaat aanpast.
Eenvoudige SVG-bestanden zijn vaak kleiner dan rasterafbeeldingen, die bestaan uit grote aantallen gekleurde pixels en niet uit wiskundige algoritmen.
Omdat SVG tekst als tekst (en niet als ontwerp) behandelt, kunnen schermlezers elk woord in een SVG-afbeelding scannen. Dit is erg handig voor mensen die hulp nodig hebben bij het lezen van webpagina's. Ook zoekmachines kunnen SVG-afbeeldingstekst lezen en indexeren.

Nadelen van SVG-bestanden.

SVG-bestanden zijn fantastisch voor webafbeeldingen als logo's, illustraties en grafieken. Maar omdat ze niet werken met pixels, zijn ze minder geschikt voor de weergave van digitale foto's van hoge kwaliteit. Hiervoor zijn JPEG-bestanden meestal beter.
Alleen moderne browsers ondersteunen SVG. Het kan lastig zijn SVG-afbeeldingen te gebruiken in Internet Explorer 8 en andere oudere browsers.
Als je het SVG-bestandstype nog niet goed kent, kan de code erin lastig zijn.

Een SVG-bestand openen.

Van Chrome en Edge tot Safari en Firefox: je kunt tegenwoordig in alle gangbare browsers SVG-bestanden openen, of je nu op een Mac- of een Windows-computer werkt. Open je browser, klik op Bestand >

Openen en kies het bestand dat je wilt bekijken. Dit verschijnt vervolgens in de browser.

Het openen van een SVG-afbeelding in een ingebouwd programma op de computer is net zo eenvoudig. Dubbelklik op het bestand en er verschijnt een lijst met programma's waarmee je het kunt openen. Of het wordt automatisch in een compatibel programma geopend.

Een SVG-bestand maken en bewerken.

Volg deze stappen in Adobe Photoshop:

Maak een afbeelding in Photoshop en klik vervolgens op Bestand > Exporteren > Exporteren als.
Klik in het venster dat verschijnt op het vervolgkeuzemenu Indeling en selecteer SVG.
Selecteer Alles exporteren en sla het bestand op.

Opmerking: omdat Photoshop een editor voor rasterafbeeldingen is, prefereren veel mensen Adobe Illustrator, een editor voor vectorafbeeldingen, voor het maken en bewerken van SVG-bestanden.