โครงสร้างแบบ XML

SVG ต่างจากรูปแบบไฟล์อื่นๆ ทั้งหมดในเว็บนี้ เพราะมันไม่ใช่ไบนารี แต่เป็นข้อความ XML ล้วนๆ คุณเปิด SVG ด้วยโปรแกรมแก้ไขข้อความแล้วอ่านได้เลย เรื่องนี้ทำให้การลบเมทาดาต้าเข้าใจง่ายกว่าในเชิงแนวคิด แต่ก็แปลว่ามีที่ให้ข้อมูลซ่อนตัวได้มากกว่าเช่นกัน

เมทาดาต้าโผล่มาได้ทั้งในรูปเอลิเมนต์เฉพาะ แอตทริบิวต์บนเอลิเมนต์ใดก็ได้ คอมเมนต์ XML หรือ processing instruction โปรแกรมแต่งภาพเวกเตอร์ชอบยัดข้อมูลของตัวเองลงในไฟล์ SVG มาก

โครงสร้างพื้นฐานของ 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">

  <!-- เอลิเมนต์ที่เป็นเมทาดาต้า -->
  <title>My Drawing</title>
  <desc>Created by John Doe</desc>
  <metadata>
    <rdf:RDF xmlns:rdf="...">
      <!-- เมทาดาต้าแบบ RDF/Dublin Core -->
    </rdf:RDF>
  </metadata>

  <!-- เนื้อหาเวกเตอร์ -->
  <circle cx="50" cy="50" r="40" fill="red"/>
</svg>

เอลิเมนต์ที่สำคัญ

<svg>:เอลิเมนต์ราก ที่มี viewBox และ ขนาดของภาพ
xmlns:การประกาศ namespace
<defs>:นิยามที่นำกลับมาใช้ซ้ำได้ (เกรเดียนต์ ลวดลาย)
<g>:เอลิเมนต์สำหรับจัดกลุ่ม

เอลิเมนต์ที่เป็นเมทาดาต้า

สเปกของ SVG กำหนดวิธีแนบเมทาดาต้าไว้หลายทาง และเครื่องมือแต่ละตัว ก็เลือกใช้คนละวิธี บางทางชัดเจนมาก (มีเอลิเมนต์ชื่อ <metadata> อยู่ตรงๆ เลย) บางทางก็แนบเนียนกว่านั้น

<metadata>

ที่เก็บเมทาดาต้าแบบมีโครงสร้าง ปกติเป็น RDF/Dublin Core ข้างในมีได้ทั้งชื่อผู้สร้าง วันที่สร้าง สิทธิ์ และอื่นๆ อีก

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

ชื่อที่คนอ่านเข้าใจได้ ของทั้งไฟล์ SVG หรือของแต่ละเอลิเมนต์ มักใช้เพื่อการเข้าถึง แต่ก็เผยให้รู้ได้ว่าเอกสารนี้ทำมาเพื่ออะไร

<desc>

เอลิเมนต์คำบรรยาย เก็บรายละเอียดของภาพ ผู้สร้าง หรือวัตถุประสงค์ได้

คอมเมนต์ XML

 อาจมีโน้ตของผู้สร้าง วันที่สร้าง ข้อมูลซอฟต์แวร์ หรือข้อมูลสำหรับดีบักอยู่ข้างใน

namespace ของโปรแกรมแต่งภาพ

ตรงนี้แหละที่ SVG เริ่มรก โปรแกรมแต่งภาพเวกเตอร์ทุกตัว เติมแอตทริบิวต์ใน namespace ของตัวเองเข้ามาเพื่อเก็บฟีเจอร์ที่ SVG ไม่รองรับโดยตรง ลองเปิดไฟล์จาก Inkscape ดู คุณจะเห็นแอตทริบิวต์ inkscape: และ sodipodi: เต็มไปหมด พวกนี้ไม่ได้เสี่ยงต่อความเป็นส่วนตัวโดยตรง แต่มันบอกได้ว่าคุณใช้ซอฟต์แวร์อะไร

inkscape:* / sodipodi:*

Inkscape เติมแอตทริบิวต์ใน namespace ของตัวเองเพื่อเก็บชื่อเลเยอร์ ตำแหน่งเส้นไกด์ การตั้งค่าเอกสาร และประวัติการแก้ไข

<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 ฝังเมทาดาต้าไว้เยอะมาก ทั้งเวอร์ชัน การตั้งค่า artboard และบางครั้งก็มีข้อมูลรูปแบบ AI มาเต็มๆ ด้วย

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

Sketch / Figma

เครื่องมือออกแบบยุคใหม่อาจฝังชื่อเลเยอร์ ไอดีของคอมโพเนนต์ และการตั้งค่าการส่งออกไว้ในแอตทริบิวต์ที่กำหนดเอง

Processing Instruction

processing instruction ของ XML (<?...?>) ที่อยู่ต้นไฟล์ SVG อาจบอกได้ว่าใช้ซอฟต์แวร์อะไรสร้าง

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

อะไรเก็บไว้ อะไรลบทิ้ง

• การประกาศ <?xml ...?>:เก็บไว้ (จำเป็น)
• <?xml-stylesheet ...?>:เก็บไว้ (มีผลต่อการแสดงผล)
• processing instruction อื่นๆ:ลบทิ้ง

การประมวลผลผ่าน DOM

เพราะ SVG เป็น XML ที่ถูกต้อง เราจึงอ่านมันเข้ามาเป็นต้นไม้ DOM แล้วผ่าเอาสิ่งที่ไม่ต้องการออกได้อย่างแม่นยำ วิธีนี้ตรงจุดกว่าการใช้ regex และไม่เผลอทำเนื้อหาที่ถูกต้องพังไปด้วย

อ่าน XML

อ่าน SVG เป็นเอกสาร XML โดยรักษาโครงสร้างไว้

ลบเอลิเมนต์ที่เป็นเมทาดาต้า

ลบเอลิเมนต์ <metadata>, <title> และ <desc>

ลอกแอตทริบิวต์ของโปรแกรมแต่งภาพออก

ลบ inkscape:*, sodipodi:* และ namespace อื่นๆ ของโปรแกรมแต่งภาพ

ลบคอมเมนต์

ลอกคอมเมนต์ XML ออกจากเอกสารให้หมด

เก็บกวาด namespace

ลบการประกาศ namespace ที่ไม่ได้ใช้ออกจากเอลิเมนต์ราก

เขียนกลับเป็นไฟล์

เขียน XML ที่ทำความสะอาดแล้วกลับออกมาเป็นไฟล์ SVG

สรุปการประมวลผล

เก็บไว้

• ภาพเวกเตอร์ทั้งหมด (เส้น รูปทรง ข้อความ)
• สไตล์และ CSS
• เกรเดียนต์และลวดลาย
• ฟิลเตอร์และเอฟเฟกต์
• ภาพที่ฝังไว้ (แบบอ้างอิง)
• viewBox และขนาดของภาพ
• namespace มาตรฐานของ SVG

ถูกลบ

• เอลิเมนต์ <metadata>
• เอลิเมนต์ <title>
• เอลิเมนต์ <desc>
• คอมเมนต์ XML
• แอตทริบิวต์ inkscape:*
• แอตทริบิวต์ sodipodi:*
• namespace ของ Adobe/Sketch
• การประกาศ namespace ที่ไม่ได้ใช้

ภาพที่ฝังอยู่ข้างใน

มีจุดหนึ่งที่หลายคนคาดไม่ถึง ไฟล์ SVG ฝังภาพแบบแรสเตอร์ไว้ในรูป data URI แบบ base64 ได้ และไฟล์ JPEG หรือ PNG ที่ฝังอยู่นั้น อาจมีเมทาดาต้า EXIF ของตัวเองซ่อนอยู่ข้างใน

ข้อจำกัดในตอนนี้

ตอนนี้ PicScrub ลบเมทาดาต้าในระดับ SVG ให้ แต่ยังไม่ถอดรหัส และประมวลผลภาพแรสเตอร์ที่ฝังอยู่ข้างใน

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

ตอนนี้ PicScrub ยังไม่ประมวลผลภาพแรสเตอร์ที่ฝังอยู่ในไฟล์ SVG ถ้าต้องการความเป็นส่วนตัวแบบครบถ้วน ให้แยกภาพที่ฝังไว้ออกมา แล้วประมวลผลต่างหาก

รูปแบบไฟล์ SVG