Wat is SVG? Gids voor het vectorformaat

SVG is een afbeeldingsformaat dat uit tekeninstructies bestaat in plaats van pixels. Wordt een logo, icoon of grafiek als SVG opgeslagen, dan bevat het bestand opdrachten als "teken een curve van dit punt naar dat punt en vul die met deze kleur". Daarom blijft SVG op elk formaat scherp, is het vaak piepklein en kun je het in een teksteditor openen en bewerken. Dit artikel behandelt de plaats van SVG tussen de W3C-normen, de opbouw van het bestand, de ondersteuning in browsers en software, de beveiligingsrisico's en het converteren tussen SVG en PNG of JPG.

Wat is SVG?

SVG (Scalable Vector Graphics) is een W3C-norm op basis van XML voor het beschrijven van tweedimensionale vectorafbeeldingen. De extensie is .svg en het MIME-type is image/svg+xml. Een met gzip gecomprimeerde variant gebruikt de extensie .svgz.

Rasterformaten (JPG, PNG, WebP) slaan een afbeelding op als een vast raster van pixels; vergroot je het, dan worden de pixels zichtbaar. SVG beschrijft vormen wiskundig, en de browser of het programma tekent ze opnieuw op de resolutie die het scherm heeft. De gids over afbeeldingsformaten van MDN noemt SVG een ideale keuze voor afbeeldingen die als tekenopdrachten kunnen worden weergegeven, vooral als de weergavegrootte onbekend is of wisselt, en merkt op dat het voor foto's in het algemeen niet nuttig is.

Geschiedenis: SVG 1.0, 1.1 en SVG 2

• 4 september 2001: SVG 1.0 werd gepubliceerd als W3C-Recommendation.
• 14 januari 2003: SVG 1.1 werd een Recommendation. Versie 1.1 verdeelde de taal in modules, waardoor deelverzamelingen zoals mobiele profielen makkelijker te definiëren waren.
• 16 augustus 2011: SVG 1.1 Second Edition verscheen. Dit is de stabiele versie waarop browsers vandaag bouwen.
• SVG 2: volgens de publicatiegeschiedenis van het W3C verschenen er vanaf 2012 werkversies en werd de eerste Candidate Recommendation Snapshot op 15 september 2016 gepubliceerd. De nieuwste snapshot is gedateerd 6 oktober 2026; het document zit nog in de fase Candidate Recommendation.

SVG 2 bouwt voort op 1.1 Second Edition en mikt op een betere integratie met HTML en CSS. Sommige onderwerpen, zoals filters, maskers en lettertypen, zijn naar aparte CSS- en FX-modules verhuisd. In de praktijk implementeren browsers delen van SVG 2, dus ga er niet van uit dat elke functie overal werkt.

Opbouw van een SVG-bestand

Een eenvoudig SVG-bestand ziet er zo uit:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="200" height="200">
  <circle cx="50" cy="50" r="40" fill="#0b6bcb"/>
  <path d="M30 50 L45 65 L72 36" stroke="#fff" stroke-width="8" fill="none"/>
</svg>

Coördinatenstelsel: viewBox, width en height

viewBox legt het interne coördinatenstelsel van de tekening vast (hier 0 tot 100). width en height bepalen hoeveel ruimte de tekening op de pagina inneemt. Een SVG met een viewBox schaalt proportioneel naar elke grootte die je in CSS opgeeft. Bestanden zonder viewBox kunnen bij het verkleinen of vergroten worden afgesneden, een van de meest voorkomende fouten bij logo's.

Basiselementen

• Vormen: rect, circle, ellipse, line, polyline, polygon en path, waarmee je alles kunt tekenen.
• Tekst: text en tspan. Tekst blijft selecteerbaar en doorzoekbaar, maar ontbreekt het lettertype op het apparaat waarop je kijkt, dan wordt een vervangend lettertype gebruikt.
• Groeperen en hergebruiken: g, defs, symbol, use. Iconensets worden vaak als symbol-elementen in één bestand gebundeld.
• Inkleuren: effen kleuren, lineaire en radiale verlopen, patronen, uitknippaden, maskers en filters (vervaging, slagschaduw).
• Stijl en animatie: CSS kan SVG opmaken; CSS-animaties en SMIL-animatie-elementen voegen beweging toe.
• Ingesloten inhoud: image voor rasterafbeeldingen, foreignObject voor HTML en script voor JavaScript.

Kleur, transparantie, lagen en pagina's

Transparantie is in SVG ingebouwd: alles wat niet getekend is, is leeg, en opacity en fill-opacity bepalen halve doorzichtigheid. Lagen worden weergegeven met g-groepen; Inkscape en Illustrator slaan hun lagen zo op. Kleuren zijn standaard sRGB, en er is geen bitdieptegrens in de gebruikelijke zin, omdat kleuren als getallen worden geschreven. SVG is geen documentformaat met meerdere pagina's; voor tekeningen van meerdere pagina's past PDF beter.

Ondersteuning in browsers, systemen en software

Volgens MDN ondersteunen Chrome, Edge, Firefox, Opera en Safari allemaal SVG. Je kunt het gebruiken via <img>, als CSS-background-image, inline in HTML, of met <object> en <iframe>. Vectortools zoals Inkscape, Adobe Illustrator, Affinity Designer en Figma lezen en schrijven SVG, en met actuele versies van Microsoft Office kun je SVG-afbeeldingen invoegen.

Elders is de ondersteuning zwak: veel sociale netwerken, mailprogramma's, berichtenapps en uploadformulieren weigeren SVG of tonen geen voorbeeld. Dat komt deels door het beveiligingsrisico dat hieronder wordt beschreven.

Beveiliging: behandel SVG als een document

SVG is een XML-document en kan een script-element, eventattributen (zoals onload) en externe verwijzingen bevatten. De pagina "SVG as an image" van MDN legt uit dat browsers JavaScript uitschakelen en geen externe bronnen zoals afbeeldingen of stylesheets laden als SVG via <img> of als CSS-achtergrond wordt gebruikt. Die beperkingen gelden niet als het bestand rechtstreeks wordt geopend of met <iframe>, <object> of <embed> wordt ingesloten.

Het praktische gevolg: laat een site gebruikers SVG-bestanden uploaden en serveert ze die rechtstreeks vanaf het eigen domein, dan kan een script in het bestand in de context van die site worden uitgevoerd (stored XSS). Gebruikelijke maatregelen:

• Haal geüploade SVG door een sanitizer die script, eventattributen, foreignObject en externe links verwijdert.
• Serveer gebruikersbestanden vanaf een apart domein, met een strikte Content-Security-Policy, of als download (Content-Disposition: attachment).
• Heb je de vector niet nodig, zet geüploade SVG dan op de server om naar PNG en publiceer alleen de rasterversie.

Typische toepassingen

• Logo's en huisstijlmateriaal: één bestand blijft scherp, van visitekaartje tot reclamebord.
• Interface-iconen: met CSS in te kleuren en nooit wazig op schermen met een hoge pixeldichtheid.
• Grafieken, kaarten en diagrammen: bibliotheken zoals D3.js tekenen gegevens rechtstreeks in SVG-elementen.
• Favicons: actuele browsers accepteren SVG-favicons via <link rel="icon" type="image/svg+xml">.
• Snijden en printen: lasersnijders, vinylsnijders en borduurmachines werken met vectorpaden.

Sterke en zwakke punten

Veelvoorkomende problemen en oplossingen

Een site of app accepteert geen SVG

De makkelijkste oplossing is een PNG-kopie. Onze SVG naar PNG-converter zet de tekening in je browser om in een transparante PNG, met de pixelbreedte die je kiest. Je bestand wordt niet geüpload en verlaat je apparaat nooit.

Tekst verschijnt in een ander lettertype

SVG sluit standaard geen lettertypen in; ontbreekt het lettertype op het systeem waarop je kijkt, dan wordt een vervanger gebruikt. In een afbeeldingscontext worden ook geen externe lettertypen geladen. Zet tekst in je ontwerptool om naar contouren, of sluit het lettertype in.

De SVG heeft het verkeerde formaat of wordt op de pagina afgesneden

Zonder viewBox, of met een vaste width/height, gedraagt het schalen zich niet zoals verwacht. Geef het root-element svg een viewBox die de hele tekening omvat en bepaal het formaat in CSS.

Het bestand is groter dan verwacht

Ontwerptools schrijven editormetadata, overbodige decimalen en verborgen lagen in SVG. Een optimizer zoals SVGO haalt die weg. Gzip- of Brotli-compressie op de server maakt tekstgebaseerde SVG nog kleiner.

Ik heb mijn PNG-logo als SVG nodig

Een rasterafbeelding kan niet echt naar vector worden "omgezet"; wat tools doen, is overtrekken (tracing): vormen worden herkend en opnieuw als contouren getekend. Onze tools PNG naar SVG en JPG naar SVG trekken over met 2 tot 8 kleuren. Bij eenvoudige logo's en tekeningen is het resultaat goed, bij foto's grof. Met deze tools wordt het bestand via een beveiligde verbinding naar onze servers geüpload, daar overgetrokken en uiterlijk binnen 30 minuten verwijderd.

Tips voor het converteren

• Ken de doelgrootte: zet je SVG om naar PNG, kies dan de grootste weergavegrootte van de afbeelding en verdubbel die voor schermen met een hoge pixeldichtheid. In onze tool kan de langste zijde tot 4096 pixels zijn; laat je de breedte leeg, dan worden kleine tekeningen zo geschaald dat de langste zijde 1024 pixels is.
• JPG voor fotoinhoud: sluit de SVG een foto in en heb je geen transparantie nodig, dan is JPG of WebP kleiner dan PNG; je kunt de PNG daarna omzetten in de afbeeldingsconverter.
• Favicons: is je logo een SVG, dan accepteert de favicongenerator het en voegt hij icon.svg aan het pakket toe.
• Schone bron om over te trekken: maak je SVG uit PNG, begin dan met een afbeelding met hoge resolutie, egale kleuren en zonder ruis.

Veelgestelde vragen

Wat is het verschil tussen SVG en PNG?

Een PNG bestaat uit een vast aantal pixels en wordt wazig als je hem vergroot. Een SVG beschrijft vormen en wordt op elk formaat scherp opnieuw getekend. SVG past bij logo's en iconen; PNG of JPG bij foto's en schermafbeeldingen.

Kan een SVG-bestand een virus bevatten?

SVG is geen uitvoerbaar programma, maar kan wel JavaScript bevatten. Scripts draaien niet als de SVG als afbeelding (<img>) wordt getoond, maar kunnen wel draaien als het bestand rechtstreeks in een browser wordt geopend. Bekijk SVG van onbekende afzenders in een viewer of zet het om naar PNG, in plaats van het rechtstreeks te openen.

Kan ik SVG in Word of PowerPoint invoegen?

Actuele versies van Microsoft Office ondersteunen het invoegen van SVG. Voor oudere versies, of als je het bestand met andere programma's gaat delen, is een PNG-kopie veiliger.

Verlies ik kwaliteit als ik SVG naar PNG converteer?

PNG is verliesvrij, maar de tekening wordt vastgelegd op een pixelgrootte. Kies een breedte die groot genoeg is en je merkt geen verlies; vergroot je de PNG later, dan wordt hij wazig.

Ondersteunt SVG animatie?

Ja. Beweging kan komen van CSS-animaties, SMIL-animatie-elementen en JavaScript. Converteer je naar PNG, dan krijg je één frame.

Bronnen

• W3C: Scalable Vector Graphics (SVG) 1.1 (Second Edition)
• W3C: Scalable Vector Graphics (SVG) 1.0 Specification
• W3C: Scalable Vector Graphics (SVG) 2
• W3C: publicatiegeschiedenis van SVG 2
• MDN: SVG as an image
• MDN: Image file type and format guide