svg maniax - css nite after dark7
DESCRIPTION
「文書としてのSVG」の特徴、ブラウザでの挙動の違い、Webページヘの埋め込み方、フォールバックの方法などを紹介します。このスライドを見たあと、Illustrator で書き出した SVG のコードをぜひ眺めてみてください。TRANSCRIPT
SVG MANIAX松田直樹
Scalable Vector Graphics
SVG の最大の 特徴
画像 であり、 文書 である
Scalable Vector Graphics
拡張可能な
それが SVG
XML 文書であるがゆえ
単なる｢画像｣を超越できる存在。
SVG を効果的に使ったサイト
http://www.city.tondabayashi.osaka.jp/map/index.html
http://www.polygon.com/a/ps4-review
• 拡縮自在なベクター画像• CSS による装飾• DOM API• 文書リソースとしての汎用性
SVG をXML として理解する
SVG 1.1 Second Edition の要素は 80 個
<SVG/>
HTML5より少ないので覚えられる
これだけは覚えておきたい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
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 200 200">
...
</svg>
描画領域・比率
viewBox 属性
preserveAspectRatio 属性
該当する図形の表示する領域を指定する
Illustrator でのアートボード
拡縮の際の基準点および縦横の比率を指定する
描画領域・比率
viewBox 属性
100 x 100
<svg viewBox="0 0 100 100" >
0, 0
100, 100
0,0
描画領域・比率
viewBox 属性
0,0
100 x 100
<svg viewBox="-100 -100 90 90" >
-100, -100
90, 90
図形
path 要素 line 要素 rect 要素
circle 要素 ellipse 要素 polygon 要素
グループ化
g 要素複数の図形をグループ化する
Illustrator での グループ と レイヤー はこの要素で再現される
<g><rect ... /><rect ... /><rect ... /><rect ... />
</g>
モジュール化
defs, symbol, use 要素defs 要素、および symbol 要素 で実体のない図形を定義し、
それを use 要素で再利用できる
要素の再利用
<defs>
<path d="..."/>
</defs>
<use xlink:href="#c" x="20"
y="10" fill="purple"/>
変形
transform 属性matrix, translate, scale, rotate, skewX, skewY にて変形Illustrator では ほぼすべて matrix で再現される
要素の変形
<path ... transform="skewX(15)" />
グラデーション
linearGradient 要素, radialGradient 要素
linearGradient 要素と radialGradient 要素で適用
SVG では 塗りにも線にも適用できる
グラデーションの変形は gradientTransform 属性で指定
<linearGradient id="grd" gradientUnits="userSpaceOnUse"
x1="0" y1="0" x2="30" y2="30">
<stop offset="0" style="stop-color:#FC6256"/>
<stop offset="1" style="stop-color:#44BFB7"/>
</linearGradient>
マスク
clip, clipPath, mask 要素矩形・円形・パスによるマスクと、グラデーションマスク
<defs>
<clipPath id="myClip">
<circle cx="40" cy="40" r="50"/>
</clipPath>
</defs>
<rect x="0" y="0" width="100" height="100"
clip-path="url(#myClip)"/>
フィルター効果
filter 要素複雑すぎるので、手書きはあきらめる
<defs>
<filter id="fil" filterUnits="userSpaceOnUse" x="0" y="0" width="100" height="100"> <feGaussianBlur stdDeviation="4"/> </filter></defs>
<polygon points="47,0 95,..." filter="url(#fil)"/>
Inkscape が充実している
Illustrator における注意点
• 通常のフィルターは png 化される
• でも、SVGフィルターが使いものにならない
• メッシュグラデーションは png 化される
• ブレンドは拡張されて書き出される
• アピアランスは分割される
• ブラシもアピアランス分割状態に
• 乗算などの描画モードは無視される
SVG で使えるCSS プロパティ
SVG, HTML 両方で使えるプロパティ
•font•font-family•font-size•font-size-adjust•font-stretch•font-style•font-variant•font-weight•direction•letter-spacing•text-decoration•text-rendering
•unicode-bidi•word-spacing•clip•cursor•display
•opacity
•overflow
•pointer-events
•visibility
SVG 固有のプロパティ
•clip-path•clip-rule•color•mask•enable-background•filter•flood-color•flood-opacity•lighting-color•stop-color•stop-opacity•color-interpolation•color-interpolation-filters•color-profile
•color-rendering•fill•fill-opacity•fill-rule•image-rendering•marker-end•marker-mid•marker-start•shape-rendering•stroke•stroke-dasharray•stroke-dashoffset•stroke-linecap•stroke-linejoin
•stroke-mitterlimit•stroke-opacity•stroke-width•alignment-baseline•baseline-shift•dominant-baseline•glyph-orientation-horizontal•glyph-orientation-vertical•kerning•text-anchor•writing-mode
Web サイト(HTML)内におけるSVG の使い方
大きく分けて
2 種類の使い方
外部ファイル参照
img 要素, object 要素, iframe要素, background-image
HTMLCSS</>
SVG
1
インライン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</>
2
どう違う？
地味にいろいろ異なるブラウザ間でも違ってくるし、
SVG のコードによっても違ってくる
こんな SVG で試してみましょう
circle要素をuse要素で量産
サイズと色をアニメーション
svg 内に外部 png を配置
svg 内にpng を
base64 で埋め込み
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" 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" repeatCount="indefinite"/> </circle></defs><use xlink:href="#c" x="30" y="30"/>...
こんなコードです
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" 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" repeatCount="indefinite"/> </circle></defs><use xlink:href="#c" x="30" y="30"/>...
こんなコードですwidthheight指定なし
Media Queries もあったり
SMILアニメーションさせてたり
<img src="sample.svg" alt="xxx">
img 要素
if(!Modernizr.svg) {
$('img[src*="svg"]').attr('src', function() {
return $(this).attr('src').replace('.svg', '.png');
});
}
fallback
<object type="image/svg+xml" data="sample.svg">
<img src="sample.png" alt="xxx">
</object>
object 要素
.bgsvg {
background: url(sample.svg) no-repeat 0 0;
background-size: auto;
}
CSS background
background: url('data:image/svg+xml;utf8,
<svg viewBox="0 0 10 10" width="10" height="10">
<circle fill="orange" cx="5" cy="5" r="5"/>
</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>
インライン SVG
DEMO
ちなみに IE 11 では
img 要素object 要素iframe 要素 CSS background
animate要素でのアニメーションに対応していない（仕様）
svg内にimage要素で埋め込んだ外部画像も表示される（第2世代まで？）
• svg要素にwidth,heightが指定していない場合、background-position の指定を無視して縦横中央に配置される• svg要素にwidth,heightが指定していない場合、repeat、background-size が効かない
media quer ies の適用が数値通りに適用されない
正常
正常
animete要素でのアニメーションがずれる
インラインSVG
正常
正常
正常
正常
正常
正常
svg に height:auto を指定すると viewBox の高さがブラウザの高さになる
svg に height:auto を指定すると viewBox の高さがブラウザの高さになる
正常
•svg の viewBox に指定した値までしか拡大できない•インラインSVG の要素に transform 等が効かない
• SVG 文書内のスクリプトは動作しない
• SVG 文書内に埋め込んだ外部ファイルは表示されない（IEを除く）
• SVG 文書内のハイパーリンクは無視される
• SVG 文書内のスクリプトも動作する
• param 要素 や contentdocument を用いて DOM にアクセスも可能
• ただし、親である HTML 側にはイベントはバブリングされない
• SVGのすべての機能を使用できる
• 直接 SVG DOM を操作できる
• 細かい表示がまだまだブラウザ間で違う点がある
できること・できないこと
img 要素
object 要素
インライン SVG
SVG をアニメーションさせる
大きく分けて
3 種類の方法
SMIL アニメーション
<circle fill="#000" r="30">
<animate attributeName="r" begin="0s" dur="7s" from="10" to="30" repeatCount="indefinite"/></circle>
DEMO
CSS アニメーション
• transition
• transform
• animation
• @keyframes
SVG DOM アニメーション
var logo = document.getElementById("logo");
var rot = 0;
setInterval(function(){
logo.setAttribute("transform",
"rotate(" + rot + " 100 100)");
rot = rot + 1;
}, 10);
SVG DOM アニメーション
SVG は独自の名前空間を持つため、DOM Level 1 は使えないDOM Level 2 のメソッドを使用すること
createElement() createElementNS()
http://www.webbrowsercompatibility.com/svg/desktop/
SVG を扱う JS ライブラリ
DEMO
SVG の使いどころ
img 要素
•静止画としては実用レベル
• png や gif の代わりに十分使える
•動きは animate 要素による SMILアニメーションのみ
•フォールバックは JS で判別すべし
object 要素
•フォールバックも考えると、最もオススメ
• animate 要素だけでなく、SVG 内の JS や CSS も動く
•親 HTML 側との JS 連携は面倒くさい（param や contentdocument でアクセス可能だけど）
• SVG 内のイベントは、親 HTML 側にバブリングしない
CSS Background
• IE での表示を担保するため、svg 要素に viewBox, width, height の指定は必須
•幅・高さを固定した場合、CSS Sprite でも問題なく使える
インライン SVG
• SVG のすべての機能が使える
• SVG DOM を扱うことができる
• IE では、SVG 内の要素に CSS transition, animation,transform 等は効かない
• IE では、viewBox の指定以上に大きく表示できないので、viewBox の数値は必要な分以上に指定すること
•フォールバックが面倒くさい
アニメーション
•アニメーションをさせるなら JS 必須
•ただし、IEを除けば SMILアニメーションがお手軽
•本格的なアニメーションは Canvas を使用する(SVG よりもパフォーマンスがいい）
• SVG には DOM を扱える利点
•イラストの一部分だけを動かしたい、などに向いている
SVG のフォールバック
代替用の PNG 画像を用意するのが
そもそも面倒
grunt-svg2png
gruntのタスクとして、
指定したフォルダ内のSVGを
自動で PNG に変換
ただし、
svg要素に width, height の指定がないと
余白が生まれる
https://github.com/dbushell/grunt-
svg2png
grunt-svgstore
指定したフォルダー内の SVG を
ひとつの SVG にマージできる
SVG の CSS Sprite を自動で
生成できる
https://github.com/FWeinb/grunt-
svgstore
前頁の grunt-svg2png を併用すれば
CSS Sprite のフォールバックも可能
Quick Look コマンド
Mac の場合、以下のコマンドでSVG を PNG に変換できる
$ qlmanage -t -s 640 -o . logo.svg
png のサイズ指定
参考）https://developer.apple.com/library/mac/documentation/userexperience/conceptual/quicklook_programming_guide/articles/qldebugtest.html
おまけ - こんな使い方まで
テキストに
CSS を超えた表現を施す
<h1>
<svg class="demo1" viewBox="0 0 290 40"
width="290" height="40">
<text class="demo1-heading" x="0" y="30">
CSS Nite After Dark
</text>
</svg>
</h1>
SVG の未来
2014年 勧告目標
SVG 2.0W3C Working Draft 11 February 2014
SVG 2.0 で実現される見込みの機能
• メッシュグラデーション（meshGradient要素）• SMILアニメーションとCSSアニメーションとの統合• HTML的なテキストの折り返し• フィルター機能の拡張• OpenGL対応
さいごに
文書 であるSVG は
ということは
Git で差分が取れるし、
マージもできる
SVG が更に普及する未来は見えている
SVG と仲良くなるなら今のうち
松田直樹
SVG MANIAXScalable Vector Graphics
ありがとうございました