TCB met SVG: Hoe SVG-bestanden te maken en te gebruiken op je website

Sommige mensen zeggen dat Elvis Presley de grootste artiest aller tijden was.

We zeggen dat het SVG-bestandsformaat een geduchte concurrent is.

Zoals je ziet, leverde Elvis altijd. Zijn persoonlijke mantra was “Zorg dragen voor zaken,” afgekort als TCB op zijn sieraden.

En dat zou je ook kunnen zeggen voor SVG-bestanden.

Ongeacht aan welk project je werkt, dit beeldformaat zal het werk doen. Deze bestanden zijn licht, schaalbaar en uitstekend voor toegankelijkheid. Je kunt ze zelfs bewerken met code.

Heb je nog overtuiging nodig? In deze zeer leesbare gids nemen we een kijkje naar het SVG-formaat en leggen we uit hoe je deze bestanden in je eigen projecten kunt gebruiken.

Klaar om te beginnen? Laten we wat minder praten en meer actie ondernemen!

De ABC’s Van SVG’s: Het Begrijpen Van Afbeeldingsbestanden

Stel je bouwt een website. Je wilt waarschijnlijk wat afbeeldingen hebben.

Welk bestandstype moet je gebruiken?

Je instinct is misschien JPEG of PNG. Misschien ga je los en gebruik je wat GIFs.

Maar… wat is het verschil? Nou, hier is een vergelijking van de gebruikelijke verdachten:

JPEG (Joint Photographic Experts Group)

• Voordelen: Kleinere bestandsgroottes, geweldig voor complexe afbeeldingen.
• Nadelen: Verliest kwaliteit bij comprimeren, geen transparantie.

PNG (Portable Network Graphics)

• Voordelen: Verliesvrije compressie, ondersteunt transparantie.
• Nadelen: Grotere bestanden dan JPEGs.

GIF (Graphics Interchange Format)

• Voordelen: Ondersteunt eenvoudige animaties, kleine bestandsgrootte.
• Nadelen: Beperkte kleuren, kan er gepixeld uitzien.

Deze formaten lijken divers. Het zijn echter allemaal voorbeelden van rasterafbeeldingen.

Raster- (of bitmap)afbeeldingen zijn geschilderd met nauwkeurig geplaatste pixels. Ze hebben vaste afmetingen, kleuren en vormen.

Deze bestandstypes zijn uitstekend voor het delen van afbeeldingen met veel details, zoals foto’s van hoge kwaliteit.

Het nadeel is dat je het originele beeld nooit kunt veranderen of uitrekken. Je kunt er alleen overheen schilderen of meer pixels toevoegen.

Waarom SVG’s Zo Nuttig Zijn

Het SVG (Scalable Vector Graphics)-formaat is anders.

Vectorbestanden bevatten een reeks tekstuele instructies over hoe een afbeelding op te bouwen. Deze bestanden zijn geschreven in XML (Extensible Markup Language).

Wanneer je een SVG-bestand probeert te laden, bekijkt je apparaat de instructies en bouwt op aanvraag de afbeelding.

Er zijn verschillende voordelen aan dit systeem:

• SVG’s kunnen naar elke grootte worden geschaald en zien er nog steeds perfect uit.
• Ze kunnen ook net als codebestanden worden bewerkt.
• Je kunt ze zelfs stylen met CSS.
• Omdat SVG’s uit tekst bestaan, hebben ze echt kleine bestandsgroottes.
• Dit betekent dat ze minder opslagruimte op je webserver innemen.
• En ze kunnen sneller laden dan rasterafbeeldingen.

Een ander voordeel van het gebruik van SVG’s is verbeterde toegankelijkheid. Je kunt deze bestanden lokaal op apparaten aanpassen, volgens de behoeften van de gebruiker, en schermlezers kunnen ze interpreteren.

Het nadeel van SVG’s is dat ze erg groot kunnen worden als je veel details toevoegt. Bovendien kun je ze niet op dezelfde manier optimaliseren als rasterafbeeldingen. Als je fotografie wilt delen, kun je waarschijnlijk beter een JPEG gebruiken.

Maar voor de meeste andere visuele inhoud is het SVG-formaat een sterke optie.

Functie	SVG	JPEG	PNG	GIF
Schaalbaarheid	Sterk ✅	Nee ❌	Nee ❌	Nee ❌
Bestandsgrootte	Meestal klein ✅	Kan klein zijn ✅	Vaak groot ❌	Klein voor eenvoudige afbeeldingen ✅
Transparantie	Jazeker ✅	Nee ❌	Jazeker ✅	Ja, maar beperkt ⚠️
Animatie	Zeker weten! ?	Nee ❌	Nee ❌	Alleen basis ⚠️
Geschikt voor	Grafieken, iconen, logo’s	Foto’s	Afbeeldingen die transparantie vereisen	Eenvoudige animaties
Bewerkbaarheid	Met code! ?	Nee ❌	Nee ❌	Nee ❌
Browserondersteuning	De meeste moderne browsers ✅	Alle browsers ✅	Alle browsers ✅	Alle browsers ✅

Veelvoorkomend Gebruik Voor SVG-Afbeeldingen

Hoewel SVG’s vrij veelzijdig zijn, verschijnen ze meestal in webdesign als:

• Pictogrammen: Van sociale media links tot winkelwagenknoppen, SVG-pictogrammen zien er scherp uit op elk apparaat.
• Logo’s: Als je jouw merklogo als een SVG opslaat, ziet het er perfect uit overal — van kleine mobiele schermen tot enorme reclameborden.
• Illustraties: Veel websites gebruiken nu SVG-illustraties in plaats van stockafbeeldingen. Zelfs wanneer de grafische afbeeldingen zeer gedetailleerd zijn, schalen ze perfect.
• Animaties: Ja, SVG’s kunnen bewegen! Je kunt ze animeren voor die extra flair op je website, zoals een draaiend logo of een dansend karakter.
• Infographics: Omdat SVG’s schaalbaar zijn, kun je ze ook gebruiken om interactieve datavisualisaties te bouwen. Heel gaaf!

Werken Met SVG’s: Creëren Of Kopiëren?

Oke, dat is genoeg lofzang. Het is tijd om aan het werk te gaan.

Als je SVG’s wilt integreren in je digitale projecten, moet je kant-en-klare ontwerpen pakken of je eigen grafische ontwerpen vanaf nul maken.

Gratis SVG’s Vinden

Het gebruiken van iemand anders zijn ontwerpen is de makkelijkere optie. En gelukkig zijn er duizenden SVG’s beschikbaar om online te downloaden.

Veel zijn gratis voor persoonlijke projecten, maar voor commercieel gebruik moet je mogelijk betalen.

Hier zijn enkele van onze favoriete bronnen:

• Font Awesome: Een populair pakket van SVG-iconen.
• Freepik: Enorme database van vectorafbeeldingen, illustraties en iconen.
• Lineicons: Pakket van meer dan 8.400 eenvoudige, schone iconen.
• Free SVG: Bibliotheek van volledig gratis SVG-illustraties.
• Open Doodles: Gratis kleurrijke, karakter-achtige illustraties van mensen.
• IconScout: Doorzoekbare bibliotheek van meer dan 9,5 miljoen assets, inclusief gratis en betaalde iconen, illustraties, logo’s en meer.
• DrawKit: Meerdere pakketten van 2D/3D-illustraties, gratis en premium.
• unDraw: Veel geweldige, gratis SVG-illustraties.

Onthoud dat je alle SVG’s die je downloadt kunt bewerken. Dus, je kunt gratis bestanden gebruiken als een startpunt voor je eigen creaties.

Hoe SVG-Bestanden Te Maken en Bewerken

Kun je niet vinden wat je online nodig hebt? Maak je geen zorgen. Het bewerken van SVG’s is een fluitje van een cent.

Hier is een snelle doorloop:

1. Kies Je Software

De gemakkelijkste manier om SVG’s te bewerken is met een vectorafbeeldingen-editor. Hier zijn enkele populaire opties:

• Adobe Illustrator ($$$): De zwaargewicht kampioen. Prijzig, maar krachtig.
• Inkscape (gratis): Het gratis alternatief dat indruk maakt.
• Figma ($): Geweldig voor samenwerkend ontwerpwerk.
• Sketch ($): Een lichter alternatief voor Illustrator, populair bij ontwerpers van interfaces.

We baseren de rest van deze handleiding op Inkscape, maar het proces ziet er in de meeste vectorbewerkingsapps heel vergelijkbaar uit.

2. Stel Je Canvas In

Als je helemaal opnieuw begint, moet je een canvas voor je werk maken. In Inkscape, ga naar Bestand > Nieuw en kies de afmetingen voor je nieuwe afbeelding.

Als je een bestaand SVG-document wilt bewerken, ga dan naar Bestand > Openen om de editor te starten.

3. Teken Je Ontwerp

Het belangrijkste gereedschap bij vectorbewerking is het Bezier-gereedschap. Je kunt het selecteren uit de werkbalk aan de linkerkant van je werkruimte. Het pictogram ziet eruit als een vulpen die een gebogen lijn tekent.

Deze tool stelt je in staat om met een paar klikken rechte lijnen en perfecte bochten te maken.

Elke vorm die je maakt bevat individuele paden en punten, die worden opgenomen in de onderliggende XML-code.

Met de Bezier-tool kun je eenvoudig teruggaan en deze punten en paden aanpassen nadat je ze hebt gemaakt. Zodra je tevreden bent met de structuur, voeg je je eigen kleuren toe via het Objecteigenschappen paneel.

Eigenschappen van objecten verschijnen in het rechtermenu.

Pro tip: Wil je dieper duiken in vectorbewerking? Inkscape heeft een geweldige bibliotheek met gratis tutorials recht hier.

4. Opslaan Als SVG

Zodra je tevreden bent met je grafische ontwerp, ga naar Bestand >Opslaan als, en kies SVG als je formaat.

Geef het een coole naam en klik op opslaan!

Hoe Voeg Je SVG’s Toe Aan Je Website

Je hebt je vector-meesterwerk gemaakt. Nu verdient de wereld het om het te zien. 

Je kunt SVG’s in de HTML van je website insluiten. Alles wat je nodig hebt is een <img> tag die naar je bestand wijst. Het zou er ongeveer zo uit moeten zien:

<img src="my-awesome-svg.svg" alt="Mijn Geweldige SVG">

Als alternatief kun je de XML-code van je SVG-bestand rechtstreeks in je webpagina invoegen met behulp van de <svg> tag.

Hier is een voorbeeld:

<svg width="200" height="200">
  <circle cx="50" cy="50" r="40" stroke="red" stroke-width="2" fill="green" />
</svg>

Deze code zal een mooie ronde knop maken, met een rode omtrek en een groen interieur.

SVG Inschakelen In WordPress

Het toevoegen van afzonderlijke afbeeldingen via HTML is een zeer langzaam proces. Je zou er de voorkeur aan kunnen geven om SVG’s te uploaden via je CMS (contentmanagementsysteem).

Maar er is een probleem voor WordPress-gebruikers.

Standaard ondersteunt WordPress geen SVG-uploads. Dit is omdat kwaadwillende gebruikers SVG’s kunnen gebruiken om malware te verspreiden.

De gemakkelijkste manier om SVG’s te activeren is door een plugin te installeren zoals Safe SVG of SVG Support. Deze tools controleren elke upload om er zeker van te zijn dat er niets vervelends verborgen zit.

Je kunt dan SVG’s uploaden en invoegen via de WordPress Media Bibliotheek. Navigeer simpelweg naar Media > Nieuw toevoegen, en kies de afbeeldingen die je wilt opnemen.

SVG’s Stijlen Met CSS

Als je SVG-bestanden insluit met de <svg> tag, kun je met CSS aanpassen hoe je afbeeldingen eruit zullen zien.

Stel je hebt een groene afbeelding gemaakt, maar je wilt dat deze rood lijkt op je website. In plaats van een nieuwe kopie te maken, kun je gewoon de volgende stijl schrijven:

svg {
  stroke: red;
  fill: blue;
}

Het stroke-attribuut bepaalt welke kleur de omtrek van je grafiek moet zijn. Ondertussen regelt het fill-attribuut de kleur tussen de lijnen.

Pro tip: Er zijn veel meer attributen om mee te spelen.

Je SVG Afbeeldingen Responsive Maken

SVG-bestanden zijn oneindig schaalbaar, dus je kunt ze gebruiken in responsieve ontwerpen. Het vereist slechts een beetje CSS-magie.

Hier is een stapsgewijze handleiding:

1. Voeg je afbeelding in met de <svg>-tag. Dit betekent dat je wijzigingen kunt aanbrengen via CSS.

2. Verwijder de hoogte- en breedteafmetingen. Hierdoor past je SVG zich aan zijn container aan. Zorg ervoor dat het viewBox gedeelte behouden blijft. Het zou er ongeveer zo uit moeten zien:

<svg viewBox="0 0 20 20" xmlns="https://example.com/file.svg">
  <!-- svg content here -->
</svg>

3. Stel de maximale grootte van je SVG in. Dit voorkomt dat de afbeelding buiten zijn container valt. Bijvoorbeeld:

svg {
  display: inline-block;
  max-width: 100%;
}

En je bent klaar!

Professionele tip: Als dit allemaal wat technisch klinkt, probeer dan ZipWP. Het is een door AI aangedreven websitebouwer die de styling voor je regelt.

SVG Masterclass: 4 Gevorderde Tips

We hebben de basis van het maken en delen van SVG’s behandeld. Om deze gids af te ronden, laten we eens kijken naar enkele geavanceerde technieken.

1. Animeer Je SVG-Grafieken

Wist je dat je jouw SVG’s kunt laten dansen? Ja, animatie werkt op dit bestandstype.

Zoals bij de originele afbeelding, kun je je grafieken animeren met eenvoudige XML-code. Voeg gewoon een <animate> element toe binnen je vorm om de beweging te starten.

Het zou er ongeveer zo uit moeten zien:

<svg width="100%" height="auto" xmlns="https://example.com/file.svg">
  <circle cx="50" cy="50" r="50" style="fill:red;">
    <animate
      attributeName="cx"
      begin="0s"
      dur="5s"
      from="30"
      to="90%"
      repeatCount="indefinite" />
  </circle>
</svg>

Je kunt deze techniek gebruiken om een beetje beweging aan iconen toe te voegen, een pagina-laadindicator te creëren of zelfs geanimeerde advertenties te ontwerpen.

2. Gebruik SVG-sprites Voor Snellere Laadtijden

SVG sprites zijn als een ‘greatest hits’-album voor je iconen. In plaats van tientallen losse icoonbestanden, bundel je ze allemaal in één SVG.

Dit betekent dat je slechts één HTTP-verzoek per pagina hoeft te maken, ongeacht hoeveel iconen je gebruikt. Het is een geweldige manier om laadtijden te verminderen en bandbreedte te besparen.

Veel iconenpakketten worden tegenwoordig in spritevorm geleverd. Je kunt ook je eigen maken.

Om een specifiek pictogram op je site te integreren, lokaliseer je eenvoudig het gebied van het sprite-bestand waar dat pictogram is opgeslagen. Dit kun je doen met behulp van basis CSS-code:

#button {
  width: 20px;
  height: 20px;
  background: url('sprite.svg') -128px 0;
}

Professionele tip: We raden aan om een online tool zoals CSS Sprites Generator te gebruiken om de juiste afstanden te berekenen.

3. Optimaliseer Je SVG-bestanden Voor Betere Prestaties

Hoewel SVG-bestanden vrij klein beginnen, kun je ze optimaliseren om ze nog lichter te maken.

Zo doe je het:

• Gebruik een tool zoals SVGOMG. Ja, dat bestaat echt. Het is een geweldige kleine web app die je toestaat SVG’s te comprimeren zonder kwaliteitsverlies.
• Vereenvoudig paden waar mogelijk. Ingewikkelde vormen kunnen veranderen in grote hoeveelheden XML-code. Veel vectorafbeeldingseditors hebben gereedschappen voor deze taak. (Het bevindt zich onder Pad > Vereenvoudigen in Inkscape).
• Overweeg lazy loading voor SVG’s onderaan de pagina. Door het laden van afbeeldingen lager op de pagina uit te stellen, kun je de impact van meerdere afbeeldingen verminderen.

4. Maak Je Grafische Elementen Toegankelijk

Omdat SVG’s op tekst gebaseerde bestanden zijn, zijn ze gemakkelijk te begrijpen voor schermlezers en andere hulpsoftware.

Met dat gezegd, zijn er nog stappen die je kunt nemen om ze nog toegankelijker te maken:

• Voeg <title> en <desc> toe aan je SVG-bestanden. Deze elementen bieden beschrijvingen van de grafiek, wat vooral handig is voor gebruikers die afhankelijk zijn van schermlezers.
• Voeg een role="img" attribuut toe. Dit informeert ondersteunende technologieën dat de SVG een afbeelding is.
• Vul het aria-labelledby attribuut in. Dit moet verwijzen naar de ID’s van de <title> en <desc> elementen, en ze koppelen als labels voor de afbeelding.
• Voor complexere SVG’s, geef alt-tekst. Beschrijf de afbeelding, zodat schermlezers minder te interpreteren hebben.

Een extra voordeel van het super-toegankelijk maken van SVG’s is dat je ze ook optimaliseert voor zoekopdrachten. SEO-overwinning!

Zorg Voor De Zaak

Net zoals Elvis zorgde voor zaken op het podium, kunnen SVG’s je helpen zaken te regelen op je website. Deze veelzijdige, schaalbare grafieken bieden een wereld aan mogelijkheden voor webontwerpers en ontwikkelaars.

Van strakke logo’s en responsieve iconen tot interactieve animaties en toegankelijke visuals, SVG’s zijn de onbezongen helden van modern webdesign.

Nadat je deze gids hebt bekeken, moet je je behoorlijk zelfverzekerd voelen over het gebruik van SVG’s in je projecten. Maar is jouw hosting wel opgewassen tegen de test?

Als je wilt garanderen dat je site een hoop hoogwaardige grafische afbeeldingen aankan, overweeg dan over te schakelen naar DreamHost.

Onze hosting plannen komen allemaal met ongemeten bandbreedte (uitgezonderd cloud hosting), wat betekent dat je je geen zorgen hoeft te maken als je site veel bezoekers krijgt.

Leuke Veelgestelde Vragen Over SVG’s

Als je nog steeds nieuwsgierig bent naar SVG’s, is dat helemaal prima. We hebben meer kennis om te delen. Hier is een snel overzicht van enkele vragen die we mogelijk hebben gemist:

Hoe converteer je SVG naar JPEG? 

Je kunt dit snel doen met een desktop vector editor of een online tool zoals CloudConvert.

Kun je SVG’s direct bewerken in een teksteditor?

Ja! SVG’s zijn op XML gebaseerd, dus je kunt hun code rechtstreeks aanpassen.

Is SVG duidelijker dan PNG?

In de meeste gevallen wel. Dit is vooral merkbaar als je probeert een PNG-bestand te vergroten.

Kun je SVG’s bewerken met JavaScript?

Ja, dat kan je. Dit is handig voor dynamische wijzigingen op basis van gebruikersinvoer.

Worden SVG’s ondersteund in alle browsers?

SVG’s worden ondersteund in alle moderne webbrowsers, inclusief Chrome, Firefox, Safari en Edge.

Deze pagina bevat affiliate links. Dit betekent dat we een commissie kunnen verdienen als je diensten koopt via onze link zonder extra kosten voor jou.