Gids
Wat is een SVG-bestand?
SVG staat voor Scalable Vector Graphics. Een SVG-bestand beschrijft een afbeelding met vormen en coördinaten in plaats van pixels, en blijft daardoor op elk formaat scherp.
Wat is SVG precies?
Een SVG is een tekstbestand in XML. In plaats van de kleur van elke pixel op te slaan, bevat het instructies: teken hier een cirkel, trek een pad door deze punten, vul het met deze kleur. Je browser of tekenprogramma leest die instructies en tekent de afbeelding op het formaat waarop hij wordt getoond.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" fill="#C8F031"/>
</svg>Dat fragment is een complete SVG: een limoengroene cirkel in een vlak van 100 bij 100 eenheden. Omdat het tekst is, kun je een SVG openen in een code-editor, erin zoeken, hem comprimeren en met de hand aanpassen.
SVG is een open standaard van het World Wide Web Consortium, voor het eerst gepubliceerd in 2001 (W3C). Alle moderne browsers tonen het zonder plug-ins.
Wat is een SVG-bestand qua extensie en mediatype
SVG-bestanden gebruiken de extensie .svg en het mediatype image/svg+xml. Een gecomprimeerde variant, .svgz, is hetzelfde bestand ingepakt met gzip. Ook software voor snijplotters en lettertypetools gebruikt SVG, maar het formaat is hetzelfde.
Waarvoor gebruik je een SVG-bestand
- Logo's en iconen op websites en in apps, omdat één bestand op elke schermdichtheid scherp is.
- Illustraties, grafieken en kaarten waarop je moet inzoomen of die groot worden geprint.
- Animaties en interactieve graphics, omdat je elke vorm met CSS kunt opmaken of met JavaScript kunt wijzigen.
- Snijplotters en lasersnijders, die de contouren van de vormen volgen.
- Favicons in moderne browsers.
Voor foto's is SVG niet geschikt. Een foto heeft doorlopende tinten waarvoor miljoenen piepkleine vormen nodig zouden zijn; JPG en WebP slaan hem veel efficiënter op.
Een SVG-bestand openen
Elke webbrowser opent een SVG: sleep het bestand naar een venster van Chrome, Firefox, Safari of Edge. Wil je de code naast de afbeelding zien, gebruik dan onze SVG-viewer. Om de tekening te bewerken, gebruik je een vectorprogramma zoals Inkscape (gratis), Figma of Adobe Illustrator. In Windows kan Verkenner met een extensie miniaturen van SVG's tonen; op een Mac bekijk je ze met Snelle weergave via de spatiebalk.
SVG-bestand of PNG: de verschillen
| SVG | PNG | |
|---|---|---|
| Bestaat uit | Vormen en coördinaten | Pixels |
| Schalen | Scherp op elk formaat | Wazig bij vergroten |
| Transparantie | Ja | Ja |
| Bewerkbaar als tekst | Ja | Nee |
| Geschikt voor | Logo's, iconen, diagrammen | Schermafbeeldingen, gedetailleerde beelden, plekken die geen SVG accepteren |
Je kunt beide kanten op: de PNG naar SVG-converter trekt pixels over als vormen, en de SVG naar PNG-converter zet vormen om in pixels op het formaat dat je kiest.