PicScrub logoPicScrub
Zurück zu den Formaten

SVG-Format

Scalable Vector Graphics

XML-Struktur

SVG unterscheidet sich von allen anderen Formaten auf dieser Website, denn es ist nicht binär, sondern schlicht XML-Text. Du kannst eine SVG-Datei in einem Texteditor öffnen und lesen. Das macht das Entfernen von Metadaten konzeptionell einfacher, bedeutet aber auch, dass es mehr Verstecke für Informationen gibt.

Metadaten können als eigene Elemente auftauchen, als Attribute an beliebigen Elementen, als XML-Kommentare oder als Processing Instructions. Vektor-Editoren packen besonders gern eigene Daten in SVG-Dateien.

Grundaufbau einer SVG-Datei

<?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">

  <!-- Metadaten-Elemente -->
  <title>Meine Zeichnung</title>
  <desc>Erstellt von John Doe</desc>
  <metadata>
    <rdf:RDF xmlns:rdf="...">
      <!-- RDF-/Dublin-Core-Metadaten -->
    </rdf:RDF>
  </metadata>

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

Wichtige Elemente

  • <svg>:Wurzelelement mit viewBox und Abmessungen
  • xmlns:Namespace-Deklarationen
  • <defs>:Wiederverwendbare Definitionen (Verläufe, Muster)
  • <g>:Gruppierungselement

Metadaten-Elemente

Die SVG-Spezifikation kennt mehrere Wege, Metadaten anzuhängen, und verschiedene Werkzeuge nutzen unterschiedliche davon. Manche sind offensichtlich (es gibt buchstäblich ein <metadata>-Element), andere sind subtiler.

<metadata>

Container für strukturierte Metadaten, meist RDF/Dublin Core. Kann Namen des Urhebers, Erstellungsdatum, Rechte und mehr enthalten.

<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>John Doe</dc:creator>
      <dc:date>2024-01-15</dc:date>
    </rdf:Description>
  </rdf:RDF>
</metadata>

<title>

Menschenlesbarer Titel für die SVG-Datei oder einzelne Elemente. Wird oft für Barrierefreiheit genutzt, kann aber den Zweck des Dokuments verraten.

<desc>

Beschreibungselement. Kann detaillierte Angaben zum Bild, zum Urheber oder zum Zweck enthalten.

XML-Kommentare

<!-- Kommentar --> kann Notizen des Urhebers, Erstellungsdaten, Software-Infos oder Debug-Informationen enthalten.

Editor-Namespaces

Hier wird SVG unübersichtlich. Jeder Vektor-Editor ergänzt eigene Attribute mit eigenem Namespace, um Funktionen zu speichern, die SVG selbst nicht kennt. Öffne eine Inkscape-Datei und du siehst überall inkscape: und sodipodi:. Das sind zwar keine unmittelbaren Datenschutzrisiken, aber sie verraten, welche Software du benutzt.

inkscape:* / sodipodi:*

Inkscape ergänzt Attribute mit eigenem Namespace für Ebenennamen, Positionen von Hilfslinien, Dokumenteinstellungen und den Bearbeitungsverlauf.

<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="meine-zeichnung.svg">
  <sodipodi:namedview inkscape:current-layer="layer1"/>
</svg>

Adobe Illustrator

Illustrator bettet umfangreiche Metadaten ein, darunter Version, Zeichenflächen-Einstellungen und manchmal komplette AI-Daten.

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

Sketch / Figma

Moderne Design-Tools betten mitunter Ebenennamen, Komponenten-IDs und Export-Einstellungen in eigenen Attributen ein.

Processing Instructions

XML-Processing-Instructions (<?...?>) am Anfang von SVG-Dateien können verraten, mit welcher Software sie erstellt wurden.

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

Erhalten und entfernt

  • • <?xml ...?>-Deklaration:Bleibt erhalten (erforderlich)
  • • <?xml-stylesheet ...?>:Bleibt erhalten (funktional)
  • • Andere Processing Instructions:Werden entfernt

Verarbeitung über das DOM

Da SVG gültiges XML ist, können wir es in einen DOM-Baum einlesen und gezielt entfernen, was wir nicht wollen. Das ist präziser als Lösungen mit regulären Ausdrücken und zerstört keine gültigen Inhalte.

1

XML einlesen

SVG als XML-Dokument parsen und die Struktur erhalten

2

Metadaten-Elemente entfernen

<metadata>-, <title>- und <desc>-Elemente löschen

3

Editor-Attribute entfernen

inkscape:*, sodipodi:* und andere Editor-Namespaces löschen

4

Kommentare entfernen

Alle XML-Kommentare aus dem Dokument löschen

5

Namespaces bereinigen

Ungenutzte Namespace-Deklarationen aus dem Wurzelelement entfernen

6

Serialisieren

Das bereinigte XML wieder als SVG-Datei schreiben

Zusammenfassung der Verarbeitung

Erhalten

  • • Alle Vektorgrafiken (Pfade, Formen, Text)
  • • Stile und CSS
  • • Verläufe und Muster
  • • Filter und Effekte
  • • Eingebettete Bilder (referenziert)
  • • viewBox und Abmessungen
  • • Standard-SVG-Namespaces

Entfernt

  • • <metadata>-Element
  • • <title>-Element
  • • <desc>-Element
  • • XML-Kommentare
  • • inkscape:*-Attribute
  • • sodipodi:*-Attribute
  • • Adobe-/Sketch-Namespaces
  • • Ungenutzte Namespace-Deklarationen

Eingebettete Bilder

Eine Falle, die viele übersehen: SVG-Dateien können Rasterbilder als base64-Data-URIs einbetten. In diesen eingebetteten JPEGs oder PNGs können eigene EXIF-Metadaten stecken.

Aktuelle Einschränkung

PicScrub entfernt derzeit Metadaten auf SVG-Ebene, dekodiert und verarbeitet eingebettete Rasterbilder aber nicht:

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

PicScrub verarbeitet eingebettete Rasterbilder in SVG-Dateien derzeit nicht. Für vollständigen Datenschutz solltest du solche Bilder separat extrahieren und bereinigen.