SVGMANIAX
松田直樹
Scalable Vector Graphics
SVG の最大の 特徴
画像 であり、 文書 である
Scalable Vector Graphics
拡張可能な
それが SVG
XML 文書であるがゆえ
単なる「画像」を超越できる存在。
SVG を
効果的に使ったサイト
http://jsdo.it/event/svggirl/
http://www.city.tondabayashi.osaka.jp/map/index.html
http://jvectormap.com/
http://iconmelon.com
http://www.polygon.com/a/ps4-review
• 拡縮自在なベクター画像
• CSS による装飾
• DOM API
• 文書リソースとしての汎用性
SVG を
XML として理解する
SVG1.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/...
描画領域・比率
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 ... />
</...
モジュール化
defs, symbol, use 要素
defs 要素、および symbol 要素 で実体のない図形を定義し、
それを use 要素で再利用できる
要素の再利用
<defs>
<path d="..."/>
</defs>
<u...
変形
transform 属性
matrix, translate, scale, rotate, skewX, skewY にて変形
Illustrator では ほぼすべて matrix で再現される
要素の変形
<path ... tra...
グラデーション
linearGradient 要素, radialGradient 要素
linearGradient 要素と radialGradient 要素で適用
SVG では 塗りにも線にも適用できる
グラデーションの変形は gradi...
マスク
clip, clipPath, mask 要素
矩形・円形・パスによるマスクと、グラデーションマスク
<defs>
<clipPath id="myClip">
<circle cx="40" cy="40" r="50"/>
</cl...
フィルター効果
filter 要素
複雑すぎるので、手書きはあきらめる
<defs>
<filter id="fil" filterUnits="userSpaceOnUse"
x="0" y="0" width="100" height="10...
Illustrator における注意点
• 通常のフィルターは png 化される
• でも、SVGフィルターが使いものにならない
• メッシュグラデーションは png 化される
• ブレンドは拡張されて書き出される
• アピアランスは分割される...
SVG で使える
CSS プロパティ
SVG, HTML 両方で使えるプロパティ
•font
•font-family
•font-size
•font-size-adjust
•font-stretch
•font-style
•font-variant
•font-weight...
SVG 固有のプロパティ
•clip-path
•clip-rule
•color
•mask
•enable-background
•filter
•flood-color
•flood-opacity
•lighting-color
•stop-...
Web サイト(HTML)内における
SVG の使い方
大きく分けて
2種類の使い方
外部ファイル参照
img 要素, object 要素,
iframe要素, background-image
HTML
CSS
</>
SVG
1
インラインSVG
HTML5 内に
直接 SVG 要素を記述する
<!doctype html>
<html>
<body>
<svg viewBox="0 0 200 200">
<circle id="c" r="100" x="0" y=...
どう違う?
地味にいろいろ異なる
ブラウザ間でも違ってくるし、
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...
<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...
<img src="sample.svg" alt="xxx">
img 要素
if(!Modernizr.svg) {
$('img[src*="svg"]').attr('src', function() {
return $(this)....
<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/sv...
<!doctype html>
<html>
<body>
<h1>inline svg</h1>
<svg viewBox="0 0 200 200">
<circle fill="#44bfb7"
cx="15" cx="15" r="30...
DEMO
ちなみに IE 11 では
img 要素
object 要素
iframe 要素 CSS background
animate要素でのアニメーションに対応していない(仕様)
svg内にimage要素で
埋め込んだ外部画像も
表示される(第2世代ま
で?)
• svg要素に...
• SVG 文書内のスクリプトは動作しない
• SVG 文書内に埋め込んだ外部ファイルは表示されない(IEを除く)
• SVG 文書内のハイパーリンクは無視される
• SVG 文書内のスクリプトも動作する
• param 要素 や conten...
SVG をアニメーションさせる
大きく分けて
3種類の方法
SMIL アニメーション
<circle fill="#000" r="30">
<animate
attributeName="r"
begin="0s"
dur="7s"
from="10"
to="30"
repeatCount="ind...
DEMO
CSS アニメーション
• transition
• transform
• animation
• @keyframes
SVG DOM アニメーション
var logo = document.getElementById("logo");
var rot = 0;
setInterval(function(){
logo.setAttribute("transf...
SVG DOM アニメーション
SVG は独自の名前空間を持つため、
DOM Level 1 は使えない
DOM Level 2 のメソッドを使用すること
createElement() createElementNS()
http://www.webbrowsercompatibility.com/svg/desktop/
SVG を扱う JS ライブラリ
http://d3js.org/
http://jonobr1.github.io/two.js/
http://snapsvg.io/
DEMO
SVG の使いどころ
img 要素
• 静止画としては実用レベル
• png や gif の代わりに十分使える
• 動きは animate 要素による SMILアニメーションのみ
• フォールバックは JS で判別すべし
object 要素
• フォールバックも考えると、最もオススメ
• animate 要素だけでなく、SVG 内の JS や CSS も動く
• 親 HTML 側との JS 連携は面倒くさい
(param や contentdocument でア...
CSS Background
• IE での表示を担保するため、
svg 要素に viewBox, width, height の指定は必須
• 幅・高さを固定した場合、CSS Sprite でも問題なく使える
インライン SVG
• SVG のすべての機能が使える
• SVG DOM を扱うことができる
• IE では、SVG 内の要素に CSS transition, animation,
transform 等は効かない
• IE では、view...
アニメーション
•アニメーションをさせるなら JS 必須
• ただし、IEを除けば SMILアニメーションがお手軽
• 本格的なアニメーションは Canvas を使用する
(SVG よりもパフォーマンスがいい)
• SVG には DOM を扱え...
SVG のフォールバック
代替用の PNG 画像を用意するのが
そもそも面倒
grunt-svg2png
gruntのタスクとして、
指定したフォルダ内のSVGを
自動で PNG に変換
ただし、
svg要素に width, height の指定がないと
余白が生まれる
https://github.com/dbushe...
grunt-svgstore
指定したフォルダー内の SVG を
ひとつの SVG にマージできる
SVG の CSS Sprite を自動で
生成できる
https://github.com/FWeinb/grunt-
svgstore
前頁...
Quick Look コマンド
Mac の場合、以下のコマンドで
SVG を PNG に変換できる
$ qlmanage -t -s 640 -o . logo.svg
png のサイズ指定
参考)
https://developer.appl...
おまけ - こんな使い方まで
テキストに
CSS を超えた表現を施す
<h1>
<svg class="demo1" viewBox="0 0 290 40"
width="290" height="40">
<text class="demo1-heading" x="0" y="30">
CSS Nite A...
SVG の未来
2014年 勧告目標
SVG 2.0
W3C Working Draft 11 February 2014
SVG 2.0 で実現される見込みの機能
• メッシュグラデーション(meshGradient要素)
• SMILアニメーションとCSSアニメーションとの統合
• HTML的なテキストの折り返し
• フィルター機能の拡張
• OpenGL対応
さいごに
文書 であるSVG は
ということは
Git で差分が取れるし、
マージもできる
SVG が更に普及する
未来は見えている
SVG と仲良くなるなら
今のうち
松田直樹
SVG MANIAX
Scalable Vector Graphics
ありがとうございました
SVG MANIAX - CSS Nite After dark7
SVG MANIAX - CSS Nite After dark7
SVG MANIAX - CSS Nite After dark7
Upcoming SlideShare
Loading in...5
×

SVG MANIAX - CSS Nite After dark7

19,498

Published on

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

Published in: Design
0 Comments
119 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
19,498
On Slideshare
0
From Embeds
0
Number of Embeds
22
Actions
Shares
0
Downloads
86
Comments
0
Likes
119
Embeds 0
No embeds

No notes for slide

SVG MANIAX - CSS Nite After dark7

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

    Clipping is a handy way to collect important slides you want to go back to later.

×