Struktur XML

SVG berbeda dari semua format lain di situs ini, karena dia bukan file biner, melainkan teks XML biasa. Kamu bisa membuka SVG di editor teks dan langsung membacanya. Secara konsep ini membuat penghapusan metadata jadi lebih sederhana, tapi juga berarti ada lebih banyak tempat buat informasi bersembunyi.

Metadata bisa muncul sebagai elemen khusus, sebagai atribut di elemen mana pun, sebagai komentar XML, atau sebagai processing instruction. Aplikasi editor vektor gemar menjejalkan datanya sendiri ke dalam file SVG.

Struktur dasar 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">

  <!-- Elemen metadata -->
  <title>Gambar Saya</title>
  <desc>Dibuat oleh John Doe</desc>
  <metadata>
    <rdf:RDF xmlns:rdf="...">
      <!-- Metadata RDF/Dublin Core -->
    </rdf:RDF>
  </metadata>

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

Elemen penting

<svg>:Elemen akar, berisi viewBox dan ukurannya
xmlns:Deklarasi namespace
<defs>:Definisi yang bisa dipakai ulang (gradien, pola)
<g>:Elemen pengelompokan

Elemen metadata

Spesifikasi SVG menyediakan beberapa cara untuk menempelkan metadata, dan tiap aplikasi memilih caranya sendiri. Sebagian kentara sekali (ada elemen <metadata> yang memang bernama begitu), sebagian lagi lebih halus.

<metadata>

Wadah untuk metadata terstruktur, biasanya RDF/Dublin Core. Bisa memuat nama pembuat, tanggal pembuatan, hak, dan lainnya.

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

Judul yang terbaca manusia untuk keseluruhan SVG atau elemen tertentu. Sering dipakai untuk aksesibilitas, tapi bisa membocorkan tujuan dokumennya.

<desc>

Elemen deskripsi. Bisa memuat informasi rinci tentang gambarnya, pembuatnya, atau tujuannya.

Komentar XML

 bisa berisi catatan pembuat, tanggal pembuatan, info software, atau informasi debug.

Namespace milik editor

Di sinilah SVG jadi berantakan. Tiap editor vektor menambahkan atributnya sendiri dengan namespace khusus untuk menyimpan fitur yang tidak didukung SVG secara bawaan. Buka file Inkscape dan kamu akan melihat atribut inkscape: dan sodipodi: di mana-mana. Ini sebenarnya bukan risiko privasi, tapi tetap saja jadi sidik jari software yang kamu pakai.

inkscape:* / sodipodi:*

Inkscape menambahkan atribut ber-namespace untuk nama layer, posisi garis bantu, pengaturan dokumen, dan riwayat penyuntingan.

<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 menanamkan metadata yang cukup banyak, termasuk versinya, pengaturan artboard, dan kadang data format AI secara utuh.

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

Sketch / Figma

Aplikasi desain modern bisa menanamkan nama layer, ID komponen, dan pengaturan ekspor di atribut kustomnya.

Processing instruction

Processing instruction XML (<?...?>) di awal file SVG bisa membocorkan software apa yang dipakai.

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

Yang dipertahankan dan yang dihapus

• Deklarasi <?xml ...?>:dipertahankan (wajib)
• <?xml-stylesheet ...?>:dipertahankan (fungsional)
• Processing instruction lainnya:dihapus

Pemrosesan berbasis DOM

Karena SVG adalah XML yang valid, kami bisa mengurainya jadi pohon DOM lalu mengangkat bagian yang tidak diinginkan dengan presisi. Cara ini lebih akurat daripada pendekatan berbasis regex dan tidak akan merusak konten yang valid secara tidak sengaja.

Mengurai XML

Mengurai SVG sebagai dokumen XML, dengan strukturnya tetap utuh

Menghapus elemen metadata

Membuang elemen <metadata>, <title>, dan <desc>

Membersihkan atribut editor

Membuang inkscape:*, sodipodi:*, dan namespace editor lainnya

Menghapus komentar

Membuang semua komentar XML dari dokumennya

Merapikan namespace

Membuang deklarasi namespace yang tidak terpakai dari elemen akar

Menulis ulang

Menulis kembali XML yang sudah bersih sebagai file SVG

Ringkasan pemrosesan

Dipertahankan

• Semua grafik vektor (path, bentuk, teks)
• Gaya dan CSS
• Gradien dan pola
• Filter dan efek
• Gambar tertanam (yang dirujuk)
• viewBox dan ukurannya
• Namespace SVG standar

Dihapus

• Elemen <metadata>
• Elemen <title>
• Elemen <desc>
• Komentar XML
• Atribut inkscape:*
• Atribut sodipodi:*
• Namespace Adobe/Sketch
• Deklarasi namespace yang tidak terpakai

Gambar tertanam

Ada satu jebakan yang sering luput: file SVG bisa menanamkan gambar raster sebagai data URI base64. JPEG atau PNG yang tertanam di situ bisa saja masih menyimpan metadata EXIF-nya sendiri.

Batasan saat ini

Untuk saat ini PicScrub menghapus metadata di level SVG, tapi belum mendekode dan memproses gambar raster yang tertanam:

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

PicScrub saat ini belum memproses gambar raster yang tertanam di dalam file SVG. Untuk privasi yang benar-benar tuntas, keluarkan dan proses gambar tertanamnya secara terpisah.

Format SVG