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.
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.
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.
De afgelopen jaren hebben Scalable Vector Graphics zich verder ontwikkeld – maar waarvoor worden ze in de praktijk gebruikt?
Ontwerpers gebruiken SVG's vaak voor pictogrammen, bijvoorbeeld knoppen, maar ook bedrijfslogo's op websites. Omdat je dit bestandstype zonder kwaliteitsverlies kunt vergroten en verkleinen, is het ideaal voor afbeeldingen die je op meerdere plaatsen en in allerlei afmetingen wilt weergeven.
Door het gebruik van XML in SVG-bestanden kunnen zoekmachines als Google grafieken met veel tekst lezen. Dit zorgt voor zoekmachine-optimalisatie. Omdat Google trefwoorden in SVG's kan detecteren, krijgt een webpagina vaak een hogere ranking in de zoekresultaten. Bovendien ondersteunt SVG animatie, waardoor webpagina's net wat interessanter worden.
Kijk goed naar de voor- en nadelen van SVG voordat je afbeeldingen in dit bestandstype opslaat.
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 de 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.
Volg deze stappen in Adobe Photoshop:
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.
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.
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.
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.
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.
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.
Lees meer over dit andere populaire bestandstype voor webafbeeldingen en logo's.
Ontdek waarom JPEG is ontwikkeld met het oog op complexe digitale foto's.
Maak kennis met dit nieuwe type rasterbestand van Apple.
Ontdek dit veelgebruikte vectorbestandstype dat is ontwikkeld voor Adobe Illustrator.
Welk bestandstype wordt het meest gebruikt voor webontwerp?
Verdiep je in de afdrukmogelijkheden van beide bestandstypen.
Creëer prachtige vectorafbeeldingen en -illustraties.
7 dagen gratis, daarna € 24,19 per maand.
Ontwerp stijlvolle paginalay-outs voor drukwerk en digitale media.
7 dagen gratis, daarna € 24,19 per maand.
Ontvang de volledige verzameling creatieve apps en meer.
7 dagen gratis, daarna € 62,99 per maand.