これぞネ申！ #SVG 方眼紙 - 職業プログラマの休日出勤

この記事は、SVG Advent Calendar 2017 の3日目の記事です。

SVG Advent Calendar には、過去にこのような記事も投稿しています。

さて、世の中にはExcel方眼紙（WikiPediaの記事）、俗に言う神Excel ネ申Excel が蔓延っています。批判も多いですが、使いどころさえ誤らなければ、方眼紙というものは極めて有益なものです。決して方眼紙そのものに敵意を抱いてはなりません。私は、適した使い方をしている方眼紙を心の底から愛しています。
今回は、同じく愛を注ぐ対象であるSVGで、方眼紙を具現化したいと思います。

崇拝の対象である、SVG方眼紙

SVGを見ることのできないブラウザでは表示されないでしょうけれども、そのような方は早急にブラウザを乗り換えて下さい。

一応、WindowsのChromeで描画したときのスクリーンショットのラスタ画像も貼り付けておきましょう。
f:id:t_motooka:20171202104947p:plain

上記のSVGのソースは、次の通りです。後で解説します。

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300" width="400px" height="300px">
	<defs>
		<pattern id="thePattern" patternUnits="userSpaceOnUse" x="0" y="0" width="10" height="10" viewBox="0 0 10 10">
			<rect x="0" y="0" width="10" height="10" stroke="#000000" stroke-width="0.5" fill="none"/>
		</pattern>
	</defs>
	<rect x="0" y="0" width="400" height="300" fill="url(#thePattern)"/>
</svg>

そもそもSVGって何者？

上記のSVGのソースのように、XML（テキストデータ）でベクタ画像を描くためのファイルフォーマットです。
PNGやJPEG等のラスタ画像とは異なり、各ピクセルの情報を保管するのではなく、どのように作図するのかの定義を記述する方式になっているので、拡大してもキレイです（例外あり：SVGの中にもラスタ画像を埋め込むことができますので、それらは拡大しまくるとキレイじゃないです）。

どのようにして方眼紙を描いているのか？

SVGソースの中に pattern というものが見えますが、これは座標平面を敷き詰めるタイルの1枚分の模様を表現しています。
最後に出てくる rect 要素には fill="url(#thePattern)" というものが見えますが、これは、描画する矩形（くけい：長方形のこと）の中を pattern で定義したタイルを敷き詰めるように描画することを意味しています。

では pattern の中身、つまりタイル一枚の様子はどうなっているかと言いますと、正方形の枠線だけを描画しています。ここでいう「線」は、算数や数学の世界で理解しているような太さゼロの線ではありません。グラフィックの世界では線にも太さがあります。タイル一枚のサイズと正方形の概念上のサイズとは完全に一致させていますが、正方形の枠線の太さはゼロではないので、タイル一枚の少し内側に枠線が描かれます。これが隣接するタイルと並べて描かれたとき、あたかも「ふつうに」枠線が描画されているように見えるのです。