Wat is het SVG-formaat? Complete technische gids voor 2026

Het W3C definieert SVG als "een taal voor het beschrijven van tweedimensionale graphics in XML." Omdat het XML is, is elke SVG een gestructureerd document dat je kunt openen in een teksteditor, manipuleren met JavaScript en valideren tegen een schema. Geen ander gangbaar afbeeldingsformaat biedt dit.

"

SVG is het native afbeeldingsformaat van het web. Het leeft niet alleen op het web — het is het web.

SVG-anatomie: XML-structuur en viewBox

Elke SVG begint met een root <svg>-element. Het begrijpen van de attributen is de sleutel tot het beheersen van het formaat.

<svg xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 200 100"
     width="400" height="200">
  <rect x="10" y="10" width="180" height="80" rx="8"
        fill="#0f172a" stroke="#38bdf8" stroke-width="2"/>
  <text x="100" y="58" text-anchor="middle"
        fill="#f8fafc" font-size="18">Hallo, SVG!</text>
</svg>

• xmlns declareert de SVG-namespace — vereist in zelfstandige .svg-bestanden, optioneel bij inline in HTML5
• viewBox="0 0 200 100" definieert het interne coördinatensysteem: oorsprong bij (0,0), 200 eenheden breed, 100 hoog
• width/height stellen de rendergrootte in; de browser mapt de viewBox op deze viewport

De viewBox ontkoppelt de coördinatenruimte van pixeldimensies. Een icoon met viewBox="0 0 24 24" rendert identiek op 16px of 512px — de browser schaalt het coördinatensysteem. Daarom schaalt SVG oneindig.

SVG gebruikt een coördinatensysteem met Y-as naar beneden wijzend (net als CSS en Canvas), oorsprong linksboven.

Geschiedenis: W3C, browseroorlogen en moderne adoptie

• 1998: Het W3C vormt de SVG-werkgroep, waarbij Adobe's PGML- en Microsoft's VML-voorstellen worden samengevoegd
• 2001: SVG 1.0 wordt een W3C-aanbeveling
• 2003: SVG 1.1 verfijnt en modulariseert de specificatie
• 2011: SVG 1.1 Tweede Editie — de versie die de meeste browsers volledig implementeren
• 2018: SVG 2.0 bereikt Candidate Recommendation, afgestemd op CSS en HTML

De IE-saga

IE 8 en lager hadden nul SVG-ondersteuning. IE 9 (2011) leverde basis-rendering maar met hiaten: geen SMIL-animatie, beperkte filters, viewBox-eigenaardigheden. Het echte keerpunt kwam toen Microsoft IE in 2022 met pensioen stuurde ten gunste van Edge (Chromium). Vandaag heeft SVG 98,5% wereldwijde browserondersteuning.

SVG-elementreferentie

Inline SVG vs img vs CSS background vs object

Kies inline wanneer je hover-states, animatie of JS-interactie nodig hebt. Kies <img> voor statische assets die je wilt cachen. Gebruik CSS background alleen voor decoratie. De <object>-benadering is zelden de beste keuze in 2026.

Toegankelijkheid: role, aria-label, title, desc

SVG heeft eersteklas toegankelijkheid ingebouwd in de specificatie:

<svg role="img" aria-labelledby="logoTitle logoDesc"
     viewBox="0 0 120 40">
  <title id="logoTitle">VectoSolve Logo</title>
  <desc id="logoDesc">Geometrisch V en S lettermonogram in blauw verloop</desc>
  <path d="M10 35L30 5L50 35Z" fill="url(#grad)"/>
</svg>

• role="img" — vertelt hulptechnologie dat dit een afbeelding is
• <title> — de toegankelijke naam (equivalent van alt op <img>)
• <desc> — langere beschrijving voor complexe graphics
• aria-labelledby — linkt naar <title>- en <desc>-elementen
• aria-hidden="true" — gebruik op puur decoratieve SVG's om ze voor schermlezers te verbergen

Animatie: SMIL, CSS, JavaScript, Web Animations API

SMIL (SVG's native animatie)

<circle cx="50" cy="50" r="20" fill="#ef4444">
  <animate attributeName="r" values="20;35;20" dur="1.5s" repeatCount="indefinite"/>
</circle>

CSS-animaties

Pas @keyframes, transition en transform toe op SVG-elementen — hetzelfde CSS dat je al kent.

JavaScript-bibliotheken

GSAP, Anime.js en Snap.svg bieden timeline-gebaseerde controle voor complex pad-morphing en opeenvolgende animaties.

Web Animations API

De moderne, op standaarden gebaseerde benadering die JS-kracht combineert met CSS-prestaties:

element.animate(
  [{ transform: 'rotate(0deg)' }, { transform: 'rotate(360deg)' }],
  { duration: 2000, iterations: Infinity }
);

Prestatie-optimalisatie

SVG's uit designtools zijn opgeblazen — editormetadata, redundante groepen, excessieve decimale precisie.

Belangrijke technieken: editormetadata verwijderen, coördinaatprecisie reduceren tot 1-2 decimalen, geneste <g>-elementen afvlakken, viewBox gebruiken in plaats van vaste afmetingen, GZIP/Brotli inschakelen (SVG comprimeert uitzonderlijk goed), en automatiseren met de optimizer van VectoSolve.

Aan de slag met SVG

VectoSolve biedt AI-gestuurde tools voor de complete SVG-workflow:

• Raster naar vector converteren — upload PNG/JPG, krijg schone geoptimaliseerde SVG
• Visueel bewerken — gebruik de SVG-editor om paden en kleuren aan te passen
• Optimaliseren — laat bestanden door de optimizer lopen om ballast te verwijderen

SVG is de native grafische taal van het web — open, gestandaardiseerd, toegankelijk, animeerbaar en performant. In 2026 is SVG-vaardigheid niet optioneel. Het is fundamenteel.

Bronnen en verder lezen

• MDN Web Docs: SVG — Uitgebreide referentie voor elk SVG-element, -attribuut en -API
• W3C SVG 2 Specificatie — De officiële W3C-standaard die SVG-syntaxis, rendering en interactiviteit definieert
• CSS-Tricks: Using SVG — Praktische gids voor het insluiten, stylen en optimaliseren van SVG's op het web
• web.dev Performance — Google's bron over beeldoptimalisatie en Core Web Vitals
• Smashing Magazine — Diepgaande artikelen over SVG-toegankelijkheid, animatie en best practices