Wat is een SVG-bestand?

SVG is een puur tekstformaat dat in elke editor opengaat. Het bewaart vormen en coördinaten in plaats van beeldpunten en blijft daardoor scherp op elk formaat — een logo op billboardgrootte verliest niets. Het wordt gebruikt voor het web, logo's en lijntekeningen en bewerken.

De extensie is .svg en de volledige naam Scalable Vector Graphics. Allebei zeggen ze minder dan wat het bestand kan bevatten, en daar gaat de rest van deze pagina over.

W3C bracht het in 2001 uit. De specificatie is SVG 1.1.

De leeftijd is om een praktische reden interessant: hoe ouder een formaat, hoe meer programma’s de tijd hebben gehad om het te leren.

Ze is volledig gepubliceerd, dus wie het formaat wil uitvoeren kan dat uit het document doen in plaats van door te kijken hoe anderen het doen. Daarom duikt het in zo veel programma’s op, en daarom gaan bestanden van twintig jaar geleden nog steeds open. Openbaar is niet hetzelfde als royaltyvrij: waar een formaat een codec omhult, is de octrooilicentie een aparte vraag waarop de standaard geen antwoord geeft.

SVG bewaart zijn inhoud precies. Opnieuw opslaan verandert niets, dus je kunt het zo vaak openen, bewerken en wegschrijven als je wilt zonder dat er schade opstapelt — en dat is wat er een werkformaat van maakt in plaats van een afleverformaat.

SVG draagt een alfakanaal mee, dus een logo houdt zijn zachte randen over alles wat erachter ligt in plaats van in een wit vak aan te komen.

SVG kan een animatie bewaren in plaats van één stilstaand beeld. Dat is de moeite waard om te weten vóór het converteren: een doel dat één beeld bevat houdt het eerste en laat de rest vallen, meestal zonder het te zeggen.

Het kan werken in RGB.

Acht bits per kanaal is wat een scherm laat zien en wat vrijwel elk afleverformaat meebrengt.

SVG legt de onderdelen van een beeld apart neer in plaats van samengerekend — dat maakt het een werkbestand. Bijna elk formaat waarnaar het converteert legt ze samen, en dat is niet terug te draaien: bewaar het origineel met lagen.

Inkscape, Adobe Illustrator en Figma lezen het, en de meeste programma’s van dezelfde soort ook.

Als een bestand niet opengaat ligt het zelden aan het formaat — vaker is het programma ouder dan het formaat. Converteren naar iets ouders is de betrouwbare weg eromheen, en daarvoor is de rest van deze site bedoeld.

Elke actuele browser leest het.

Je kunt het dus zonder zorgen op een pagina zetten of aan een bericht hangen, zonder je af te vragen wat de andere kant geïnstalleerd heeft.

SVG is bedoeld om te openen en te wijzigen. Houd het bestand in dit formaat zolang het werk loopt, en exporteer eruit wanneer er een afgeronde versie nodig is.

Een SVG is een XML-document. Open er eentje in een teksteditor en je vindt leesbare instructies: teken een cirkel op deze coördinaat met deze straal, vul dit pad met deze kleur. Er zitten helemaal geen pixels in het bestand.

Die ene eigenschap maakt het anders dan elk ander beeldformaat. Het is te diffen in versiebeheer, met de hand te bewerken, door een script te genereren, en te doorzoeken. Het betekent ook dat een kapotte SVG meestal te diagnosticeren is door hem te lezen.

Het bestand beschrijft vormen in plaats van een raster kleurwaarden, dus de renderer tekent ze opnieuw op de gevraagde grootte. Een logo getoond op 24 pixels en afgedrukt op een meter breed komt uit hetzelfde bestand en is exact op beide.

Daarom is SVG het juiste antwoord voor logo’s, iconen, diagrammen en grafieken, en het verkeerde voor foto’s. Een foto heeft geen vormen om te beschrijven — omzetten naar SVG levert een enorm bestand op of een geposteriseerde benadering.

Twee attributen bepalen hoe een SVG zich in een lay-out gedraagt. width en height geven hem een eigen grootte; viewBox definieert het coördinatensysteem waarin de vormen getekend zijn. Met een viewBox schaalt de tekening naar elke doos die de pagina geeft.

Bijna elke klacht over een SVG op de verkeerde grootte gaat hierop terug. Een bestand met vaste afmetingen en geen viewBox negeert CSS-grootte. Een passende viewBox toevoegen is meestal een regel-tekst-oplossing.

Een SVG met tekst verwijst naar zijn lettertypen bij naam, precies zoals een webpagina. Op een machine zonder het lettertype vervangt de renderer iets anders, en de letterbreedtes veranderen.

De standaardverdediging is tekst omzetten naar paden, wat elke letter een contour maakt. Dat garandeert het uiterlijk overal en maakt de tekst permanent onbewerkbaar en niet doorzoekbaar. Voor een logo is dat de juiste ruil.

Staat een SVG rechtstreeks in de HTML in plaats van geladen via een img-tag, dan worden zijn elementen onderdeel van de pagina. CSS kan een pad herkleuren bij hover, en JavaScript kan losse stukken animeren.

Geladen via img of als CSS-achtergrond geldt dat niet — de SVG rendert geïsoleerd en de pagina kan er niet in reiken. Dat onderscheid bepaalt welke techniek te gebruiken.

Omdat het een document is in plaats van een plaatje, kan een SVG script-elementen, externe verwijzingen en links bevatten. Vanaf je eigen domein geserveerd en rechtstreeks geopend, draait dat script met de rechten van je site.

Daarom weigeren veel uploadformulieren SVG ronduit, en zou een site die gebruikersuploads accepteert ze moeten opschonen in plaats van vertrouwen. Een SVG van een onbekende bron staat dichter bij een HTML-bestand dan bij een afbeelding.

Illustrator, Figma en Sketch schrijven veel stellage: editor-metadata, laagnamen, lege groepen, coördinaten op zestien decimalen. Een icoon dat 800 bytes zou moeten zijn, exporteert vaak op acht kilobyte.

Optimalisatoren strippen dat allemaal zonder te veranderen wat getekend wordt, en verminderingen van 60 tot 80 procent zijn gewoon.

Een SVG kan een bitmap insluiten als base64-data-URI, en sommige exportpaden doen dit zonder het te zeggen — een vorm met een effect dat het formaat niet kan uitdrukken, wordt platgeslagen tot een afbeelding en in SVG verpakt.

Het resultaat is een bestand met de extensie .svg dat niet schaalt, want wat erin zit is een vast raster pixels. Oogt een SVG wazig bij vergroten, dan is dit vrijwel altijd de reden.

PNG wanneer een raster op vaste grootte nodig is en transparantie telt — kies de pixelafmetingen bewust. JPG wanneer de bestemming PNG weigert, met transparantie die een effen achtergrond wordt. PDF voor drukwerk, wat niets verliest.

Bewaar de SVG in elk geval. Elke rasterexport is een beslissing over één grootte, en het origineel is de enige versie die nog elke andere kan produceren.