読者です 読者をやめる 読者になる 読者になる

職業プログラマの休日出勤

職業プログラマによる日曜自宅プログラミングや思考実験の成果たち。リアル休日出勤が発生すると更新が滞りがちになる。記事の内容は個人の意見であり、所属している(いた)組織の意見ではない。

名古屋の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 そのものも楽しく使っていきましょう!

さいごに

運営してくださっているWCANの皆様、セッションやLTで講演された皆様、そして当日参加された皆様、ありがとうございました!

参考図書

SVG Essentials

SVG Essentials

※英語です