使う前に知っておきたいSVGのこと

有限会社アップルップル 森田 かすみ

HTML5NAGOYA#14

SVGでつまずくことがある

SVGでつまずくことがある

それなのにSVGは注目されつつある（同じことが何年も前から言われてるらしいけど）

それなのにSVGは注目されつつある（同じことが何年も前から言われてるらしいけど）

使う前に問題を知っておけばこわくない！

SVGの魅力を伝えながら気をつけたいところをご紹介します

SVGとは

SVGとは

SVGとは

ベクター形式の画像フォーマット

ベクター形式とラスタ形式の画像の違い

マークアップ言語のひとつ

SVGができること

SVGができること

SVG効果

clippath要素でパスの切り抜き

IE10ハマりレベル

クリップパスとは

http://mkasumi.com/demo/SVG/clippath.html

+ =

クリップパスとは

http://mkasumi.com/demo/SVG/clippath.html

+ =

jpeg SVG

実装

CSSだけで形を指定する

http://mkasumi.com/demo/SVG/clippath_basic.html

SVG要素を使用するべき複雑な形の例

http://mkasumi.com/demo/SVG/clippath_text.html

フィルター効果

IE10ハマりレベル

Blur効果の例

→

http://mkasumi.com/demo/SVG/filter.html

png

実装

CSSのfilterとのちがい

IE非対応

アニメーション

アニメーション

JSのアニメーション

http://snapsvg.io/

http://d3js.org/

http://www.svgjs.com/

CSSのアニメーションハマりレベル

IE非対応

SMILアニメーションハマりレベル

IE非対応

SMILアニメーション

http://mkasumi.com/demo/SVG/smilAnimation.html

使い方次第で表現方法が豊富になる！

パスアニメーション

http://tympanus.net/Tutorials/ShapeHoverEffectSVG/index2.html

フォーム

http://tympanus.net/Development/AnimatedCheckboxes/

クリップパスをつかったスライド

http://codepen.io/yoksel/pen/eIxmr?editors=110

表現方法を選択する基準

SVGを表示する方法

SVGを表示する方法

画像として書き出して表示するハマりレベル

画像として書き出して表示するハマりレベル

img要素ハマりレベル

object要素ハマりレベル

こんなこともできる

background-imageプロパティハマりレベル

HTMLに直接書いてインラインで表示する

svg要素

JSやCSSが適用される

リンクがつけられる

フォールバック

SVGの表示方法を選ぶ基準

SVGの表示方法を選ぶ基準

実際にSVG画像を作成してみる

SVG編集ソフト

ツールでSVG作ったときに気をつけたいところ

レイヤー名、グループ名は後のid名になる

レイヤー名、グループ名は後のid名になる

フォントはアウトライン化しておくハマりレベル

保存する

保存する

テキストエディタで編集する

不要なコードの削除

ちょっとしたポイント

ちょっとしたポイント

軽量化

https://github.com/svg/svgo

http://petercollingridge.appspot.com/svg_optimiser

MIMEタイプの設定ハマりレベル

MAX

実際ハマったページ

実際ハマったページ

まとめ

まだ業務で必ず使う技術じゃないかもしれない

今のうちに勉強して慣れておきたい言語のひとつです！

だからこそ

ご清聴ありがとうございました！