Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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 文書としての SVG
宣言と名前空間
<?xml version="1.0" encoding="UTF-8"?> 省略可 省略推奨 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Gra...
viewBox 属性を理解しよう
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200px" height="200px" viewBo...
描画領域を指定する viewBox 属性 表示する領域（viewport）を指定する属性値 Illustrator でのアートボードに相当する
width="200px" height="160px" viewBox="0 0 200 160"
<svg viewBox="0 0 100 100" > 100 x 100 0, 0 100, 100 0,0
<svg viewBox=“-100 -100 190 190" > 0,0 100 x 100 -100, -100 190, 190
viewBox の値は 「px」であって、「px」じゃない width="100px" height="80px" viewBox="0 0 200 160" width="100%" height="100%" viewBox="0...
viewBox の値は 利用空間（描画領域）における 座標と長さを変換する基準値
width, height が絶対値指定の場合 width="100px" height="100px" viewBox="0 0 200 200" <circle cx="100" cy="100" r="100"/> 100px 1...
width, height が相対値指定、もしくは auto の場合 width="100%" height="100%" viewBox="0 0 200 200" <circle cx="100" cy="100" r="100"/> ...
viewBox の指定がない場合 width="100px" height="100px" <circle cx="100" cy="100" r="100"/> 円の直径は 200 SVG の 1px = ブラウザの 1px ...
これが viewBox 属性による「座標系変換」
viewBox 属性の指定をしないと、 いろんなバグ・不具合と出会えます
HTML への埋め方
大きく分けて 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="...
SVG Referencing modes 参照モード
HTML <img> SVG Referencing modes HTML <object> <embed> <iframe> CSS bacground HTML5 inline SVG top-level docum...
SVG Processing modes 処理モード
Dynamic Interactive Mode Animated Mode Secure Animated Mode Static Mode Secure Static Mode SVG のすべての機能 を表示可能 ...
SVG Processing modes Dynamic Interactive Mode Animated Mode Secure Animated Mode Static Mode Secure Static Mod...
Referencing DEMO
Processing DEMO
こんな 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"> <st...
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/ xlink" viewBox="0 0 200 200"> <style type="...
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: ...
CSS background .bgsvg { background: url(sample.svg) no-repeat 0 0; background-size: auto; } こんなふうにも書けます background: ...
inline SVG <!doctype html> <html> <body> <h1>inline svg</h1> <svg viewBox="0 0 200 200"> <circle fill="#44bfb7" cx=...
Processing DEMO
ちなみに IE 11 では img 要素でも 外部参照可 SMILアニメは まったく非対応 viewBoxの値が 拡大の最大値 width, height の指定がないと おかしい
「Referencing modes」と「Processing modes」は まだ Working Draft なので、 各ブラウザでの表示仕様も揺れている現状 https://svgwg.org/specs/integration/#...
img 要素 object 要素 iframe 要素CSS background 正常 ラスタライズなので ボケることあり svg内にimage要素 で埋め込んだ外部画像 も表示される（第2世 代まで？） •svg 要素にw...
ちなみに、SVG のレンダリングは IE が最も綺麗
できること・できないこと • SVG 文書内のスクリプトは動作しない • SVG 文書内に埋め込んだ外部ファイルは表示されない（IEを除く） • SVG 文書内のハイパーリンクは無視される • SVG 文書内のスクリプトも動作する •...
おすすめコード img, object, iframe • svg 要素には、viewBox 属性を必ず指定 • width, height はお好みで CSS background • svg 要素には、width, height,...
ちなみに、 Illustrator で SVGを保存時、 ｢レスポンシブ」をチェック すると、svg 要素に width と height 属性が指定されない
fallback
問題はこいつら ~8 ~2.3
object 要素で <object type="image/svg+xml" data="sample.svg"> <img src="fallback.png" alt="xxx"> </object> ただこの方法だと、sampl...
object 要素で <object type="image/svg+xml" data="sample.svg"> <object data="fallback.png" type="image/png"> <p>xxx</p> </...
インラインの image 要素で <svg viewBox="0 0 96 96"> <image xlink:href="sample.svg" src="fallback.png" width="96" height="96" /...
img 要素 + Modernizr で <img src="sample.svg" alt="xxx"> if(!Modernizr.svg) { $('img[src*="svg"]').attr('src', function() ...
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="fallb...
代替用の PNG 画像を用意するのが そもそも面倒
svg2png Gulp, Grunt のタスクとして、 指定したフォルダ内のSVGを 自動で PNG に変換 ただし、 svg要素に width, height の指定必須。 ないと余白が生まれる https://github....
svgstore 指定したフォルダー内の SVG を ひとつの SVG にマージできる SVG の CSS Sprite を自動で 生成できる 前頁の svg2png を併用すれば CSS Sprite のフォールバックも可能 h...
アニメーション
大きく分けて 3種類 SMIL アニメーション CSS アニメーション SVG DOM アニメーション
SMIL アニメーション <circle fill="#000" r="30"> <animate attributeName="r" begin="0s" dur="7s" from="10" to="30" repeatCo...
SMIL Animation DEMO
CSS アニメーション • transition • transform • animation • @keyframes
SMIL アニメーション と CSS アニメーション • SVG 2.0 において、SMIL アニメーションは廃止され、 CSS animation、CSS transition 等と統合する方向で 検討されている • 詳細は、「W3C...
http://www.w3.org/TR/web-animations/
http://www.w3.org/TR/SVG2/
SVG DOM アニメーション var logo = document.getElementById("logo"); var rot = 0; setInterval(function(){ logo.setAttribute("tr...
SVG DOM アニメーション 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操作× ○ S...
SVG でのアニメーションは はっきり言って「低速」 • SMIL アニメーションは、特に Webkit で負荷が高い • IE が SMIL・CSS のアニメーションに非対応 • よって必然的に JavaScript での DOM ア...
SVG の魅力は、 Illustrator などで1枚絵を書き出したあと、 すぐに動かしたいパーツだけ動かせる 針だけ 動かせる 目だけ 動かせる
SVG の魅力は、 HTML における、SVG 以外の DOM オブジェクトや CSS と連携できる
snap.svg を使う
http://snapsvg.io/
snap.svg DEMO
SVG と Adobe Illustrator
SVG（ベクター）なツールが充実してきた Illustrator CC 2014 Flash CC 2014 Sketch 3
やはり Illustrator が本命
Illustrator での注意点
SVG 作成時の注意点 • アートボードのサイズが、svg 要素の width, height, viewBox となる • すべての単位は「ピクセル」で作る • レイヤー は g要素となるが、日本語環境だと、id名が「レイヤー_1_」な...
SVG 保存時の注意点 • 非表示のレイヤーなども「display: none;」で書き出される • ブレンド、アピアランス、ブラシは、「アプアランスを分割」されて 書き出される • 画像ブラシはラスタライズされ、png ファイルが別途...
SVG 保存後のコードの修正 <?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 18.1.0, SVG Export Plug-In . SVG...
<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...
SVG のコードを最低限アクセシブルにする Illustrator では以下のものは付与されないので自分で追加する • title 要素 / desc 要素 • aria-*属性 / role属性 <svg viewBox="0 0 2...
SVG を軽くするネタ
SVG を軽くするネタ • 「パス → 単純化」などで、パス、アンカーの数は極力減らす • 書き出し時の「小数点以下の桁数」を「0」や「1」くらいにする • 同じ図形を複数回使うときは、シンボル登録してから配置する。 symbol 要素...
SVG を軽くするネタ • アピアランスの多用は、図形の要素が増えるだけなので控える (しかも、defs や symbol によるモジュール化が行われない） • CSSプロパティは「スタイル要素」にした方がスタイルが class 化 さ...
シンボルを効率的に利用する defs, symbol, use 要素 defs 要素、または symbol 要素 で実体のない図形を定義し、 それを use 要素で再利用できる 要素の再利用 <symbol id="s"> <pat...
<symbol id="tw"> <path d="M64,6.2c-1.1,0.6-4.3,1.8-7.3,2.1c1.9-1 ,4.8-4.5,5.5-7.2c-1.9,1.2-6.1,2.9-8.2,2.9 v0C51.5,1.6...
defs 要素 と symbol 要素の違い symbol 要素 • viewBox を定義できるため、単独での座標系を持つ • つまり、use 要素で再利用する際にサイズを自由に変えられる • Illustrator のシンボルは s...
松田直樹 ありがとうございました SVG Scalable Vector Graphics MANIAX Ver. 2
SVG MANIAX Ver.2 - Mars vanilla
Upcoming SlideShare
Loading in …5
×

SVG MANIAX Ver.2 - Mars vanilla

32,915 views

Published on

「SVG MANIAX - CSS Nite After dark7」
http://www.slideshare.net/ssuser99dc16/svg-maniaxcss-nite-after-dark7-svgmatsuda
を再編したものです。いろいろ追加もしました。

Published in: Design
no profile picture user
Show More

SVG MANIAX Ver.2 - Mars vanilla

  1. 1. SVG MANIAX Scalable Vector Graphics Ver. 2 Mars vanilla 「SVGってもう使っていいの？」勉強会 松田直樹
  2. 2. CCO, Web Designer 松田直樹
  3. 3. SVGってもう使っていいの？
  4. 4. え？ みんな使ってるよ
  5. 5. 使った方がいい 使える環境の方がシェアがデカい iOS 4~ 3.2~ 3~ 9~ 3.2~ 3.0~
  6. 6. 2012年時点で、CNN が アメリカ大統領選コンテンツで SVG を使っている http://edition.cnn.com/election/2012/ecalculator
  7. 7. Google Analytics のグラフも SVG 2013年末で IE8 をサポート外に
  8. 8. ということで ちゃんと基礎からやってみましょう
  9. 9. XML 文書としての SVG
  10. 10. 宣言と名前空間
  11. 11. <?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 の場合は不要
  12. 12. viewBox 属性を理解しよう
  13. 13. <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200px" height="200px" viewBox="0 0 200 200"> <circle cx="100" cy="100" r="100"/> </svg>
  14. 14. 描画領域を指定する viewBox 属性 表示する領域（viewport）を指定する属性値 Illustrator でのアートボードに相当する
  15. 15. width="200px" height="160px" viewBox="0 0 200 160"
  16. 16. <svg viewBox="0 0 100 100" > 100 x 100 0, 0 100, 100 0,0
  17. 17. <svg viewBox=“-100 -100 190 190" > 0,0 100 x 100 -100, -100 190, 190
  18. 18. viewBox の値は 「px」であって、「px」じゃない width="100px" height="80px" viewBox="0 0 200 160" width="100%" height="100%" viewBox="0 0 200 160" width="" height="" viewBox="0 0 200 160"
  19. 19. viewBox の値は 利用空間（描画領域）における 座標と長さを変換する基準値
  20. 20. 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
  21. 21. width, height が相対値指定、もしくは auto の場合 width="100%" height="100%" viewBox="0 0 200 200" <circle cx="100" cy="100" r="100"/> 可変 円の直径は可変 200 SVG の 1px = 親要素のサイズに応じる
  22. 22. viewBox の指定がない場合 width="100px" height="100px" <circle cx="100" cy="100" r="100"/> 円の直径は 200 SVG の 1px = ブラウザの 1px 100px 100px
  23. 23. これが viewBox 属性による「座標系変換」
  24. 24. viewBox 属性の指定をしないと、 いろんなバグ・不具合と出会えます
  25. 25. HTML への埋め方
  26. 26. 大きく分けて 4種類 HTML <img> HTML <object> <embed> <iframe> CSS bacground HTML5 inline SVG 外部ファイル参照インライン
  27. 27. 外部ファイル参照 img 要素, object 要素, embed 要素, iframe要素, CSS background-image HTML CSS </> SVG
  28. 28. インライン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 の記述は必要なし
  29. 29. SVG Referencing modes 参照モード
  30. 30. 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
  31. 31. SVG Processing modes 処理モード
  32. 32. Dynamic Interactive Mode Animated Mode Secure Animated Mode Static Mode Secure Static Mode SVG のすべての機能 を表示可能 SMIL アニメーション 表示可能 SMIL アニメーション 表示可能 静止画として 表示 静止画として 表示 実行✓ スクリプトの 参照✓ ✓ ✓ 外部リソース SMIL アニメーション✓ ✓ ✓ 発火✓ DOMイベント SVG Processing modes https://svgwg.org/specs/integration/#processing-modes
  33. 33. SVG Processing modes Dynamic Interactive Mode Animated Mode Secure Animated Mode Static Mode Secure Static Mode SVG のすべての機能 を表示可能 SMIL アニメーション 表示可能 SMIL アニメーション 表示可能 静止画として 表示 静止画として 表示 HTML <img> HTML <object> <embed> <iframe> CSS bacground HTML5 inline SVG HTML <img> CSS bacground
  34. 34. Referencing DEMO
  35. 35. Processing DEMO
  36. 36. こんな SVG で試してみましょう circle要素を use要素で量産 サイズと色を アニメーション svg 内に png を base64 で埋め込み svg 内に 外部 png を配置
  37. 37. こんなコードです <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" repeatCount="indefinite"/> </circle> </defs> <use xlink:href="#c" x="30" y="30"/> ...
  38. 38. <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" repeatCount="indefinite"/> </circle> </defs> <use xlink:href="#c" x="30" y="30"/> ... width height 指定なし Media Queries も あったり SMIL アニメーション させてたり こんなコードです
  39. 39. img 要素 <img src="sample.svg" alt="xxx"> img { width: 100%; height: atuo; }
  40. 40. object 要素 <object type="image/svg+xml" data="sample.svg"> <img src="sample.png" alt="xxx"> </object> object { width: 100%; height: atuo; }
  41. 41. 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>');
  42. 42. 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>
  43. 43. Processing DEMO
  44. 44. ちなみに IE 11 では img 要素でも 外部参照可 SMILアニメは まったく非対応 viewBoxの値が 拡大の最大値 width, height の指定がないと おかしい
  45. 45. 「Referencing modes」と「Processing modes」は まだ Working Draft なので、 各ブラウザでの表示仕様も揺れている現状 https://svgwg.org/specs/integration/#referencing-modes https://svgwg.org/specs/integration/#processing-modes
  46. 46. 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; は無視される 正常 （原因不明のバグあり？） 正常 （原因不明のバグあり？） 正常 （原因不明のバグあり？）
  47. 47. ちなみに、SVG のレンダリングは IE が最も綺麗
  48. 48. できること・できないこと • SVG 文書内のスクリプトは動作しない • SVG 文書内に埋め込んだ外部ファイルは表示されない（IEを除く） • SVG 文書内のハイパーリンクは無視される • SVG 文書内のスクリプトも動作する • 親 HTMLから、param 要素 や contentdocument を用いて SVG DOM にアクセスも可能 • ただし、親である HTML 側にはイベントはバブリングしない • SVG のすべての機能を使用できる • 直接 SVG DOM を操作でき、親 HTML の DOM と連携可能 • 細かい表示がまだまだブラウザ間で違う点がある img 要素 object 要素 インライン SVG
  49. 49. おすすめコード img, object, iframe • svg 要素には、viewBox 属性を必ず指定 • width, height はお好みで CSS background • svg 要素には、width, height, viewBox 属性が必須 inline SVG • svg 要素には、width, height 属性を指定してはいけない
  50. 50. ちなみに、 Illustrator で SVGを保存時、 ｢レスポンシブ」をチェック すると、svg 要素に width と height 属性が指定されない
  51. 51. fallback
  52. 52. 問題はこいつら ~8 ~2.3
  53. 53. object 要素で <object type="image/svg+xml" data="sample.svg"> <img src="fallback.png" alt="xxx"> </object> ただこの方法だと、sample.svg も fallback.png も読み込んでしまう HTTPリソースの無駄。
  54. 54. object 要素で <object type="image/svg+xml" data="sample.svg"> <object data="fallback.png" type="image/png"> <p>xxx</p> </object> </object> object 要素の入れ子なら解決できるけど…
  55. 55. インラインの image 要素で <svg viewBox="0 0 96 96"> <image xlink:href="sample.svg" src="fallback.png" width="96" height="96" /> </svg>
  56. 56. img 要素 + Modernizr で <img src="sample.svg" alt="xxx"> if(!Modernizr.svg) { $('img[src*="svg"]').attr('src', function() { return $(this).attr('src').replace('.svg', '.png'); }); }
  57. 57. onerror イベントで <img src="sample.svg" 　　　　　onerror="this.src='fallback.png';">
  58. 58. background-image で .element { background-image: url(fallback.png); background-image: url(sample.svg), none; }
  59. 59. inline SVG の場合、foreignObject 要素を使う <html> <body> <svg> 本来の SVG のコード … <foreignObject display="none"> <img src="fallback.png"/> </foreignObject> </svg> </body> </html>
  60. 60. 代替用の PNG 画像を用意するのが そもそも面倒
  61. 61. svg2png Gulp, Grunt のタスクとして、 指定したフォルダ内のSVGを 自動で PNG に変換 ただし、 svg要素に width, height の指定必須。 ないと余白が生まれる https://github.com/akoenig/gulp-svg2png https://github.com/dbushell/grunt-svg2png
  62. 62. svgstore 指定したフォルダー内の SVG を ひとつの SVG にマージできる SVG の CSS Sprite を自動で 生成できる 前頁の svg2png を併用すれば CSS Sprite のフォールバックも可能 https://github.com/FWeinb/grunt-svgstore https://github.com/w0rm/gulp-svgstore
  63. 63. アニメーション
  64. 64. 大きく分けて 3種類 SMIL アニメーション CSS アニメーション SVG DOM アニメーション
  65. 65. SMIL アニメーション <circle fill="#000" r="30"> <animate attributeName="r" begin="0s" dur="7s" from="10" to="30" repeatCount="indefinite"/> </circle>
  66. 66. SMIL Animation DEMO
  67. 67. CSS アニメーション • transition • transform • animation • @keyframes
  68. 68. SMIL アニメーション と CSS アニメーション • SVG 2.0 において、SMIL アニメーションは廃止され、 CSS animation、CSS transition 等と統合する方向で 検討されている • 詳細は、「W3C Scalable Vector Graphics (SVG) 2」 「W3C Web Animations 1.0」にて
  69. 69. http://www.w3.org/TR/web-animations/
  70. 70. http://www.w3.org/TR/SVG2/
  71. 71. SVG DOM アニメーション var logo = document.getElementById("logo"); var rot = 0; setInterval(function(){ logo.setAttribute("transform", "rotate(" + rot + " 100 100)"); rot = rot + 1; }, 10);
  72. 72. SVG DOM アニメーション SVG は独自の名前空間を持つため、 DOM Level 1 は使えない DOM Level 2 のメソッドを使用すること createElement() createElementNS()
  73. 73. http://www.webbrowsercompatibility.com/svg/desktop/
  74. 74. Canvas と SVG どっち使う？
  75. 75. Canvas SVG アニメーション高速やや低速 オブジェクトContext DOM 描画方式ビットマップベクター Web GL, Open GL ○ × (SVG 2から対応予定) 描画キャッシュ機能○ × DOM操作× ○ SMIL アニメーション× ○ (ただし負荷高め) アクセシビリティ× ○
  76. 76. SVG でのアニメーションは はっきり言って「低速」 • SMIL アニメーションは、特に Webkit で負荷が高い • IE が SMIL・CSS のアニメーションに非対応 • よって必然的に JavaScript での DOM アニメーションになる • DOM アニメーションでは、グラフィックアクセラレーターの 恩恵を受けられない • DOM 操作である以上、Reflow・Repaint の制約を受ける http://dresscording.com/blog/performance/layout_painting.html
  77. 77. SVG の魅力は、 Illustrator などで1枚絵を書き出したあと、 すぐに動かしたいパーツだけ動かせる 針だけ 動かせる 目だけ 動かせる
  78. 78. SVG の魅力は、 HTML における、SVG 以外の DOM オブジェクトや CSS と連携できる
  79. 79. snap.svg を使う
  80. 80. http://snapsvg.io/
  81. 81. snap.svg DEMO
  82. 82. SVG と Adobe Illustrator
  83. 83. SVG（ベクター）なツールが充実してきた Illustrator CC 2014 Flash CC 2014 Sketch 3
  84. 84. やはり Illustrator が本命
  85. 85. Illustrator での注意点
  86. 86. SVG 作成時の注意点 • アートボードのサイズが、svg 要素の width, height, viewBox となる • すべての単位は「ピクセル」で作る • レイヤー は g要素となるが、日本語環境だと、id名が「レイヤー_1_」などと 日本語そのままになるので、レイヤー名・グループ名は英数字で • 「SVGフィルター」も同様。日本語になるので使わない
  87. 87. SVG 保存時の注意点 • 非表示のレイヤーなども「display: none;」で書き出される • ブレンド、アピアランス、ブラシは、「アプアランスを分割」されて 書き出される • 画像ブラシはラスタライズされ、png ファイルが別途作られる • 非表示にしたアピアランスは書き出されない • アピアランスによっては、SVG のコードが XML として不正になる • グラデーションメッシュをかけた図形は全体がラスタライズされ、 png ファイルが別途作られる • 乗算などの描画モードは無視されて書き出される
  88. 88. SVG 保存後のコードの修正 <?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 18.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <!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="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="70px" height="60px" viewBox="0 0 70 60" style="enable-background:new 0 0 67.7 63.5;" xml:space="preserve"> ×削除 ×削除 ×削除 ×削除 ×削除 ×削除
  89. 89. <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 名は修正すること
  90. 90. 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>
  91. 91. SVG を軽くするネタ
  92. 92. SVG を軽くするネタ • 「パス → 単純化」などで、パス、アンカーの数は極力減らす • 書き出し時の「小数点以下の桁数」を「0」や「1」くらいにする • 同じ図形を複数回使うときは、シンボル登録してから配置する。 symbol 要素と use 要素によるモジュール化が行われる • 逆に、1回しか使わないシンボル図形であれば 「シンボルへのリンクの解除」をしておいたほうがコードは少なくなる • 非表示のレイヤーは削除しておく
  93. 93. SVG を軽くするネタ • アピアランスの多用は、図形の要素が増えるだけなので控える (しかも、defs や symbol によるモジュール化が行われない） • CSSプロパティは「スタイル要素」にした方がスタイルが class 化 されるのでコードが少なくなる (ただし、inline SVG などの場合は埋め込む先の HTML の CSS とバッ ティングする可能であるのでこの限りではない） • 保存時に svgz 形式にした方が軽くなるが、再編集性を考えると svg で 書き出しておき、Webサーバー側で gzip したほうがいい (約60～80%軽量化可）
  94. 94. シンボルを効率的に利用する defs, symbol, use 要素 defs 要素、または symbol 要素 で実体のない図形を定義し、 それを use 要素で再利用できる 要素の再利用 <symbol id="s"> <path d="..."/> </symbol> <use xlink:href="#s" x="20" y="10" fill="#fc0"/>
  95. 95. <symbol id="tw"> <path d="M64,6.2c-1.1,0.6-4.3,1.8-7.3,2.1c1.9-1 ,4.8-4.5,5.5-7.2c-1.9,1.2-6.1,2.9-8.2,2.9 v0C51.5,1.6,48.2,0,44.4,0 c-7.3,0-13.2,5.9-13.2,13.2c0,1,0.1,2,0.3, 2.9h0c-9.9-0.3-20.7-5.2-27.2-13.7c-4,6.9- 0.5,14.6,4,17.4c-1.6,0.1-4.4-0.2-5.8-1.5 C2.5,23,4.7,29.1,12.7,31.3c-1.6,0.8-4.3,0 .6-5.5,0.4c0.4,3.9,5.9,9,11.8,9c-2.1,2.5- 10.1,6.9-19,5.5C6.1,49.9,13.2,52,20.7,52 c21.3,0,37.8-17.3,37-38.6c0,0,0,0,0-0.1c0 -0.1,0-0.1,0-0.2c0-0.1,0-0.1,0-0.2C59.5,1 1.7,62.1,9.3,64,6.2z"/> </symbol> <use xlink:href="#tw" x="20" y="0" fill="#319aec"/> <use xlink:href="#tw" x="40" y="0" fill="#319aec"/> <use xlink:href="#tw" x="60" y="0" fill="#319aec"/> <use xlink:href="#tw" x="80" y="0" fill="#319aec"/>
  96. 96. defs 要素 と symbol 要素の違い symbol 要素 • viewBox を定義できるため、単独での座標系を持つ • つまり、use 要素で再利用する際にサイズを自由に変えられる • Illustrator のシンボルは symbol 要素に変換される defs 要素 • 図形要素をグルーピングして単にテンプレート化したもの • 単独の座標系は持たず、再利用時にサイズは変更できない
  97. 97. 松田直樹 ありがとうございました SVG Scalable Vector Graphics MANIAX Ver. 2

×