SVG MANIAX - CSS Nite After dark7
131 likes•25,822 views
「文書としてのSVG」の特徴、ブラウザでの挙動の違い、Webページヘの埋め込み方、フォールバックの方法などを紹介します。このスライドを見たあと、Illustrator で書き出した SVG のコードをぜひ眺めてみてください。
![<img src="sample.svg" alt="xxx">
img 要素
if(!Modernizr.svg) {
$('img[src*="svg"]').attr('src', function() {
return $(this).attr('src').replace('.svg', '.png');
});
}
fallback](https://image.slidesharecdn.com/afterdark7-svg-matsuda-140411003621-phpapp01/85/SVG-MANIAX-CSS-Nite-After-dark7-41-320.jpg)
SVG MANIAX - CSS Nite After dark7
- 2. SVG の最大の 特徴
- 3. 画像 であり、 文書 である
- 13. • 拡縮自在なベクター画像 • CSS による装飾 • DOM API • 文書リソースとしての汎用性
- 15. SVG1.1 Second Edition の要素は 80 個 <SVG/> HTML5より少ないので覚えられる
- 17. 宣言と名前空間 <?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>
- 18. 描画領域・比率 viewBox 属性 preserveAspectRatio 属性 該当する図形の表示する領域を指定する Illustrator でのアートボード 拡縮の際の基準点および縦横の比率を指定する
- 19. 描画領域・比率 viewBox 属性 100 x 100 <svg viewBox="0 0 100 100" > 0, 0 100, 100 0,0
- 20. 描画領域・比率 viewBox 属性 0,0 100 x 100 <svg viewBox="-100 -100 90 90" > -100, -100 90, 90
- 21. 図形 path 要素 line 要素 rect 要素 circle 要素 ellipse 要素 polygon 要素
- 22. グループ化 g 要素 複数の図形をグループ化する Illustrator での グループ と レイヤー はこの要素で再現される <g> <rect ... /> <rect ... /> <rect ... /> <rect ... /> </g>
- 23. モジュール化 defs, symbol, use 要素 defs 要素、および symbol 要素 で実体のない図形を定義し、 それを use 要素で再利用できる 要素の再利用 <defs> <path d="..."/> </defs> <use xlink:href="#c" x="20" y="10" fill="purple"/>
- 24. 変形 transform 属性 matrix, translate, scale, rotate, skewX, skewY にて変形 Illustrator では ほぼすべて matrix で再現される 要素の変形 <path ... transform="skewX(15)" />
- 25. グラデーション 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>
- 26. マスク 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)"/>
- 27. フィルター効果 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 が 充実している
- 28. Illustrator における注意点 • 通常のフィルターは png 化される • でも、SVGフィルターが使いものにならない • メッシュグラデーションは png 化される • ブレンドは拡張されて書き出される • アピアランスは分割される • ブラシもアピアランス分割状態に • 乗算などの描画モードは無視される
- 33. 大きく分けて 2種類の使い方
- 34. 外部ファイル参照 img 要素, object 要素, iframe要素, background-image HTML CSS </> SVG 1
- 35. インライン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
- 36. どう違う？
- 38. こんな SVG で試してみましょう circle要素を use要素で量産 サイズと色を アニメーション svg 内に 外部 png を配置 svg 内に png を base64 で埋め込み
- 39. <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"/> ... こんなコードです
- 40. <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"/> ... こんなコードです width height 指定なし Media Queries も あったり SMIL アニメーション させてたり
- 41. <img src="sample.svg" alt="xxx"> img 要素 if(!Modernizr.svg) { $('img[src*="svg"]').attr('src', function() { return $(this).attr('src').replace('.svg', '.png'); }); } fallback
- 42. <object type="image/svg+xml" data="sample.svg"> <img src="sample.png" alt="xxx"> </object> object 要素
- 43. .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>'); こんなふうにも書けます
- 44. <!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
- 45. DEMO
- 46. ちなみに IE 11 では
- 47. img 要素 object 要素 iframe 要素 CSS background animate要素でのアニメーションに対応していない（仕様） svg内にimage要素で 埋め込んだ外部画像も 表示される（第2世代ま で？） • svg要素にwidth,heightが 指定していない場合、 background-position の 指定を無視して縦横中央に 配置される • svg要素にwidth,heightが 指定していない場合、 repeat、background- size が効かない media queries の 適用が数値通りに適用 されない 正常 正常 animete要素でのアニメ ーションがずれる インラインSVG 正常 正常 正常 正常 正常 正常 svg に height:auto を指 定すると viewBox の高さ がブラウザの高さになる svg に height:auto を指 定すると viewBox の高さ がブラウザの高さになる 正常 •svg の viewBox に指 定した値までしか拡大で きない •インラインSVG の要素 に transform 等が効か ない
- 48. • SVG 文書内のスクリプトは動作しない • SVG 文書内に埋め込んだ外部ファイルは表示されない（IEを除く） • SVG 文書内のハイパーリンクは無視される • SVG 文書内のスクリプトも動作する • param 要素 や contentdocument を用いて DOM にアクセスも可能 • ただし、親である HTML 側にはイベントはバブリングされない • SVGのすべての機能を使用できる • 直接 SVG DOM を操作できる • 細かい表示がまだまだブラウザ間で違う点がある できること・できないこと img 要素 object 要素 インライン SVG
- 49. SVG をアニメーションさせる
- 50. 大きく分けて 3種類の方法
- 51. SMIL アニメーション <circle fill="#000" r="30"> <animate attributeName="r" begin="0s" dur="7s" from="10" to="30" repeatCount="indefinite"/> </circle>
- 52. DEMO
- 54. CSS アニメーション • transition • transform • animation • @keyframes
- 55. SVG DOM アニメーション var logo = document.getElementById("logo"); var rot = 0; setInterval(function(){ logo.setAttribute("transform", "rotate(" + rot + " 100 100)"); rot = rot + 1; }, 10);
- 56. SVG DOM アニメーション SVG は独自の名前空間を持つため、 DOM Level 1 は使えない DOM Level 2 のメソッドを使用すること createElement() createElementNS()
- 58. SVG を扱う JS ライブラリ
- 62. DEMO
- 63. SVG の使いどころ
- 64. img 要素 • 静止画としては実用レベル • png や gif の代わりに十分使える • 動きは animate 要素による SMILアニメーションのみ • フォールバックは JS で判別すべし
- 65. object 要素 • フォールバックも考えると、最もオススメ • animate 要素だけでなく、SVG 内の JS や CSS も動く • 親 HTML 側との JS 連携は面倒くさい （param や contentdocument でアクセス可能だけど） • SVG 内のイベントは、親 HTML 側にバブリングしない
- 66. CSS Background • IE での表示を担保するため、 svg 要素に viewBox, width, height の指定は必須 • 幅・高さを固定した場合、CSS Sprite でも問題なく使える
- 67. インライン SVG • SVG のすべての機能が使える • SVG DOM を扱うことができる • IE では、SVG 内の要素に CSS transition, animation, transform 等は効かない • IE では、viewBox の指定以上に大きく表示できないので、 viewBox の数値は必要な分以上に指定すること • フォールバックが面倒くさい
- 68. アニメーション •アニメーションをさせるなら JS 必須 • ただし、IEを除けば SMILアニメーションがお手軽 • 本格的なアニメーションは Canvas を使用する (SVG よりもパフォーマンスがいい） • SVG には DOM を扱える利点 • イラストの一部分だけを動かしたい、などに向いている
- 69. SVG のフォールバック
- 71. grunt-svg2png gruntのタスクとして、 指定したフォルダ内のSVGを 自動で PNG に変換 ただし、 svg要素に width, height の指定がないと 余白が生まれる https://github.com/dbushell/grunt- svg2png
- 72. grunt-svgstore 指定したフォルダー内の SVG を ひとつの SVG にマージできる SVG の CSS Sprite を自動で 生成できる https://github.com/FWeinb/grunt- svgstore 前頁の grunt-svg2png を併用すれば CSS Sprite のフォールバックも可能
- 73. 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
- 74. おまけ - こんな使い方まで
- 76. <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>
- 78. SVG の未来
- 79. 2014年 勧告目標 SVG 2.0 W3C Working Draft 11 February 2014
- 80. SVG 2.0 で実現される見込みの機能 • メッシュグラデーション（meshGradient要素） • SMILアニメーションとCSSアニメーションとの統合 • HTML的なテキストの折り返し • フィルター機能の拡張 • OpenGL対応
- 81. さいごに
- 82. 文書 であるSVG は
- 86. 松田直樹 SVG MANIAX Scalable Vector Graphics ありがとうございました