青い
を描いた。
SVG（Scalable Vector Graphics）は比較的新しいベクトル形式の画像フォーマットです。Adobe IllustratorやオープンソースのInkscapeなどで作成できるほか，テキストファイルですので，Windowsの「メモ帳」などのテキストエディタでも簡単に作れます。単独のファイルにできるほか，HTML5の中にインラインで書くこともできます。
SVGはほとんどの新しいブラウザで使えます。IEだけは対応が遅かったのですが，やっとIE 9で使えるようになりました。モバイル環境でも問題なく使えるはずです（例外：Android 3未満，Opera mini，ガラケー）。
LaTeXやMacのKeynote等はSVGの貼り付けができません。SVG→PNG/PDF変換にはlibrsvgが便利です。brew install librsvg や yum install librsvg2-tools でインストールして，rsvg-convert --format=pdf --output=hoge.pdf hoge.svg のようにして変換します。
単位のない数値はピクセル単位になります。座標は，左上隅が原点 (0,0) で，右向きにx座標，下向きにy座標が増えます。
青い を描いた。
<p>青い
<svg width="50" height="50">
<circle cx="25" cy="25" r="22" fill="#9999FF" stroke="black" stroke-width="2" />
<text x="25" y="30" text-anchor="middle">まる</text>
</svg>
を描いた。</p>
テキストエディタ（「メモ帳」など）で次のように書いて，maru.svg というファイル名で保存します。文字コードはutf-8にします。インラインで書き込む方法と違って，svg の属性として xmlns="http://www.w3.org/2000/svg" を書かないとうまく認識しないようです。また，文字は svg または text の属性として style="font-size:16px" のようなことを書いておかないと表示されないことがあるようです。
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="50" height="50" style="font-size:16px"> <circle cx="25" cy="25" r="22" fill="#9999FF" stroke="black" stroke-width="2" /> <text x="25" y="30" text-anchor="middle">まる</text> </svg>
このようなファイルは img タグで画像として読み込むことができます。
青い
<p>青い<img src="maru.svg" alt="まる">を描いた。</p>
svgが読み込めない場合は，.htaccess
というファイルに次のように書いてみてください：
AddType image/svg+xml svg AddType image/svg+xml svgz
svgファイルはgzipで圧縮することもできます。圧縮後の拡張子は svgz にします。LinuxやMacのコマンドで次のように打ち込めば maru.svg から maru.svgz が作れます。
gzip -cfq9 maru.svg >maru.svgz
青い
を描いた。
<p>青い<img src="maru.svgz" alt="まる">を描いた。</p>
svgが読み込めてsvgzが読み込めない場合は，.htaccess
というファイルに次のように書いてみてください：
AddEncoding gzip svgz
ただしsvgzファイルはブラウザで単独で開けるとは限りません。また，サーバとブラウザが圧縮に対応していれば，圧縮は自動的にされるはずなので，svgのままでもネットワーク負荷は増えないはずです。
上の例に示したように，円を描くのは <circle cx="中心のx" cy="中心のy" r="半径" /> です。線の色は stroke，内部の色は fill，線の幅は stroke-width で指定します。
<svg width="200" height="100"> <circle cx="100" cy="50" r="40" stroke="black" fill="none" /> </svg>
省略した値は 0 になります。ただし，半径を 0 にすると，描かれません。
四角形を描くのは <rect x="左上隅のx" y="左上隅のy" width="幅" height="高さ" /> です。線の色は stroke，内部の色は fill，線の幅は stroke-width で指定します。
<svg width="200" height="100"> <rect x="20" y="20" width="160" height="80" stroke="black" fill="none" /> </svg>
省略した値は 0 になります。ただし，幅や高さを 0 にすると，描かれません。
点を描きたいときは小さい四角形を塗りつぶします：
<svg width="200" height="100"> <rect x="98" y="48" width="4" height="4" fill="black" /> </svg>
今までPostScriptで描いていたベクトルグラフィックはそのままSVGに移行できます。しかも，命令はずっと簡単になります。
| PostScript | SVG | |
|---|---|---|
| 絶対移動 | 100 200 moveto | M 100 200 |
| 相対移動 | 100 200 rmoveto | m 100 200 |
| 絶対線分 | 100 200 lineto | L 100 200 |
| 相対線分 | 100 200 rlineto | l 100 200 |
| 絶対曲線 | 1 2 3 4 5 6 curveto | C 1 2 3 4 5 6 |
| 相対曲線 | 1 2 3 4 5 6 rcurveto | c 1 2 3 4 5 6 |
| パスを閉じる | closepath | Z |
これらの命令を <svg> ... </svg> の中の <path d="..." /> の中に書きます。
座標は繰り返すことができます。例えば L 10 20 L 30 40 は L 10 20 30 40 でもかまいません。
下の例では，位置が見やすいように，背景に黄色い長方形（rect）を描きました。
<svg width="200" height="100"> <rect width="200" height="100" fill="yellow" /> <path d="M 20 10 L 180 10 100 90" fill="none" stroke="black" stroke-width="5" /> </svg>
こちらに移動しました。
Last modified: