SVG勉強会大阪でLT（Adobe XDからのSVG書き出し）してきたよ！
公開日： 最終更新日：2017-12-18
Perfumeの新曲「If you wanna」リリースでメディア露出が増えているのでニヤニヤが止まりません、@よしぱんですこんにちは。のっち美しいよのっち。
先日JUSO Coworkingで開催された「SVG勉強会大阪 vol.1」に参加してきました。
ちょうどSVGを勉強しようって思っていたタイミングだったので「絶対参加したい！！」…と思ったのに、あっという間に定員オーバーに！！
「なんでも良いからSVGについて5分間喋る」という枠がまだ空いていたので「LT枠」で申し込みました。（LT＝ライトニングトーク）
SVG勉強会大阪 vol.1
Evernoteを掘り返してみると、2014年の年始目標に「SVGを理解して使ってみる」って書いてありました。おい、3年半も何やってたんだよ私！！
なんとなく「ベクター形式の画像で拡大縮小しても画像がギザギザしない」「Illustrator等などで書き出せる」ぐらいは知ってたけど、まだ実務ではほとんど使ったことがありません。
今回の勉強会はそんな初心者の私にぴったりの「SVGは何か」という手引きから「アプリケーションからの書き出しと注意事項」、実務ですぐに役立ちそうな「コードに組み込む方法」の3セッションでした。
SVG入門 by Kite(@ixkaito）さん
「SVGとは」「特徴」などから入り、華麗なデモを見せてくださいました。IE9〜11はwidthとheightの指定がないと表示がおかしくなるので回避策が必要など、ハマりドコロを先に知っておけたのは大収穫でした。
あと、デモが凄い！！座標を暗算して手打ちってもう、人間計算機？！っていう、見事なデモで面白かったです。
SVGのアプリケーション書き出し by すぴかあやか(@spicagraph）さん
Illustrator、Photoshop、SketchでのSVG書き出しについて、それぞれの特徴とアプリケーションごとの差異、注意事項などを、こちらもデモ中心で見せてくれはりました。
アプリケーションや設定によって書き出されるSVGの座標の小数点以下が何桁までかが違うなんて、考えもしなかったし、デザイナー目線でのセッションはとても興味深かったです。
SVGをコードで見てみよう by こざる(@kozaru_kodera）さん
最後のこざるさんはコーダー目線のセッションでした。省略できるもの、省略しない方が良いもの、記述のコツなど、すぐに実務で使えそうな内容を初心者にも分かりやすくまとめてくださいました。
スライドも公開されています。ありがたい！→ kozarusha.com/svg201708/#/
LT「Adobe XDで初めてのSVG書き出し やってみた。」
3人の「やっぱりすごいなぁ！」っていうセッションを聞いた後のLTで、自分の内容の薄さに半泣きになりました。でも参加者の皆さんが優しく生暖かく見守ってくれた（…と信じている！）お陰で楽しくLTできました！
他のLT枠の方は、
- After Effects＋BodymovinでSVGアニメーション
- Animate CC（Flashの後継）でのSVG書き出し
- SVGをJSで動かす話
- SVGで地図を作ってダウンロード
と、動的な話が多くて「そんなことができるんだ！！すげー！！」の連続でした。そんな中でふざけたLTしてほんとスミマセン！！
LT枠で申し込んだお陰で予習ができて、より理解できた！
今回普通に参加していたら、予習せずに行って華麗なデモを見て「へーー、凄い！」で終わっていたかもしれません。でもLTのネタ探しのために事前にSVGについて調べたり勉強したお陰で、セッションを聞いて「ああ、そういうことだったんだ！」「あー、理解できた！」という気づきがたくさん得られました。
ああ、WordCampKyoto実行委員長のおかもとさんが言ってはった「100回の参加より1回の登壇」ってこういうことなのかもなぁ…と実感できた1日でした。
有意義な勉強会を開催してくださった主催者のみなさん、ありがとうございました！！あとJUSO Coworkingの居心地良すぎたのでまた作業しに行きます！
追記：WordPressではSVGファイルはアップロードできなかった…
早速ブログのアイキャッチ画像にもSVGファイル使うぞー！って思ったけど、WordPressのアップローダーではSVG形式はアップロードできないのですね…。プラグインを使ったりfunctions.phpに書き込んだりで対応可能のようですが「SVGはOGPやTwitter cardで表示されない」という記事も見かけたので、また時間を見つけてこの辺りもちゃんと勉強してみます。
