名古屋の Web 界隈の集まりである WCAN(ダブキャン と読むそうです)主催のイベント、WCAN mini 2016 Vol.2 SVG Maniax in NAGOYA に参加してきました。
これまで、SVGのオンラインのイベントには何度か参加していました。
ですが、オフラインでのイベントは非常に珍しいものです。新幹線に乗ってでも名古屋へ行く価値はありました。
得られた知見の数々
Togetterにまとまっているので、こちらを見られるのが良いでしょう。
togetter.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で講演された皆様、そして当日参加された皆様、ありがとうございました!
参考図書

- 作者: J. David Eisenberg,Amelia Bellamy-Royds
- 出版社/メーカー: O'Reilly Media
- 発売日: 2014/10/23
- メディア: Kindle版
- この商品を含むブログを見る