HTML5NAGOYA#14で今回はテーマが「フロントエンド入門」ということで、SVGについて発表しました。

スライドはこちらです。

SVGってなに？

• Scalable Vector Graphics（スケーラブル・ベクター・グラフィックス)の略
• 画像でもあり、マークアップ言語でもある

最近、Retinaディスプレイ対応だとか、SVGアニメーションで注目されています。私はSVGアニメーションについては勉強していきたいなとは思っています。

と、いうのも最近クライアントさんが「動き（アニメーション）」を求めてくるからです。スライドでも書いていますが、SVGではHTMLやCSSではできないような、より柔軟なアニメーションの表現が可能になります。

SVGは使う前に事前に知識を持っていたほうが良いと思う

SVGは使う前に知識を持っていたほうが良いと感じています。HTMLやCSSを学んだときと同じように、画像ではなくまた違う言語と扱うことをおすすめします。何も知識がないのに「これやって」と言われてちょいっと実装できるものではないからです。

とくにはまったのがMIME TYPEの設定でした。スライドでは一番最後に5段階評価中はまりレベル5をつけています。当時の私にあらかじめ知識があればロゴ画像の表示に2日もかからなかったんだろうなと反省しています。

勉強会の補足

当日の昼休みに新たな事実に気づいたりしたこともあり、自分的には7割話せた感。なので少し補足をさせてください。

フィルター効果とクリッピングについて

IE10以上ということで、とくに検証はせずにHTMLのstyleタグにfilterプロパティやclipping-pathプロパティを指定していたのですが、当日気になってIEを開いたら対応していないことに気づきました。

HTMLのstyleタグ内にプロパティを書いていたのですが、どうやらHTMLのstyleタグ内に書くとCSSプロパティとして認識されてしまうようで、IEでは表示されませんでした。

svg要素内のstyleタグや、インラインでスタイルを書いたらsvgのプロパティとして認識されて、きちんとIEでも実装されました。

発表で紹介し忘れていたのですが、CSSのプロパティとSVGのプロパティがあるとはじめは少しハマるかもしれません。スライド内ではそういった理由からはまりレベル3がついています。

viewboxについて

Illustratorから書き出すとsvgタグに訳の分からない記述が書かれています。その中のviewboxはIllustratorでいう、アートボードのようなものです。viewboxより画像が大きかった場合、画像は切り取られてしまいます。

ちなみに、このviewboxを指定しないとChromeで表示されません。うっかり、クリッピングのデモページでは書くのを忘れていたので、発表中はクリッピングのデモがみれませんでした。今は修正したので直っています。

preserveAspectRatioについて

始まりのsvgタグに書くpreserveAspectRatio。こちらはCSSでいう、background-positionのような役割を指定します。画像のスタートの配置を決めてくれます。

主な私の情報源

• CSS Tricks
• @SarahSoueidan さん

CSS TricksはSVGについての記事を多く取り上げていて、特にこの「A Compendium of SVG Information | CSS-Tricks」という記事ではブログのリンクがまとめらています。

そして@SaraSoueidan さん。こちらの方からの情報源がほとんどと言っていいくらいです。FloridaのCSSConf US 2014でSVGについてお話しされた方です。ブログをみてもSVGをCSSで操作することについての記述が多いので、JSができない私にはちょうどよく理解できるという印象なのでよくみています。

もちろん、日本語のブログやスライドで勉強になったことも多いですが、まとまっていてチェックしておいたほうがいいと思う情報源はこの2つです。

以上です。SVGでつまずいてる人の役に立てたら幸いです。