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

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

セッション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)を変えることは可能です。

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

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

ビジュアライゼーション

ロゴ

アイコン

パスの隙間を解決するFilter

React + SVG

SVG最適化

SVGの罠のDEMO

2019年、CSS Niteでは49回の関連イベントを通して123セッションが行われました。その中からベスト・セッション+αを選びました。

2010年から2019年のベスト・セッション