SVG-bestanden.

Wat je leert.

• Wat is een SVG-bestand?
• Geschiedenis van het SVG-bestand
• Waarvoor worden SVG-bestanden gebruikt?.
• Voor- en nadelen van SVG-bestanden
• Een SVG-bestand openen
• Een SVG-bestand maken en bewerken
• Veelgestelde vragen over SVG

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.

In 1994 ontwikkelde de Nederlandse softwareontwerper Martijn Koster de SVG-bestandsindeling.

SVG dateert van eind jaren '90, toen het World Wide Web Consortium (W3C) ontwikkelaars uitnodigde 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.
• SVG ondersteunt interactiviteit met behulp van scripttalen zoals JavaScript om dynamische en meeslepende graphics te maken.
• SVG is een XML-taal, die eenvoudige bewerking en integratie met andere webtechnologieën biedt.

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:

1. Maak een afbeelding in Photoshop en klik vervolgens op Bestand > Exporteren > Exporteren als.
2. Klik in het venster dat verschijnt op het vervolgkeuzemenu Indeling en selecteer SVG.
3. 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.

Een SVG-bestand maken in Illustrator

Volg deze stappen in Adobe Illustrator:

1. Zodra je een illustratie hebt gemaakt in Illustrator, selecteer je de tekst om omtrekken te maken. Zo voorkom je problemen met lettertypevervanging wanneer je je illustratie bekijkt op andere computers. Selecteer Tekst – Letteromtrekken maken
2. Sla het bestand op, selecteer Bestand > Opslaan als. Klik in het venster dat verschijnt op het vervolgkeuzemenu Indeling en selecteer SVG.
3. Je kunt het bewerkte SVG-bestand ook exporteren door Bestand > Exporteren > Exporteren als te kiezen en daarna SVG te selecteren als de indeling. Hiermee kun je exportinstellingen aanpassen zoals precisie en compatibiliteit.

Een SVG-bestand bewerken in Illustrator

1. Selecteer het SVG-bestand en open het in Illustrator. Of importeer het SVG-bestand in je bestaande Illustrator-document met Bestand > Plaatsen.
2. Gebruik de selectietool (of de tool Direct selecteren) om afzonderlijke paden, vormen of groepen in het SVG-bestand te selecteren. Je kunt paden verkleinen of vergroten, vormen, transformeren of bewerken en kleuren of effecten toevoegen