SVG MANIAX Ver.2 - Mars vanilla

SVG MANIAX
Scalable Vector Graphics
Ver. 2
Mars vanilla
「SVGってもう使っていいの？」勉強会
松田直樹

CCO, Web Designer
松田直樹

SVGってもう使っていいの？

え？みんな使ってるよ

使った方がいい
使える環境の方がシェアがデカい
iOS
4~ 3.2~ 3~ 9~ 3.2~ 3.0~

2012年時点で、CNN が
アメリカ大統領選コンテンツで SVG を使っている
http://edition.cnn.com/election/2012/ecalculator

Google Analytics のグラフも SVG
2013年末で IE8 をサポート外に

ということで
ちゃんと基礎からやってみましょう

<?xml version="1.0" encoding="UTF-8"?>
省略可
省略推奨
<!DOCTYPE svg PUBLIC
"-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 200 200">
...
</svg>
単独ファイルの場合必須
xlink使う場合必須
* HTML5 inline SVG の場合は不要

viewBox 属性を理解しよう

描画領域を指定する
viewBox 属性
表示する領域（viewport）を指定する属性値
Illustrator でのアートボードに相当する

viewBox="0 0 200 160"

viewBox の値は
「px」であって、「px」じゃない
viewBox="0 0 200 160"
width="100%" height="100%"
viewBox="0 0 200 160"
width="" height=""
viewBox="0 0 200 160"

viewBox の値は
利用空間（描画領域）における
座標と長さを変換する基準値

width, height が絶対値指定の場合
width="100px" height="100px" viewBox="0 0 200 200"
<circle cx="100" cy="100" r="100"/>
100px
100px 円の直径は
200
SVG の 1px
=
ブラウザの 0.5px

width, height が相対値指定、もしくは auto の場合
width="100%" height="100%" viewBox="0 0 200 200"
<circle cx="100" cy="100" r="100"/>
可変
円の直径は可変
200
SVG の 1px
=
親要素のサイズに応じる

viewBox の指定がない場合
<circle cx="100" cy="100" r="100"/>
円の直径は
200
SVG の 1px
=
ブラウザの 1px
100px
100px

これが
viewBox 属性による「座標系変換」

viewBox 属性の指定をしないと、
いろんなバグ・不具合と出会えます

大きく分けて
4種類
HTML
<img>
HTML
<object>
<embed>
<iframe>
CSS
bacground
HTML5
inline SVG
外部ファイル参照インライン

外部ファイル参照
img 要素, object 要素, embed 要素, iframe要素,
CSS background-image
HTML
CSS
</>
SVG

インラインSVG
HTML5 内に直接 SVG 要素を記述する
<!doctype html>
<html>
<body>
<svg viewBox="0 0 200 200">
<circle id="c" r="100" x="0" y="0"/>
</svg>
</body>
</html>
HTML
SVG
HTML5 に SVG の名前空間が内包されているので、xmlns の記述は必要なし

SVG Referencing modes
参照モード

HTML
<img>
SVG Referencing modes
HTML
<object>
<embed>
<iframe>
CSS
bacground
HTML5
inline SVG
top-level
document
embedded
document
static image
document
animated image
document
static image
document
animated image
document
Web Fonts mask, pattern …
font document
resource document
https://svgwg.org/specs/integration/#referencing-modes

SVG Processing modes
処理モード

Dynamic
Interactive
Mode
Animated
Mode
Secure
Animated
Mode
Static
Mode
Secure Static
Mode
SVG のすべての機能
を表示可能
SMIL アニメーション
表示可能
表示可能
静止画として
表示
静止画として
表示
実行✓
スクリプトの
参照✓ ✓ ✓
外部リソース
SMIL
アニメーション✓ ✓ ✓
発火✓
DOMイベント
https://svgwg.org/specs/integration/#processing-modes

Dynamic
Interactive
Mode
Animated
Mode
Secure
Animated
Mode
Static
Mode
Secure Static
Mode
SVG のすべての機能
を表示可能
表示可能
表示可能
静止画として
表示
静止画として
表示
HTML
<img>
HTML
<object>
<embed>
<iframe>
CSS
bacground
HTML5
inline SVG
HTML
<img>
CSS
bacground

こんな SVG で試してみましょう
circle要素を
use要素で量産
サイズと色を
アニメーション
svg 内に
png を
base64 で埋め込み
svg 内に
外部 png を配置

こんなコードです
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/
xlink" viewBox="0 0 200 200">
<style type="text/css">
.fillsample { fill: #44bfb7; }
@media screen and (max-width: 400px) {
.fillsample { stroke: #000; }
}
</style>
<defs>
<circle id="c" class="fillsample" r="30">
<animate attributeName="r" begin="0s" dur="7s" from="10" to="30"
repeatCount="indefinite"/>
<animate attributeName="fill" begin="0s" dur="7s" to="#FF8888"
</circle>
</defs>
<use xlink:href="#c" x="30" y="30"/>
...

img 要素
<img src="sample.svg" alt="xxx">
img {
width: 100%;
height: atuo;
}

object 要素
<object type="image/svg+xml" data="sample.svg">
<img src="sample.png" alt="xxx">
</object>
object {
width: 100%;
height: atuo;
}

CSS background
.bgsvg {
background: url(sample.svg) no-repeat 0 0;
background-size: auto;
}
こんなふうにも書けます
background: url('data:image/svg+xml;charset=utf8,
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 10 10" width="10" height="10">
<circle fill="orange" cx="5" cy="5" r="5"/>
</svg>');

inline SVG
<!doctype html>
<html>
<body>
<h1>inline svg</h1>
<svg viewBox="0 0 200 200">
<circle fill="#44bfb7"
cx="15" cx="15" r="30">
</svg>
</body>
</html>

ちなみに IE 11 では
img 要素でも
外部参照可
SMILアニメは
まったく非対応
viewBoxの値が
拡大の最大値
width, height
の指定がないと
おかしい

「Referencing modes」と「Processing modes」は
まだ Working Draft なので、
各ブラウザでの表示仕様も揺れている現状
https://svgwg.org/specs/integration/#referencing-modes
https://svgwg.org/specs/integration/#processing-modes

img 要素
object 要素
iframe 要素CSS background
正常
ラスタライズなので
ボケることあり
svg内にimage要素
で埋め込んだ外部画像
も表示される（第2世
代まで？）
•svg 要素にwidth,height
が指定していない場合、
background-position
の指定を無視して縦横中
央に配置される
•svg 要素にwidth,height
が指定していない場合、
repeat、background-size
が効かない
m e d i a q u e r i e s の
適用が数値通りに適
用されない
animete要素でのアニ
メーションがずれる
インラインSVG
正常
（原因不明のバグあり？）
正常
正常
svg 要素に width, height 属
性が指定してあると、CSS で
の width: 100%; height:
auto; は無視される
正常
• svg の viewBox に
指定した値までしか
拡大できない
• svg の子要素に
transform 等が効か
ない
• animate要素でのアニメーションに対応していない（仕様）
• CSS Animation も効かない
svg 要素に width, height 属
性が指定してあると、CSS で
の width: 100%; height:
auto; は無視される
正常
正常
正常

ちなみに、SVG のレンダリングは
IE が最も綺麗

できること・できないこと
• SVG 文書内のスクリプトは動作しない
• SVG 文書内に埋め込んだ外部ファイルは表示されない（IEを除く）
• SVG 文書内のハイパーリンクは無視される
• SVG 文書内のスクリプトも動作する
• 親 HTMLから、param 要素や contentdocument を用いて SVG
DOM にアクセスも可能
• ただし、親である HTML 側にはイベントはバブリングしない
• SVG のすべての機能を使用できる
• 直接 SVG DOM を操作でき、親 HTML の DOM と連携可能
• 細かい表示がまだまだブラウザ間で違う点がある
img 要素
object 要素
インライン SVG

おすすめコード
img, object, iframe
• svg 要素には、viewBox 属性を必ず指定
• width, height はお好みで
CSS background
• svg 要素には、width, height, viewBox 属性が必須
inline SVG
• svg 要素には、width, height 属性を指定してはいけない

ちなみに、
Illustrator で SVGを保存時、
｢レスポンシブ」をチェック
すると、svg 要素に width と
height 属性が指定されない

問題はこいつら
~8 ~2.3

object 要素で
<img src="fallback.png" alt="xxx">
</object>
ただこの方法だと、sample.svg も fallback.png も読み込んでしまう
HTTPリソースの無駄。

object 要素で
<object data="fallback.png" type="image/png">
<p>xxx</p>
</object>
</object>
object 要素の入れ子なら解決できるけど…

インラインの image 要素で
<svg viewBox="0 0 96 96">
<image
xlink:href="sample.svg"
src="fallback.png"
width="96" height="96" />
</svg>

img 要素 + Modernizr で
<img src="sample.svg" alt="xxx">
if(!Modernizr.svg) {
$('img[src*="svg"]').attr('src', function() {
return $(this).attr('src').replace('.svg', '.png');
});
}

onerror イベントで
<img src="sample.svg"
　　　　　onerror="this.src='fallback.png';">

background-image で
.element {
background-image: url(fallback.png);
background-image: url(sample.svg), none;
}

inline SVG の場合、foreignObject 要素を使う
<html>
<body>
<svg>
本来の SVG のコード …
<foreignObject display="none">
<img src="fallback.png"/>
</foreignObject>
</svg>
</body>
</html>

代替用の PNG 画像を用意するのが
そもそも面倒

svg2png
Gulp, Grunt のタスクとして、
指定したフォルダ内のSVGを
自動で PNG に変換
ただし、
svg要素に width, height の指定必須。
ないと余白が生まれる
https://github.com/akoenig/gulp-svg2png
https://github.com/dbushell/grunt-svg2png

svgstore
指定したフォルダー内の SVG を
ひとつの SVG にマージできる
SVG の CSS Sprite を自動で
生成できる
前頁の svg2png を併用すれば
CSS Sprite のフォールバックも可能
https://github.com/FWeinb/grunt-svgstore
https://github.com/w0rm/gulp-svgstore

大きく分けて
3種類
CSS アニメーション
SVG DOM アニメーション

CSS アニメーション
• transition
• transform
• animation
• @keyframes

SMIL アニメーションと CSS アニメーション
• SVG 2.0 において、SMIL アニメーションは廃止され、
CSS animation、CSS transition 等と統合する方向で
検討されている
• 詳細は、「W3C Scalable Vector Graphics (SVG) 2」
「W3C Web Animations 1.0」にて

http://www.w3.org/TR/web-animations/

var logo = document.getElementById("logo");
var rot = 0;
setInterval(function(){
logo.setAttribute("transform",
"rotate(" + rot + " 100 100)");
rot = rot + 1;
}, 10);

SVG は独自の名前空間を持つため、
DOM Level 1 は使えない
DOM Level 2 のメソッドを使用すること
createElement() createElementNS()

http://www.webbrowsercompatibility.com/svg/desktop/

Canvas と SVG どっち使う？

Canvas SVG
アニメーション高速やや低速
オブジェクトContext DOM
描画方式ビットマップベクター
Web GL, Open GL ○ × (SVG 2から対応予定)
描画キャッシュ機能○ ×
DOM操作× ○
SMIL アニメーション× ○ (ただし負荷高め)
アクセシビリティ× ○

SVG でのアニメーションは
はっきり言って「低速」
• SMIL アニメーションは、特に Webkit で負荷が高い
• IE が SMIL・CSS のアニメーションに非対応
• よって必然的に JavaScript での DOM アニメーションになる
• DOM アニメーションでは、グラフィックアクセラレーターの
恩恵を受けられない
• DOM 操作である以上、Reflow・Repaint の制約を受ける
http://dresscording.com/blog/performance/layout_painting.html

SVG の魅力は、
Illustrator などで1枚絵を書き出したあと、
すぐに動かしたいパーツだけ動かせる
針だけ
動かせる
目だけ
動かせる

SVG の魅力は、
HTML における、SVG 以外の DOM オブジェクトや
CSS と連携できる

SVG（ベクター）なツールが充実してきた
Illustrator CC 2014 Flash CC 2014 Sketch 3

やはり Illustrator が本命

SVG 作成時の注意点
• アートボードのサイズが、svg 要素の width, height, viewBox となる
• すべての単位は「ピクセル」で作る
• レイヤーは g要素となるが、日本語環境だと、id名が「レイヤー_1_」などと
日本語そのままになるので、レイヤー名・グループ名は英数字で
• 「SVGフィルター」も同様。日本語になるので使わない

SVG 保存時の注意点
• 非表示のレイヤーなども「display: none;」で書き出される
• ブレンド、アピアランス、ブラシは、「アプアランスを分割」されて
書き出される
• 画像ブラシはラスタライズされ、png ファイルが別途作られる
• 非表示にしたアピアランスは書き出されない
• アピアランスによっては、SVG のコードが XML として不正になる
• グラデーションメッシュをかけた図形は全体がラスタライズされ、
png ファイルが別途作られる
• 乗算などの描画モードは無視されて書き出される

SVG 保存後のコードの修正
<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/
1.1/DTD/svg11.dtd">
<svg version="1.1"
xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
x="0px" y="0px"
viewBox="0 0 70 60"
style="enable-background:new 0 0 67.7 63.5;"
xml:space="preserve">
×削除
×削除
×削除
×削除
×削除
×削除

<g id="ハンバーガー_1_">
×<path class="st0"
d="M4.2,38.1h59.3v8.5h-4.2l-6.4,6.4l-d="M38.1,0h-8.5C17.9,0,2.1,9.5,2.1,21.2v2.1c0,1.2,0.9,2.1,2.1,2.1h5
9.3c1.2,0,2.1-0.9,2.1-2.1v-2.1C65.6,9.5,49.8,0,38.1,0z
M2.1,59.3c0,2.3,1.9,4.2,4.2,4.2h55c2.3,0,4.2-3z"/>
<path class="st1"
d="M4.2,46.6h59.3c2.3,0,4.2,1.9,4.2,4.2c0,2.3-.9,55,0,53.1,0,50.8C0,48.5,1.9,46.6,4.2,46.6z"/>
<path class="st2"
要変更
日本語の id 名は修正すること

SVG のコードを最低限アクセシブルにする
Illustrator では以下のものは付与されないので自分で追加する
• title 要素 / desc 要素
• aria-*属性 / role属性
<svg viewBox="0 0 200 200" aria-labelledby="title desc" role="img">
<title id="title">タイトルのテキスト</title>
<desc id="desc">説明テキスト</desc>
<a xlink:href="http://example.com" tabindex="0" role="link">
<rect width="75" height="50" rx="20" ry="20" fill="#90ee90"/>
<text x="35" y="30" font-size="1em">Website</text>
</a>
</svg>

SVG を軽くするネタ
• 「パス → 単純化」などで、パス、アンカーの数は極力減らす
• 書き出し時の「小数点以下の桁数」を「0」や「1」くらいにする
• 同じ図形を複数回使うときは、シンボル登録してから配置する。
symbol 要素と use 要素によるモジュール化が行われる
• 逆に、1回しか使わないシンボル図形であれば
「シンボルへのリンクの解除」をしておいたほうがコードは少なくなる
• 非表示のレイヤーは削除しておく

SVG を軽くするネタ
• アピアランスの多用は、図形の要素が増えるだけなので控える
(しかも、defs や symbol によるモジュール化が行われない）
• CSSプロパティは「スタイル要素」にした方がスタイルが class 化
されるのでコードが少なくなる
(ただし、inline SVG などの場合は埋め込む先の HTML の CSS とバッ
ティングする可能であるのでこの限りではない）
• 保存時に svgz 形式にした方が軽くなるが、再編集性を考えると svg で
書き出しておき、Webサーバー側で gzip したほうがいい
(約60～80%軽量化可）

シンボルを効率的に利用する
defs, symbol, use 要素
defs 要素、または symbol 要素で実体のない図形を定義し、
それを use 要素で再利用できる
要素の再利用
<symbol id="s">
<path d="..."/>
</symbol>
<use xlink:href="#s" x="20"
y="10" fill="#fc0"/>

defs 要素と symbol 要素の違い
symbol 要素
• viewBox を定義できるため、単独での座標系を持つ
• つまり、use 要素で再利用する際にサイズを自由に変えられる
• Illustrator のシンボルは symbol 要素に変換される
defs 要素
• 図形要素をグルーピングして単にテンプレート化したもの
• 単独の座標系は持たず、再利用時にサイズは変更できない

松田直樹
ありがとうございました
SVG Scalable Vector Graphics
MANIAX
Ver. 2

SVG MANIAX Ver.2 - Mars vanilla

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to SVG MANIAX Ver.2 - Mars vanilla

Similar to SVG MANIAX Ver.2 - Mars vanilla (20)

SVG MANIAX Ver.2 - Mars vanilla