　Inkscape 0.92で生成されたものはSVGバージョンが1.0だった。古いと思われるのでSVG規格の仕様を調査して最適なファイルを手動生成した。

SVG画像

　今回使用するのは前回までに作成したSVG画像を元にする。

　これはInkscape 0.92によって生成されたSVG画像ファイルをベースにしている。

　Inkscape 0.92 release noteによると2017-01-01公開らしいので、2025-04-06現在から見ると8年前になる。出力形式も古いはず。出力したSVGファイルを開くとversion="1.0"だった。

　作成当時はSVG規格の細かい仕様について考慮しなかったが、今回は仕様を考慮してテキストエディタで新しく妥当なSVG文書を書きたい。

SVG規格

バージョン

ver	状態	更新日
1.0	W3C勧告	2001-09-04
1.1	W3C勧告	2011-08-16
1.2	W3C勧告	2008-12-22
2.0	W3C勧告候補	2018-10-04

　現状では2.0で書くことが推奨されていると思われる。MDNの一部を見ると1.1の表記は非推奨だったから（後述）。

　正式には1.1が最新だと思う。1.2は2.0により使われなくなったらしく、2.0はまだ「W3C勧告候補」だという。その意味する所は理解できていないが、他は「候補」がないので、まだ最終段階ではないのだろう。

　1.0と1.1の違いは誤記修正らしい。なので大差ないと思われる。

　つまり2.0一択ということで良いはず。ブラウザ実装が追いついているかは知らない。それを調べる方法がないとグーグルのAIが言っていたのでお手上げ。

DOCTYPE

　SVG1.1からDOCTYPEは非推奨になった。

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

SVG 文書に DOCTYPE 宣言を含める事は、推奨されない。

SVG 1.1 1.概要 1.3 SVG の名前空間, 公開識別子, システム識別子

　SVGはXMLのサブセットなのでファイルの冒頭にDOCTYPEを書いていたが、1.1で非推奨になった。

属性

SVGの属性について理解する

属性/版	1.0	1.1	2.0	注釈	概要
`xmlns`	必	必	必	インライン時は省略可	XML文書における名前空間`xmlns="http://www.w3.org/2000/svg"`
`viewBox`	必	必	必	省略すると表示崩れの原因になる。`width`,`height`と一致させるべし。	ビューポートにあわせて収縮する領域
`width`	任	任	任	単位px	ビューポートサイズ（幅）
`height`	任	任	任	単位px	ビューポートサイズ（高さ）
`version`	任	任	非	`1.0`/`1.1`(省略時`1.0`)	文書のSVGバージョン
`xmlns:xlink`	条	条	非	SVG内で`<a>`使用時必須。インライン時省略可	`xmlns:xlink="http://www.w3.org/1999/xlink"`
`xml:space`	任	任	非	-	SVG内空白保持是非(`preserve`設定時に改行やタブがスペースに置換される)`xml:space="preserve"`/`"default"`

印	意味
必	必須
条	条件付き必須
任	任意(省略可)
非	非推奨

　これを元にどうマークアップすればいいかまとめる。

　以下の属性は省略する。

versionは省略する（省略時は1.0だが2.0では非推奨）
xmlns:xlinkは省略する（2.0では非推奨でありhrefを使う）
xml:spaceは省略する（2.0では非推奨であり改行やタブを使わない）

　最小構成は以下。viewBoxのサイズは任意だが、ここでは256とした。

index.html

<svg viewBox="0 0 256 256"></svg>

　SVGファイルとして外部保存するならxmlns必須。基本的には付けておいたほうが良いかも。

some.svg

<svg xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 256 256">
</svg>

　href参照を使う場合は次のようにできる。これは2.0の表記であり、Chrome 92で表示できた。

index.html

<svg>
  <def>
    <circle cx="50" cy="50" r="50" id="foo"></circle>
  </def>
  <use href="#foo" />
  <use x="120" y="80" href="#foo" />
</svg>

　ただし以下のように外部参照する場合はHTTPSサーバ上で動作させないと表示されなかった。

circle.svg

<svg xmlns="http://www.w3.org/2000/svg">
  <def>
    <circle cx="50" cy="50" r="50" id="foo"></circle>
  </def>
</svg>

index.html

<use href="./circle.svg#foo" />
<use x="120" y="80" href="./circle.svg#foo" />

ローカルHTTPSサーバを立てる（Python + openssl）

　尚、1.1以下の場合はxmlns:xlinkで参照するようだが、現在MDNでは非推奨となっている。つまり、2.0表記が推奨されているようだ。従って以下のxmlns:xlink表記は古く、辞めるべき。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <def>
    <circle cx="50" cy="50" r="50" id="foo"></circle>
  </def>
  <use xlink:href="#foo" />
  <use x="120" y="80" xlink:href="#foo" />
</svg>

　このことから、現在はSVG2.0を使うべきだと思われる。

やってみる

アウトプットすべく己を導くためのブログ。その試行錯誤すらたれ流す。

SVG規格を意識したファイル作成

SVG画像

SVG規格

バージョン

DOCTYPE

属性