CSS Nite LP47「Coder's High 2016」フォローアップ（3）松田直樹さん（まぼろし）

2016年9月24日（土）TKPガーデンシティPREMIUM神保町で開催したCSS Nite LP47「Coder's High 2016」のフォローアップとして、松田直樹さん（まぼろし）の『ハマるSVG』セッションのスライドなどを公開します。

• スライド（PDF）
• 音声
• 動画

セッション3「ハマるSVG」を担当いたしましたまぼろしの松田です。

ご参加いただきました皆様、誠にありがとうございました。そして、お疲れ様でした。

SVG実装時における罠として、10のトラブルシューティング例をお話しいたしました。

「Coder's High」なイベントにおいてみなさんのテンションを Low にしてしまったのではないかと懸念しておりましたが、アンケートではご評価いただけたようで安心いたしました。

実装の面倒な点ばかり紹介しましたが、SVGはやはり「キレイ」「無劣化」「再利用性」「アクセシブル」といったメリットを多く保持している画像形式です。面倒な点は一旦置いておいて、まずは使ってみてください。使えば使うほどハマる（夢中になる）かと思います。

次のバージョンであるSVG2の仕様についても、9月15日に勧告候補となりました。もっと可能性を持った画像に進化しようとしています。我々コーダーがSVGを使ってどんどん普及させてまいりましょう。

以下、アンケートでいただいた質問への回答です。

「background-image の SVGの色を変える方法はないですか？」

SVGはその表示のさせ方によってセキュリティレベルが定められており、background-image や img要素で表示させた場合は、HTML側からSVGの中身にまったくアクセスできないようになっています。なので、一般的には色を変えられません。
ただ、SVGファイルの中にCSSを記述し、Media Queriesなどを利用して図形の色（fill）を変えることは可能です。

当日のスライドにて紹介した参考サイト

アニメーション &インタラクション

• Buses: The Weird and Wonderful https://arrivabusandcoach.co.uk/buses-the-weird-and-wonderful
• Experience Fleximize - A HTML5 Mission Statement https://fleximize.com/mission/

ビジュアライゼーション

• EU Referendum Results - BBC News http://www.bbc.com/news/politics/eu_referendum/results
• Olympic Feathers https://nbremer.github.io/olympicfeathers/

ロゴ

• Starbucks Coffee Japan - スターバックス コーヒー ジャパン http://www.starbucks.co.jp/
• KONICA MINOLTA 日本 | コニカミノルタ http://www.konicaminolta.jp/
• WPJ - デザイナー、エンジニア、マーケターの「掛け算」のスキルアップを応援する パスファインディング・メディア https://www.webprofessional.jp/

アイコン

• Delivering Octicons with SVG ? GitHub https://github.com/blog/2112-delivering-octicons-with-svg
• Making the Switch Away from Icon Fonts to SVG: Converting Font Icons to SVG https://sarasoueidan.com/blog/icon-fonts-to-svg/

パスの隙間を解決するFilter

• SnookSVG w Polycleaner http://codepen.io/grayghostvisuals/pen/JKmRwY

React + SVG

• Tags and Attributes | React https://facebook.github.io/react/docs/tags-and-attributes.html
• Creating an SVG Icon System with React | CSS-Tricks https://css-tricks.com/creating-svg-icon-system-react/

SVG最適化

• GitHub - svg/svgo: Nodejs-based tool for optimizing SVG vector graphics files. https://github.com/svg/svgo
• SVGOMG - SVGO's Missing GUI https://jakearchibald.github.io/svgomg/

SVGの罠のDEMO

• LP47 DEMO - SVG Aspect in img http://codepen.io/readymadegogo/pen/JRXOEQ
• LP47 DEMO - inline SVG Aspect http://codepen.io/readymadegogo/pen/WGwXOd
• LP47 DEMO - inline SVG Fluid (padding hack) http://codepen.io/readymadegogo/pen/EgKbvz
• LP47 DEMO - SVG in CSS background http://codepen.io/readymadegogo/pen/WGwzEd
• LP47 DEMO - SVG ClipPath + autoprefixer http://codepen.io/readymadegogo/pen/kkbjJz
• LP47 DEMO - SVG Icon with React http://codepen.io/readymadegogo/pen/KgrKAB