SVG-bestandsformaat: Alles Wat Je Moet Weten in 2026

Geschiedenis van SVG

Oorsprong

• 1999: SVG 1.0-specificatie gepubliceerd door het W3C
• 2001: SVG 1.1 wordt W3C-aanbeveling
• 2016: Begin van SVG 2-ontwikkeling
• 2025: Universele adoptie op alle webplatforms

Evolutie

SVG is geëvolueerd van een gespecialiseerd formaat naar een webstandaard, nu ondersteund door alle moderne browsers en designtools.

Hoe SVG werkt

Op XML gebaseerde structuur

SVG-bestanden zijn geschreven in XML, waardoor ze door mensen leesbaar en bewerkbaar zijn:

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" fill="#1cb721" />
  <rect x="10" y="10" width="30" height="30" fill="#000" />
</svg>

Vectorwiskunde

In plaats van pixels gebruikt SVG:

• Paden: Bézier-curven en lijnen
• Vormen: Cirkels, rechthoeken, polygonen
• Tekst: Echte tekstelementen
• Kleuren: Vul- en lijndefnities

Voordelen van het SVG-formaat

1. Oneindige schaalbaarheid

SVG-graphics zien er perfect uit op elk formaat:

• Favicon (16x16 pixels)
• Mobiele iconen (128x128 pixels)
• Desktopschermen (elk formaat)
• Grootformaat afdrukken (enorme afmetingen)

2. Kleine bestandsgroottes

Voor eenvoudige graphics zijn SVG-bestanden doorgaans:

• 50-80% kleiner dan PNG
• 60-90% kleiner dan JPEG
• Nog kleiner met compressie (SVGZ)

Vergelijkingsvoorbeeld:

Logo als PNG (2000x2000): 250 KB
Logo als SVG: 15 KB
Besparing: 94%

3. Bewerkbaar en programmeerbaar

SVG-bestanden kunnen:

• Bewerkt worden met teksteditors
• Gestyld worden met CSS
• Geanimeerd worden met CSS of JavaScript
• Dynamisch gegenereerd worden

4. SEO-vriendelijk

Zoekmachines kunnen:

• Tekst binnen SVG lezen
• SVG-inhoud indexeren
• Semantische structuur begrijpen
• Ingebedde metadata doorzoeken

5. Toegankelijkheid

SVG ondersteunt:

• Schermlezers
• Toetsenbordnavigatie
• ARIA-labels
• Semantische markup

6. Prestatievoordelen

• Snellere laadtijden
• Verminderd bandbreedtegebruik
• Betere Core Web Vitals-scores
• Verbeterde gebruikerservaring

"

SVG is niet zomaar een afbeeldingsformaat — het is een resolutie-onafhankelijk grafisch platform dat design en code verbindt.

SVG vs andere afbeeldingsformaten

SVG vs PNG

SVG vs JPEG

SVG vs WebP

SVG-bestandsstructuur

Basiselementen

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <!-- Cirkel -->
  <circle cx="50" cy="50" r="40" fill="blue"/>

  <!-- Rechthoek -->
  <rect x="10" y="10" width="30" height="30" fill="red"/>

  <!-- Pad -->
  <path d="M10 10 L 90 90" stroke="black" stroke-width="2"/>

  <!-- Tekst -->
  <text x="50" y="50" font-size="16">Hallo SVG</text>
</svg>

Geavanceerde functies

Verlopen:

<defs>
  <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
    <stop offset="0%" style="stop-color:rgb(255,255,0)"/>
    <stop offset="100%" style="stop-color:rgb(255,0,0)"/>
  </linearGradient>
</defs>
<rect fill="url(#grad1)" x="0" y="0" width="100" height="100"/>

Filters:

<filter id="blur">
  <feGaussianBlur in="SourceGraphic" stdDeviation="5"/>
</filter>
<circle cx="50" cy="50" r="40" filter="url(#blur)"/>

SVG-bestanden maken

1. Vector designsoftware

• Adobe Illustrator: Industriestandaard
• Inkscape: Gratis en open source
• Figma: Browser-gebaseerd design
• Sketch: Designtool alleen voor Mac

2. Code-editors

Schrijf SVG direct in:

• VS Code
• Sublime Text
• Atom
• Elke teksteditor

3. Online converters

Converteer PNG/JPEG naar SVG met:

• VectoSolve: AI-aangedreven conversie
• Online trace-tools
• Geautomatiseerde vectorisatiediensten

4. Programmeerbibliotheken

Genereer SVG met:

• D3.js (JavaScript)
• Raphael.js
• Snap.svg
• Python-bibliotheken (svgwrite)

SVG op het web gebruiken

Inline SVG

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="#1cb721"/>
</svg>

Voordelen:

• Volledige CSS/JS-controle
• Geen HTTP-verzoek
• Animeerbaar

IMG-tag

<img src="logo.svg" alt="Logo" width="200">

Voordelen:

• Eenvoudige implementatie
• Cachebaar
• Lazy loading-ondersteuning

CSS-achtergrond

.element {
  background-image: url('pattern.svg');
}

Object/Embed-tag

<object data="graphic.svg" type="image/svg+xml"></object>

SVG-optimalisatie

Optimalisatietechnieken

1. Onnodige metadata verwijderen
2. Paden vereenvoudigen
3. Decimale precisie verminderen
4. Verborgen elementen verwijderen
5. Vergelijkbare paden combineren
6. Verkorte attributen gebruiken

Optimalisatietools

• SVGO: Command-line optimizer
• SVGOMG: Web-gebaseerde SVGO-interface
• VectoSolve: Ingebouwde optimalisatie
• ImageOptim: Mac-applicatie

Vóór optimalisatie (156 bytes):

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <circle cx="50.123456" cy="50.789012" r="40.555555" fill="#1cb721" stroke="none"/>
</svg>

Na optimalisatie (98 bytes):

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <circle cx="50" cy="51" r="41" fill="#1cb721"/>
</svg>

SVG-animatie

CSS-animaties

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

svg circle {
  animation: rotate 2s infinite linear;
  transform-origin: center;
}

JavaScript-animatie

const circle = document.querySelector('circle');
let radius = 40;

setInterval(() => {
  radius = radius === 40 ? 50 : 40;
  circle.setAttribute('r', radius);
}, 1000);

SMIL-animatie (native SVG)

<circle cx="50" cy="50" r="40">
  <animate attributeName="r" from="40" to="50" dur="1s" repeatCount="indefinite"/>
</circle>

SVG-toegankelijkheid

Best practices

<svg role="img" aria-labelledby="logo-title logo-desc">
  <title id="logo-title">Bedrijfslogo</title>
  <desc id="logo-desc">Een groene cirkel die ons milieuvriendelijke merk vertegenwoordigt</desc>
  <!-- SVG-inhoud -->
</svg>

Focusbeheer

svg:focus {
  outline: 2px solid blue;
}

Browserondersteuning

Huidige ondersteuning (2025)

• Chrome/Edge: Volledige ondersteuning
• Firefox: Volledige ondersteuning
• Safari: Volledige ondersteuning
• Mobiele browsers: Volledige ondersteuning
• IE 11: Gedeeltelijke ondersteuning (verouderd)

Fallback-strategieën

<object data="logo.svg" type="image/svg+xml">
  <img src="logo.png" alt="Logo fallback">
</object>

SVG in verschillende contexten

E-mail

Beperkte ondersteuning; gebruik met PNG-fallback:

<img src="logo.svg" alt="Logo" onerror="this.src='logo.png'">

Social media

• Sommige platforms verwijderen SVG
• Gebruik PNG voor og:image
• Test op elk platform

Afdrukken

SVG is perfect voor afdrukken:

• Oneindige resolutie
• Geen pixelvorming
• Kleine bestandsgroottes
• Industriestandaard ondersteuning

Veelvoorkomende SVG-problemen en oplossingen

Probleem: SVG wordt niet weergegeven

Oorzaken:

• Ontbrekend xmlns-attribuut
• Onjuist MIME-type
• Browsercompatibiliteit

Oplossing:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <!-- inhoud -->
</svg>

Probleem: Wazige weergave

Oplossing: Gebruik gehele getallen voor coördinaten

Probleem: Te groot bestand

Oplossing: Optimaliseer met SVGO of verminder de complexiteit

Converteren naar SVG

Van PNG/JPEG

Gebruik VectoSolve voor:

• Automatische AI-conversie
• Hoogwaardige resultaten
• Batchverwerking
• Kleurbewerking

Van PDF

• Open in Illustrator
• Exporteer als SVG
• Of gebruik online converters

Van andere formaten

De meeste vectorformaten (AI, EPS) exporteren eenvoudig naar SVG.

Toekomst van SVG

Opkomende trends

• Verbeterde animatiemogelijkheden
• Betere 3D-integratie
• Verbeterde compressie (SVG 2)
• Bredere adoptie in AR/VR
• Meer AI-gegenereerde content

Conclusie

SVG is het ultieme formaat voor schaalbare graphics in 2025. De combinatie van oneindige schaalbaarheid, kleine bestandsgroottes, bewerkbaarheid en webprestaties maakt het onmisbaar voor modern design.

Of je nu logo's, iconen, illustraties of datavisualisaties maakt, het begrijpen van SVG zal je workflow en outputkwaliteit verbeteren.

Converteer je afbeeldingen vandaag nog naar SVG met VectoSolve en ervaar de voordelen van echte vectorgraphics.

Bronnen en verder lezen

• MDN Web Docs: SVG — Volledige technische referentie voor het SVG-formaat en zijn XML-structuur
• W3C SVG 2 Specificatie — De officiële W3C-standaard voor SVG-elementen, -attributen en -renderingmodel
• CSS-Tricks: SVG gebruiken — Praktische gids voor het insluiten, stylen en optimaliseren van SVG op het web
• web.dev: Afbeeldingsoptimalisatie — Google's aanbevelingen voor het kiezen van het juiste afbeeldingsformaat voor webprestaties