SVG画像にRDFでメタ情報を記述する：CCライセンスや派生元作品など

これはSVG Advent Calendar 2014の第23日目の参加記事です。昨日はしょん(id:syonx)さんの「SVGでキラキラをつくりたい（願望） - X X X」でした。キラキラとした3Dの球体をSVGで表現するコンテンツを構想中ということで、完成が楽しみですね。

---

はじめに

私はこれまで昨年、一昨年とSVG関連のAdvent Calendarに参加してきて毎度ファイルサイズの削減・最適化をテーマにしていました。

• SVG画像を1キロバイトでも削るダイエット術！
• SVG画像を1バイトでも削るためのコードゴルフ
• SVG画像を書き出す際に重要な設定「小数点以下の桁数」とはなにか？

不要な記述は減らしてファイルサイズを抑える、というのは閲覧者の環境や転送速度を考えると重要な手法ではありますが、その一方で必要な情報はきちんと残す、というのも大切なことです。特にSVGは単なる画像ファイルではなく、XMLをベースとしているため、様々なメタ情報を記述することができます。
今回はSVGファイルに制作者の情報を書き記したり、ライセンスを示したり、また他のファイルや元になった写真との関連性を記述するやり方などを紹介していきます。


例としてこのSVGファイルにメタ情報を加えていきます。

<svg xmlns="http://www.w3.org/2000/svg" width="500" height="450" version="1.1" viewBox="0 0 500 450">
<defs>
<style type="text/css">
	（中略）
</svg>

title要素、desc要素とWAI-ARIA

まずはtitle要素とdesc要素。

<svg xmlns="http://www.w3.org/2000/svg" width="500" height="450" version="1.1" viewBox="0 0 500 450"
 role="img" aria-labelledby="title01  desc01">
<title id="title01">ベンガルトラ</title>
<desc id="desc01">正面を向いたベンガルトラの顔を描いたイラストです。写真を元に写実的に描きました。</desc>
<defs>
<style type="text/css">
	（中略）
</svg>

title要素は文字通りタイトルですね、descはdescriptionの略で説明文です。
これはSVG文書に対して一つだけとは限らず、文書内の図形に対して加えても構いません。どちらも直接描画されることはありませんが、マウスカーソルを図形に重ねたときにツールチップとして表示されます。
こうした図形の場合ならこんな風になります。

<svg width="180" height="100" viewBox="0 0 180 100">
<title>丸と三角形</title>
	<path d="M35 22c-38 0-40 56 1 57 46 1 41-57-1-57z" fill="#f9f960" stroke="#f97f38" stroke-width="6">
		<title>丸</title>
	</path>
	<polygon points="138 14 82 55 151 85" fill="#5BFF34" stroke="#008405" stroke-width="6">
		<title>三角形</title>
	</polygon>
</svg>

デモページ

SVGとWAI-ARIA

このようにtitle,desc要素はSVG文書全体や図形に対しての説明を記述できるのですが、残念ながらそのままだと主要なスクリーンリーダーでは適切に読まれません。そのため、WAI-ARIAを用いて対応しましょう。
この点についての説明は長くなりますから、ちょうど他のAdvent Calendarで書かれた記事や関連リンクなどの紹介に留めておきます。

• object 要素で配置した SVG ロゴをスクリーンリーダーに読ませる / JeffreyFrancesco.org
• 【SVGアクセシビリティ】グラフィックスをアクセシブルにする方法 - E-riverstyle Vanguard
• Using ARIA to enhance SVG accessibility | The Paciello Group - Your Accessibility Partner (WCAG 2.0/508 audits, VPAT, usability and accessible user experience)
• Web developer rules for use of ARIA attributes on SVG1.1 elements
• WAI-ARIA attributes - Document Structure - SVG 2

title要素、desc要素ではこうして説明を加えられますが、

• 誰が制作者したのか？
• いつ公開されたのか？
• ライセンスは？

……といった内容を文章でつらつらと記述するのは受け取る側もややこしいですから、情報を整理して書きたいですよね。そうした時に便利なのがmetadata要素です。

metadata要素

metadata要素は文字通り、メタ情報を記述できる要素です。

---

まずは例としてこのイラストについて書きたい情報をまとめていきます。

1.タイトル

2.内容の説明

これは先のtitle,desc要素をそのまま使います

3.制作者

私（id:rikuo）なのでそのまま「rikuo」

4.制作日

2014年12月17日に制作しました

5.ファイル形式

SVGファイル

6.種類

それは動画なのか音楽なのか？といった種類です。SVGなので画像ですね。

7.この画像の元になったもの

このイラストはこちらの写真を元に制作しました。

この写真の撮影者はJohn HollingsworthさんとKaren Hollingsworthさん、また後にレタッチをZwoenitzerさんがされています。Hollingsworth夫妻はアメリカ合衆国魚類野生生物局の職員ということで、合衆国著作権法により職務上作成した著作物は著作権法の保護対象にならずパブリックドメインとして扱われるため利用させていただきました。

8.他のファイル形式

SVGファイルは正直まだまだ扱えるソフト・アプリが少ないのでこのイラストと同じ内容で別のファイル形式も用意しています。一つはPNGファイル、もう一つはEMFファイルです。EMFファイルは聞き慣れないファイル形式だと思うのですが、Microsoft OfficeのWord、Excel、PowerPointで使われるクリップアートのファイル形式というと分かりやすいでしょうか。

SVGファイルを直接Wordで開くことはできないですが、EMFファイルに変換すると手軽に使えるので便利です。

9.ライセンス

Creative Commons License 4.0のBY-SA にしました。

---

以上がこのイラストに記述したい9個の情報でした。
かなり複雑ですね。これを文章で書くも大変ですし、こうした場合はRDFを使ってみましょう。

RDFとは

RDFとはResource Description Frameworkの略で、様々な情報をそれぞれの関係性を整理して記述できます。具体的にどういう感じになるか？実際にやってみるとこのようになります。

<svg xmlns="http://www.w3.org/2000/svg" width="500" height="450" version="1.1" viewBox="0 0 500 450"
 role="img" aria-labelledby="title01  desc01">
<title id="title01">ベンガルトラ</title>
<desc id="desc01">正面を向いたベンガルトラの顔を描いたイラストです。写真を元に写実的に描きました。</desc>
<metadata>
<rdf:RDF 
	xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" 
	xmlns:dc="http://purl.org/dc/elements/1.1/" 
	xmlns:dcterms="http://purl.org/dc/terms/" 
	xmlns:cc="http://creativecommons.org/ns#">
	<cc:Work rdf:about="http://okiru.net/by-sa/Bengal_Tiger.svg">
		<dc:title>ベンガルトラ</dc:title>
		<dc:description>正面を向いたベンガルトラの顔を描いたイラストです。写真を元に写実的に描きました。</dc:description>
		<dc:creator>rikuo</dc:creator>
		<dc:date>2014-12-17</dc:date>
		<dc:format>image/svg+xml</dc:format>
		<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
		<dc:source>
			<rdf:Description rdf:about="http://commons.wikimedia.org/wiki/File:Panthera_tigris_tigris.jpg">
				<dc:creator>John Hollingsworth</dc:creator>
				<dc:creator>Karen Hollingsworth</dc:creator>
				<dc:creator>Zwoenitzer</dc:creator>
				<cc:license rdf:resource="http://creativecommons.org/publicdomain/mark/1.0/"/>
			</rdf:Description>
		</dc:source>
		<dcterms:hasFormat rdf:resource="http://okiru.net/by-sa/Bengal_Tiger.png" dc:format="image/png"/>
		<dcterms:hasFormat rdf:resource="http://okiru.net/by-sa/Bengal_Tiger.emf" dc:format="image/x-emf"/>
		<cc:license rdf:resource="http://creativecommons.org/licenses/by-sa/4.0/"/>
	</cc:Work>
</rdf:RDF>
</metadata>
<defs>
<style type="text/css">
	（中略）
</svg>

つまり図で説明するとこうなるわけです。

情報が整理されて分かりやすくなりました。
RDFの特徴としてはこうしてまとめるとマシンリーダブルになる……つまり検索エンジンなどでも解析しやすくなるんですよね。


ただRDFの詳しい説明をしだすとかなりややこしいので、リンクの紹介でお茶を濁すでござるの巻。

RDF/XML構文の簡単な説明 - The Web KANZAKI

10年以上前のページですが、やはり分かりやすいですね。

RDF 1.1 関連仕様が W3C 勧告に | WWW WATCH

こちらでは関連リンクがまとまっています。
他にはValidatorやグラフ化のサービスなど

• W3C RDF Validation Service
• ARC2によるRDFグラフの視覚化: Turtle, Microdata, JSON-LD, RDF/XML, TriG

ちなみに今回のRDFをグラフ化するとこのようになります

まとめ、雑感など

ここ数年はブラウザ対応が進んできたこと、そしてなにより様々な画面サイズの機器が増えてきたこともあってかSVGの注目度は高まっているように感じます。

私自身そうした記事をチェックしたり関連書籍を読んでいるものの、その一方でメタ情報、特にRDFの記述を扱った内容って見かけないんですよね。SVGの歴史的にSVG1.0が勧告された2001年から何年かは（当時 急増したXML関連書籍も含め）RDFの活用という機運も高かった時期があったのですが、今日びSVGでRDFって流行らないのかなー、とも思ったり。
実際問題なかなかとっつきにくいのですが*1、RDFを使うとこんな風に情報を整理して記述することもできますよー、という参考になれば幸いです。

><

*1:ただInkscapeにはRDFを手軽に記述できるインターフェースはあります