Cấu trúc XML

SVG khác hẳn mọi định dạng khác trên trang này, vì nó không phải file nhị phân mà chỉ là văn bản XML. Bạn có thể mở một file SVG bằng trình soạn thảo văn bản và đọc thẳng nội dung. Điều đó khiến việc xóa siêu dữ liệu dễ hình dung hơn, nhưng cũng đồng nghĩa có nhiều chỗ hơn để thông tin ẩn nấp.

Siêu dữ liệu có thể xuất hiện dưới dạng phần tử riêng, thuộc tính trên bất kỳ phần tử nào, chú thích XML, hoặc chỉ thị xử lý. Các phần mềm vẽ vector thì rất thích nhét dữ liệu của riêng chúng vào file SVG.

Cấu trúc SVG cơ bản

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

  <!-- Các phần tử siêu dữ liệu -->
  <title>Bản vẽ của tôi</title>
  <desc>Tạo bởi Nguyễn Văn A</desc>
  <metadata>
    <rdf:RDF xmlns:rdf="...">
      <!-- Siêu dữ liệu RDF/Dublin Core -->
    </rdf:RDF>
  </metadata>

  <!-- Nội dung vector -->
  <circle cx="50" cy="50" r="40" fill="red"/>
</svg>

Những phần tử chính

<svg>:phần tử gốc, chứa viewBox và kích thước
xmlns:khai báo namespace
<defs>:các định nghĩa dùng lại được (gradient, họa tiết)
<g>:phần tử gom nhóm

Các phần tử siêu dữ liệu

Chuẩn SVG định nghĩa vài cách gắn siêu dữ liệu, và mỗi công cụ lại chọn một cách. Có cái quá rõ ràng (hẳn là có một phần tử tên <metadata>), có cái thì kín đáo hơn.

<metadata>

Nơi chứa siêu dữ liệu có cấu trúc, thường là RDF/Dublin Core. Có thể chứa tên người tạo, ngày tạo, thông tin quyền và nhiều thứ khác.

<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>Nguyễn Văn A</dc:creator>
      <dc:date>2024-01-15</dc:date>
    </rdf:Description>
  </rdf:RDF>
</metadata>

<title>

Tiêu đề dễ đọc cho cả file SVG hoặc cho từng phần tử. Hay được dùng cho khả năng tiếp cận, nhưng có thể để lộ mục đích của tài liệu.

<desc>

Phần tử mô tả. Có thể chứa thông tin chi tiết về hình ảnh, người tạo hoặc mục đích sử dụng.

Chú thích XML

 có thể chứa ghi chú của tác giả, ngày tạo, thông tin phần mềm hoặc thông tin gỡ lỗi.

Namespace của phần mềm vẽ

Đây là chỗ SVG trở nên lộn xộn. Phần mềm vẽ vector nào cũng thêm thuộc tính riêng theo namespace của mình để lưu những tính năng mà SVG không hỗ trợ sẵn. Mở một file Inkscape ra là bạn thấy thuộc tính inkscape: và sodipodi: nhan nhản khắp nơi. Bản thân chúng không phải rủi ro riêng tư, nhưng đủ để lộ bạn dùng phần mềm gì.

inkscape:* / sodipodi:*

Inkscape thêm các thuộc tính theo namespace để lưu tên lớp, vị trí đường gióng, thiết lập tài liệu và lịch sử chỉnh sửa.

<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 nhúng rất nhiều siêu dữ liệu, gồm phiên bản, thiết lập bảng vẽ và đôi khi cả dữ liệu định dạng AI đầy đủ.

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

Sketch / Figma

Các công cụ thiết kế hiện đại có thể nhúng tên lớp, ID component và thiết lập xuất file vào những thuộc tính tùy biến.

Chỉ thị xử lý

Các chỉ thị xử lý XML (<?...?>) ở đầu file SVG có thể để lộ phần mềm đã tạo ra nó.

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

Giữ lại và xóa đi

• Khai báo <?xml ...?>:giữ lại (bắt buộc)
• <?xml-stylesheet ...?>:giữ lại (có tác dụng thật)
• Các chỉ thị xử lý khác:xóa

Xử lý dựa trên DOM

Vì SVG là XML hợp lệ, chúng tôi có thể đọc nó thành cây DOM rồi gỡ đúng những thứ không mong muốn. Cách này chính xác hơn nhiều so với dùng biểu thức chính quy và không vô tình làm hỏng nội dung hợp lệ.

Đọc XML

Phân tích SVG thành tài liệu XML, giữ nguyên cấu trúc

Gỡ các phần tử siêu dữ liệu

Xóa các phần tử <metadata>, <title>, <desc>

Bỏ thuộc tính của phần mềm vẽ

Xóa inkscape:*, sodipodi:* và các namespace khác của phần mềm vẽ

Xóa chú thích

Bỏ toàn bộ chú thích XML trong tài liệu

Dọn dẹp namespace

Xóa những khai báo namespace không còn được dùng ở phần tử gốc

Ghi ra file

Ghi XML đã dọn sạch trở lại thành file SVG

Tóm tắt quá trình xử lý

Được giữ lại

• Toàn bộ hình vector (path, hình khối, chữ)
• Style và CSS
• Gradient và họa tiết
• Bộ lọc và hiệu ứng
• Ảnh nhúng (dạng tham chiếu)
• viewBox và kích thước
• Các namespace SVG chuẩn

Bị xóa

• Phần tử <metadata>
• Phần tử <title>
• Phần tử <desc>
• Chú thích XML
• Thuộc tính inkscape:*
• Thuộc tính sodipodi:*
• Namespace của Adobe/Sketch
• Khai báo namespace không dùng tới

Ảnh nhúng bên trong

Có một cái bẫy khiến nhiều người bất ngờ: file SVG có thể nhúng ảnh raster dưới dạng data URI base64. Những file JPEG hay PNG nhúng đó có thể mang theo siêu dữ liệu EXIF của riêng chúng.

Giới hạn hiện tại

Hiện PicScrub xóa siêu dữ liệu ở mức SVG nhưng chưa giải mã và xử lý những ảnh raster nhúng bên trong:

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

Hiện PicScrub chưa xử lý ảnh raster nhúng trong file SVG. Để bảo đảm riêng tư tuyệt đối, hãy tách những ảnh nhúng đó ra và xử lý riêng.

Định dạng SVG