Een structuur van XML

SVG is anders dan alle andere formaten op deze site, want het is niet binair: het is gewoon XML-tekst. Je kunt een SVG in een teksteditor openen en zo lezen. Daardoor is metadata verwijderen in principe eenvoudiger, maar het betekent ook dat informatie zich op meer plekken kan verstoppen.

Metadata kan opduiken als apart element, als attribuut op willekeurig welk element, als XML-comment of als processing instruction. En vectorprogramma's proppen maar wat graag hun eigen gegevens in een SVG-bestand.

De basisstructuur van een SVG

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     width="100" height="100" viewBox="0 0 100 100">

  <!-- Metadata-elementen -->
  <title>Mijn tekening</title>
  <desc>Gemaakt door Jan Jansen</desc>
  <metadata>
    <rdf:RDF xmlns:rdf="...">
      <!-- RDF/Dublin Core-metadata -->
    </rdf:RDF>
  </metadata>

  <!-- De vectorinhoud -->
  <circle cx="50" cy="50" r="40" fill="red"/>
</svg>

Belangrijke elementen

<svg>:Het hoofdelement, met viewBox en afmetingen
xmlns:De namespace-declaraties
<defs>:Herbruikbare definities (gradiënten, patronen)
<g>:Het element om te groeperen

Metadata-elementen

De SVG-spec biedt verschillende manieren om metadata mee te geven, en elke tool kiest weer een andere. Sommige zijn overduidelijk (er bestaat letterlijk een <metadata>-element), andere zijn wat subtieler.

<metadata>

De houder voor gestructureerde metadata, meestal RDF/Dublin Core. Kan de naam van de maker, de aanmaakdatum, rechten en meer bevatten.

<metadata>
  <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
           xmlns:dc="http://purl.org/dc/elements/1.1/">
    <rdf:Description>
      <dc:creator>Jan Jansen</dc:creator>
      <dc:date>2024-01-15</dc:date>
    </rdf:Description>
  </rdf:RDF>
</metadata>

<title>

Een leesbare titel voor de SVG of voor losse elementen. Wordt vaak gebruikt voor toegankelijkheid, maar kan verraden waar het document over gaat.

<desc>

Het element voor een beschrijving. Kan gedetailleerde informatie bevatten over de afbeelding, de maker of het doel ervan.

XML-comments

In  kunnen aantekeningen van de maker staan, plus aanmaakdatums, softwaregegevens of debuginformatie.

Namespaces van editors

Hier wordt SVG een rommeltje. Elk vectorprogramma voegt zijn eigen attributen met een eigen namespace toe, voor functies die SVG zelf niet kent. Open een bestand van Inkscape en je ziet overal inkscape: en sodipodi:. Op zichzelf zijn dat geen privacyrisico's, maar ze verraden wel met welke software je werkt.

inkscape:* / sodipodi:*

Inkscape voegt attributen toe met namen van lagen, posities van hulplijnen, documentinstellingen en bewerkingsgeschiedenis.

<svg xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
     xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
     inkscape:version="1.2"
     sodipodi:docname="my-drawing.svg">
  <sodipodi:namedview inkscape:current-layer="layer1"/>
</svg>

Adobe Illustrator

Illustrator zet er uitgebreide metadata in, waaronder de versie, de instellingen van het artboard en soms zelfs complete AI-gegevens.

xmlns:i="http://ns.adobe.com/AdobeIllustrator/10.0/"
xmlns:x="http://ns.adobe.com/Extensibility/1.0/"

Sketch / Figma

Moderne designtools kunnen namen van lagen, component-ID's en exportinstellingen in eigen attributen meesturen.

Processing instructions

XML-processing instructions (<?...?>) aan het begin van een SVG-bestand kunnen verraden welke software is gebruikt.

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="style.css"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

Wat blijft en wat weggaat

• De declaratie <?xml ...?>:blijft (verplicht)
• <?xml-stylesheet ...?>:blijft (functioneel)
• Andere processing instructions:gaan weg

Verwerken via de DOM

Omdat SVG geldige XML is, kunnen we het in een DOM-boom parsen en er chirurgisch uithalen wat we niet willen. Dat is preciezer dan werken met reguliere expressies, en het sloopt niet per ongeluk geldige inhoud.

De XML parsen

De SVG als XML-document inlezen, met behoud van de structuur

Metadata-elementen verwijderen

De elementen <metadata>, <title> en <desc> weghalen

Attributen van editors strippen

inkscape:*, sodipodi:* en andere namespaces van editors weghalen

Comments verwijderen

Alle XML-comments uit het document halen

Namespaces opschonen

Ongebruikte namespace-declaraties uit het hoofdelement halen

Serialiseren

De opgeschoonde XML weer als SVG-bestand wegschrijven

De verwerking samengevat

Blijft staan

• Alle vectorgrafiek (paden, vormen, tekst)
• Stijlen en CSS
• Gradiënten en patronen
• Filters en effecten
• Ingesloten afbeeldingen (via een verwijzing)
• De viewBox en de afmetingen
• De standaard SVG-namespaces

Gaat weg

• Het element <metadata>
• Het element <title>
• Het element <desc>
• XML-comments
• inkscape:*-attributen
• sodipodi:*-attributen
• Namespaces van Adobe en Sketch
• Ongebruikte namespace-declaraties

Ingesloten afbeeldingen

Nog een addertje waar mensen op stuiten: in SVG-bestanden kunnen rasterafbeeldingen zitten, als base64-data-URI. En in zo'n ingesloten JPEG of PNG kan gewoon EXIF-metadata verstopt zitten.

Huidige beperking

PicScrub verwijdert op dit moment de metadata op SVG-niveau, maar decodeert en verwerkt ingesloten rasterafbeeldingen niet:

<image href="data:image/jpeg;base64,/9j/4AAQ..." />

PicScrub verwerkt ingesloten rasterafbeeldingen in SVG-bestanden dus niet. Wil je helemaal zeker zijn, haal die afbeeldingen er dan uit en schoon ze apart op.

Het SVG-formaat