名古屋のSVGイベントに参加してきました - 職業プログラマの休日出勤

名古屋の Web 界隈の集まりである WCAN（ダブキャンと読むそうです）主催のイベント、WCAN mini 2016 Vol.2 SVG Maniax in NAGOYA に参加してきました。

wcan.jp

これまで、SVGのオンラインのイベントには何度か参加していました。

ですが、オフラインでのイベントは非常に珍しいものです。新幹線に乗ってでも名古屋へ行く価値はありました。

得られた知見の数々

Togetterにまとまっているので、こちらを見られるのが良いでしょう。
togetter.com

自分で喋った内容

こんな内容で喋りました。

speakerdeck.com

このとき、デモで使った花火の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" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 400">
	<rect fill="#000000" x="0" y="0" width="400" height="400"/>
	<defs>
		<g id="particle1">
			<rect x="196" y="90" width="8" height="20" fill="#c06090"/>
			<rect x="196" y="60" width="8" height="20" fill="#ff9030"/>
		</g>
		<g id="group1">
			<use xlink:href="#particle1" transform="rotate(0 200 200)"/>
			<use xlink:href="#particle1" transform="rotate(10 200 200)"/>
			<use xlink:href="#particle1" transform="rotate(20 200 200)"/>
			<use xlink:href="#particle1" transform="rotate(30 200 200)"/>
			<use xlink:href="#particle1" transform="rotate(40 200 200)"/>
			<use xlink:href="#particle1" transform="rotate(50 200 200)"/>
			<use xlink:href="#particle1" transform="rotate(60 200 200)"/>
			<use xlink:href="#particle1" transform="rotate(70 200 200)"/>
			<use xlink:href="#particle1" transform="rotate(80 200 200)"/>
		</g>
	</defs>
	<g>
		<use xlink:href="#group1" transform="rotate(0 200 200)"/>
		<use xlink:href="#group1" transform="rotate(90 200 200)"/>
		<use xlink:href="#group1" transform="rotate(180 200 200)"/>
		<use xlink:href="#group1" transform="rotate(270 200 200)"/>
	</g>
</svg>

このソースを拡張子 .svg で保存し、Webブラウザに読み込ませると、スライド中に登場する花火のイラストが表示されるはずです。
（スライド中に登場する画像は blur などのフィルタをかけていますが、下のソースでは省略しています。）
この画像は、時計の12時の部分にいる破片を時計回りに90度分だけコピーし、その90度の扇型のものを4つ並べて円形にしています。

ここで、保存したSVGのソースの <g id="particle1"> の子要素をいじくると、花火全体の見栄えが変わると思います。たった1箇所を変えるだけで全体が変わるのです！
みなさんもぜひ <use> 要素を活用していって下さい。

もちろん、SVG そのものも楽しく使っていきましょう！