ピックアップ

HTML5 SVGを使ってピクトグラムを描いてみる

7月27日(土)にピクトグラム版ハッカソン「ピクタソン(Pictathon)」を開催します。

参加者はお題に対して、ピクトグラムのアイデアを競います。

デザイナーしか参加が難しいかと言うと、そんなことはないな、と思ってHTML5のSVGを使ってピクトグラムを描く実験をしてみました。

まずは、完成形をご覧ください。

完成イメージ

html5 SVG ピクトグラム 1

IllustratorやFireworksといったグラフィック・ソフトを使わずにコードのみで描いています。

ピクトグラムのデザイン構造は、ひもとくと「まる」と「しかく」が基本となっています(著書「たのしいインフォグラフィック入門」55ページ参照)。

デザイン構造

ピクトグラム デザイン構造

ですので、「まる」はcircleタグ、「しかく」はrectタグで描画すれば、ピクトグラムがコードだけで描けます。

「まる」を描くコード

<circle cx="中心のx座標" cy="中心のy座標" r="半径サイズ" />

cxは「center x」、cyは「center y」、rは「radius(半径)」のこと。

「しかく」を描くコード

<rect x="左上位置のx座標" y="左上位置のy座標" width="幅" height="高さ" />

それでは頭と胴体を描いてみます。

頭と胴体

ピクトグラム 頭 胴体

<!-- 頭 -->
<circle cx="45" cy="35" r="7" />
<!--胴体-->
<rect x="35" y="44" width="20" height="37" />

それから腕を描きます。

ピクトグラム 腕

肩の部分の半円をどう描くかですこし悩みましたが、クリッピングで解決。
クリッピングとマスキング

右腕のコード。

<clipPath id="right-shoulder">
	<rect x="27" y="44" width="8" height="8" />
</clipPath>
<circle cx="35" cy="52" r="8" clip-path="url(#right-shoulder)"/>
<rect x="27" y="52" width="6" height="24" />
<circle cx="30" cy="76" r="3" />
<rect x="33" y="52" width="2" height="2" />

左腕は同じ要領で。

最後に足。

足は「しかく」と「まる」で描けます。

ピクトグラム 足

			<!--右足-->
			<rect x="35" y="81" width="9" height="34" />
			<circle cx="39.5" cy="116" r="4.5" />
			<!--左足-->
			<rect x="46" y="81" width="9" height="34" />
			<circle cx="50.5" cy="116" r="4.5" />

完成ソース

ピクトグラムを描画している部分は20行。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML5 SVG ピクトグラム入門 例</title>
	</head>
	<body>
		<svg>
			<!-- 頭 -->
			<circle cx="45" cy="35" r="7" />
			<!--胴体-->
			<rect x="35" y="44" width="20" height="37" />
			<!-- 右腕 -->
			<clipPath id="right-shoulder">
				<rect x="27" y="44" width="8" height="8" />
			</clipPath>
			<circle cx="35" cy="52" r="8" clip-path="url(#right-shoulder)"/>
			<rect x="27" y="52" width="6" height="24" />
			<circle cx="30" cy="76" r="3" />
			<rect x="33" y="52" width="2" height="2" />
			<!--左腕-->
			<clipPath id="left-shoulder">
				<rect x="55" y="44" width="8" height="8" />
			</clipPath>
			<circle cx="55" cy="52" r="8" clip-path="url(#left-shoulder)"/>
			<rect x="57" y="52" width="6" height="24" />
			<circle cx="60" cy="76" r="3" />
			<rect x="55" y="52" width="2" height="2" />
			<!--右足-->
			<rect x="35" y="81" width="9" height="34" />
			<circle cx="39.5" cy="116" r="4.5" />
			<!--左足-->
			<rect x="46" y="81" width="9" height="34" />
			<circle cx="50.5" cy="116" r="4.5" />
		</svg>
	</body>
</html>

ということで、「ピクタソン」にプログラマーの参加もお待ちしています!

プロフィール

櫻田潤

櫻田 潤

プログラマー、システムエンジニア、ウェブデザイナーを経て、2010年よりビジュアルシンキング運営開始。2014年12月よりNewsPicks編集部でインフォグラフィックス・エディターとして記事執筆。研修・インベント講師や書籍執筆も行なっている。著書に『たのしいインフォグラフィック入門』ほか。

05 Jul, 2013