SVG: wat het is, kernbegrippen en gebruik in webontwikkeling

Wat is SVG?

SVG — een vectorafbeeldingsformaat gebaseerd op XML, ontstaan in 2001 als W3C-aanbeveling. In tegenstelling tot rasterformaten beschrijft SVG een afbeelding via geometrische primitieven: punten, lijnen, curves en veelhoeken. Een SVG-bestand is een gewoon XML-tekstdocument dat met standaardtools kan worden gelezen, bewerkt en gecomprimeerd.

De architectuur van SVG omvat verschillende kernconcepten. viewBox definieert een virtueel coördinatenstelsel, onafhankelijk van de werkelijke afmetingen van het element. Bijvoorbeeld viewBox="0 0 100 100" creëert een vierkant raster van 100×100, waarbinnen alle coördinaten vastliggen. Bij verandering van de breedte of hoogte van de container wordt de inhoud proportioneel geschaald.

Volgens de W3C SVG 2 Specification ondersteunt de moderne versie van SVG verlopen, masks, filters, tekst met willekeurige positionering, interactiviteit via JavaScript en animatie via CSS en SMIL. SVG is in de DOM geïntegreerd als een volwaardig HTML-element, waardoor elk grafisch primitief programmatisch kan worden beheerd.

In mobiele ontwikkeling wordt SVG ook gebruikt in iOS via UIGraphicsImageRenderer en in Android via VectorDrawable — beide formaten converteren SVG-achtige beschrijvingen naar hardwareversnelde rasters op de GPU.

Geschiedenis en ontwikkeling van het SVG-formaat

SVG 1.0 werd in 2001 een W3C-aanbeveling, SVG 1.1 in 2003, SVG 2.0 is sinds 2012 in ontwikkeling. De belangrijkste innovatie van SVG 2 is diepere integratie met CSS, ondersteuning voor compositing en blending modes, en de mogelijkheid om SVG in HTML te gebruiken zonder namespace-prefixen.

Hoewel SVG 2 nog geen Recommendation-status heeft bereikt, ondersteunen moderne browsers al het grootste deel van de functionaliteit. Chrome, Safari, Firefox en Edge hebben vrijwel volledige ondersteuning voor SVG 1.1 en een aanzienlijk deel van SVG 2.

Basiselementen van SVG

SVG biedt een set elementen voor het beschrijven van tweedimensionale afbeeldingen. Elk element heeft attributen die de positie, grootte en visuele weergave bepalen. Attributen kunnen worden opgegeven als XML-attributen of via CSS-eigenschappen.

• <rect> — rechthoek met attributen x, y, width, height, rx, ry (hoekafronding).
• <circle> — cirkel met attributen cx, cy (midden) en r (straal).
• <ellipse> — ellips met attributen cx, cy, rx, ry.
• <line> — lijnstuk met attributen x1, y1, x2, y2.
• <polyline> — gebroken lijn met attribuut points (coördinatenlijst).
• <polygon> — gesloten veelhoek met attribuut points.
• <path> — willekeurig contour met attribuut d (commando's: M, L, C, Q, A, Z).
• <text> — tekstelement met attributen x, y, font-size, font-family.

Het path-element — het krachtigste en meest flexibele SVG-element. Het attribuut d bevat een reeks commando's: M (moveTo), L (lineTo), C (cubic Bezier curve), Q (quadratic Bezier curve), A (arc), Z (close path). Elk commando heeft een absolute of relatieve vorm (hoofdletter of kleine letter).

SVG ondersteunt ook het groeperen van elementen via <g>. Een groep erft visuele attributen (fill, stroke, transform) naar alle onderliggende elementen. Dit maakt het mogelijk om een uniforme stijl toe te passen op een hele set vormen en hun positie via één transform te beheren.

SVG vs rasterafbeeldingen: vergelijking van formaten

Het belangrijkste verschil tussen SVG en rasterformaten (JPEG, PNG, WebP) — de manier waarop informatie wordt opgeslagen. Raster slaat de kleur van elke pixel op in een raster met vaste grootte. SVG slaat wiskundige commando's op voor het reproduceren van vormen. Dit verschil bepaalt alle voor- en nadelen van de formaten.

Volgens HTTP Archive, 2025 gebruikt 68% van de websites SVG voor pictogrammen, 34% voor illustraties en 22% voor logo's. De gemiddelde grootte van een SVG-pictogram is 0.5–2 KB, terwijl een rasterpictogram van vergelijkbare kwaliteit 5–20 KB in PNG-formaat is.

Voor foto's en complexe rasterafbeeldingen is SVG niet geschikt — de omvang van de XML-beschrijving zal die van een equivalente JPEG overschrijden. Aanbevolen toepassingsgebied van SVG: pictogrammen, logo's, illustraties, schema's, grafieken, interface-elementen met adaptief ontwerp.

Wanneer SVG kiezen en wanneer rasterformaat

SVG — optimale keuze voor interface-elementen die scherp moeten zijn op Retina-schermen en bij elke browserschaal. Raster — voor foto's, complexe texturen en afbeeldingen met miljoenen kleuren, waar een vectorbeschrijving onnodig complex zou zijn.

Hybride aanpak — combinatie van SVG voor interface-elementen en WebP/AVIF voor fotocontent — geeft de beste balans tussen kwaliteit en laadprestaties van de pagina.

Inline SVG en styling via CSS

Inline SVG — het direct inbedden van SVG-opmaak in het HTML-document, niet als apart bestand via <img> of background-image. Het voordeel van inline SVG is dat SVG-elementen deel worden van de DOM en gestyled kunnen worden via CSS, beheerd via JavaScript en geanimeerd zonder extra serververzoeken.

In tegenstelling tot <img src="icon.svg">, waar SVG geïsoleerd is in de shadow DOM, erft inline SVG de kleuren en lettertypen van het bovenliggende document. Dit maakt het bijvoorbeeld mogelijk om de kleur van een pictogram bij hover te wijzigen via de CSS-pseudoklasse :hover zonder een apart bestand voor elke status te laden.

Volgens CSS-Tricks is inline SVG de aanbevolen manier om pictogrammen te gebruiken in moderne webapplicaties. CSS-eigenschappen fill, stroke, stroke-width worden rechtstreeks op SVG-elementen toegepast. Voor aanpassing via CSS is het belangrijk dat in de originele SVG fill en stroke niet als inline-attributen zijn ingesteld — anders kan CSS ze niet overschrijven.

• Voordelen: styling via CSS, beheer via JS, geen HTTP-verzoeken, aanpasbaarheid van viewBox.
• Nadelen: toename van HTML-paginaomvang, onmogelijkheid om apart van HTML te cachen.
• Alternatief: SVG-sprites — meerdere SVG's in één bestand combineren en <use href="#id"> gebruiken.

SVG-sprites lossen het cacheprobleem op: alle pictogrammen worden in één bestand verzameld, de browser laadt het eenmaal, en afzonderlijke pictogrammen worden via <use> met vermelding van de id van het benodigde element in de sprite verbonden.

SVG-animatie: CSS en SMIL

CSS SVG-animatie — de meest voorkomende en efficiënte manier om vectorafbeeldingen in de browser te animeren. CSS-eigenschappen zoals transform, opacity en fill worden op SVG-elementen toegepast net als op HTML-elementen. Voor animatie langs een willekeurig pad wordt de CSS-eigenschap offset-path gebruikt.

SMIL (Synchronized Multimedia Integration Language) — een in SVG ingebouwd animatiemechanisme, onafhankelijk van CSS. De elementen <animate>, <animateTransform> en <animateMotion> maken het mogelijk om willekeurige SVG-attributen te animeren zonder JavaScript en CSS. SMIL-animatie is gegarandeerd gesynchroniseerd met de framerate van de browser.

Volgens MDN Web Docs wordt SMIL ondersteund in alle moderne browsers, maar CSS-animatie wordt als voorspelbaarder en efficiënter beschouwd. Het belangrijkste scenario voor SMIL — animatie van attributen die niet via CSS toegankelijk zijn, bijvoorbeeld d (path) van het element <path>.

JavaScript + requestAnimationFrame biedt maximale controle over SVG-animatie. Webontwikkelaars gebruiken de bibliotheken GSAP en Anime.js voor complexe animatiereeksen met tijdlijnen en easing-functies die moeilijk te realiseren zijn met pure CSS.

Codevoorbeelden: SVG-afbeeldingen maken

Eerste voorbeeld — een eenvoudig huisicoon met behulp van basis SVG-elementen. Alle vormen zijn rect en polyline:

<!-- Inline SVG icon -->
<svg viewBox="0 0 100 100" width="48" height="48" xmlns="http://www.w3.org/2000/svg">
  <rect x="20" y="50" width="60" height="40" fill="#4A90D9" />
  <rect x="35" y="65" width="30" height="25" fill="#fff" />
  <polyline points="10,50 50,15 90,50" fill="none" stroke="#4A90D9" stroke-width="6" />
</svg>

Tweede voorbeeld — rotatieanimatie van een loader via CSS. Er wordt <circle> gebruikt met het attribuut stroke-dasharray om een onderbroken contour te maken:

<!-- CSS animated spinner -->
<svg class="spinner" viewBox="0 0 50 50" width="40" height="40">
  <circle cx="25" cy="25" r="20" fill="none"
    stroke="#4A90D9" stroke-width="4"
    stroke-dasharray="125.6 31.4" />
</svg>

<style>
  .spinner circle {
    animation: spin 1.5s linear infinite;
    transform-origin: center;
  }
  @keyframes spin {
    to { transform: rotate(360deg); }
  }
</style>

Derde voorbeeld — path-animatie via de bibliotheek GSAP voor het vloeiend tekenen van een contour. GSAP werkt met het attribuut stroke-dashoffset en creëert het effect van het verschijnen van een lijn:

// Pad tekenen met GSAP
import gsap from "gsap";

const path = document.querySelector("#myPath");
const length = path.getTotalLength();

gsap.set(path, {
    strokeDasharray: length,
    strokeDashoffset: length
});

gsap.to(path, {
    strokeDashoffset: 0,
    duration: 2,
    ease: "power2.out"
});