XML でできた構造

SVG はこのサイトで扱う他の形式と大きく違います。バイナリではなく、ただの XML テキストだからです。テキストエディタで開けばそのまま読めてしまいます。おかげでメタデータの削除は考え方としては単純になりますが、その分、情報が潜める場所も増えます。

メタデータは専用の要素として現れることもあれば、任意の要素の属性、 XML のコメント、処理命令として入っていることもあります。ベクターエディタは自分たちのデータを 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>わたしのイラスト</title>
  <desc>作成者: 山田太郎</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:名前空間の宣言
<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>山田太郎</dc:creator>
      <dc:date>2024-01-15</dc:date>
    </rdf:Description>
  </rdf:RDF>
</metadata>

<title>

SVG 全体や個々の要素に付ける、人が読むためのタイトルです。アクセシビリティのために使われることが多いのですが、その文書の用途が読み取れてしまうこともあります。

<desc>

説明の要素です。画像の内容、作成者、用途についての詳しい情報が入ることがあります。

XML のコメント

 には、作成者のメモ、作成日、ソフトの情報、デバッグ用の情報などが入っていることがあります。

エディタの名前空間

SVG がごちゃごちゃしてくるのはここからです。ベクターエディタはどれも、 SVG が標準では扱えない機能を保存するために、自分たちの名前空間の属性を追加します。Inkscape のファイルを開けば inkscape: や sodipodi: の属性が至るところにあるはずです。それ自体がプライバシーのリスクというわけではありませんが、使っているソフトの指紋にはなります。

inkscape:* / sodipodi:*

Inkscape は、レイヤー名、ガイドの位置、ドキュメントの設定、編集履歴のために名前空間付きの属性を追加します。

<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 はバージョン、アートボードの設定、ときには AI 形式のデータ一式まで、大量のメタデータを埋め込みます。

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

Sketch / Figma

最近のデザインツールは、レイヤー名、コンポーネントの ID、書き出し設定を独自の属性に埋め込むことがあります。

処理命令

SVG ファイルの先頭にある XML の処理命令（<?...?>）には、使ったソフトが書かれていることがあります。

<?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 ...?>:残します（表示に必要なため）
• そのほかの処理命令:削除します

DOM を使った処理

SVG は正しい XML なので、DOM ツリーとして解析し、不要なものだけを外科手術のように取り除けます。正規表現による方法よりも正確で、有効な内容をうっかり壊す心配もありません。

XML の解析

構造を保ったまま SVG を XML 文書として解析します

メタデータ要素の削除

<metadata>、<title>、<desc> の要素を取り除きます

エディタ属性の除去

inkscape:*、sodipodi:* などエディタの名前空間を削除します

コメントの削除

文書内のすべての XML コメントを取り除きます

名前空間の整理

ルート要素から使われていない名前空間の宣言を削除します

書き出し

きれいになった XML を SVG ファイルとして書き出します

処理のまとめ

残るもの

• ベクター画像のすべて（パス、図形、テキスト）
• スタイルと CSS
• グラデーションとパターン
• フィルタと効果
• 埋め込み画像（参照）
• viewBox とサイズ
• 標準の SVG 名前空間

削除されるもの

• <metadata> 要素
• <title> 要素
• <desc> 要素
• XML のコメント
• inkscape:* の属性
• sodipodi:* の属性
• Adobe/Sketch の名前空間
• 使われていない名前空間の宣言

埋め込まれた画像

見落としがちな落とし穴があります。SVG ファイルには、base64 のデータ URI としてラスター画像を埋め込めるのです。その JPEG や PNG が、自分自身の EXIF メタデータを抱えている可能性があります。

現時点での制限

PicScrub は SVG レベルのメタデータは削除しますが、埋め込まれたラスター画像をデコードして処理することはしません。

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

現在、PicScrub は SVG 内に埋め込まれたラスター画像を処理しません。万全を期すなら、埋め込み画像を取り出して個別に処理してください。

SVG 形式