SVG MANIAX - CSS Nite After dark7
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

SVG MANIAX - CSS Nite After dark7

on

  • 14,172 views

「文書としてのSVG」の特徴、ブラウザでの挙動の違い、Webページヘの埋め込み方、フォールバックの方法などを紹介します。このスライドを見たあと...

「文書としてのSVG」の特徴、ブラウザでの挙動の違い、Webページヘの埋め込み方、フォールバックの方法などを紹介します。このスライドを見たあと、Illustrator で書き出した SVG のコードをぜひ眺めてみてください。

Statistics

Views

Total Views
14,172
Views on SlideShare
13,302
Embed Views
870

Actions

Likes
109
Downloads
72
Comments
0

16 Embeds 870

http://cssnite.jp 413
https://twitter.com 230
http://scrtree.github.io 144
http://feedly.com 36
http://s.deeeki.com 13
http://tweetedtimes.com 9
https://qwintet.qiita.com 4
http://www.cssnite.jp 4
http://www.feedspot.com 3
http://www.slideee.com 3
http://slideshare-download.seesaa.net 3
http://feeds2.feedburner.com 2
http://geekple.com 2
http://reader.aol.com 2
http://www.newsblur.com 1
http://www.google.co.jp 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

SVG MANIAX - CSS Nite After dark7 Presentation Transcript

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