SVG MANIAX - CSS Nite After dark7

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/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)"/>

フィルター効果 ﬁlter 要素複雑すぎるので、手書きはあきらめる <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 •overﬂow •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要素, bacground-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="0"/> </svg> </body> </html> HTML </> 2

どう違う？

地味にいろいろ異なるブラウザ間でも違ってくるし、 SVG のコードによっても違ってくる

こんな SVG で試してみましょう circle要素を use要素で量産サイズと色をアニメーション svg 内に外部 png を配置 svg 内に png を base64 で埋め込み

<img src="sample.svg" alt="xxx"> img 要素 if(!Modernizr.svg) { $('img[src*="svg"]').attr('src', function() { return $(this).attr('src').replace('.svg', '.png'); }); } fallback

.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

ちなみに IE 11 では

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 等が効かない

• SVG 文書内のスクリプトは動作しない • SVG 文書内に埋め込んだ外部ファイルは表示されない（IEを除く） • SVG 文書内のハイパーリンクは無視される • SVG 文書内のスクリプトも動作する • param 要素を用いて 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>

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 ライブラリ

http://d3js.org/

http://jonobr1.github.io/two.js/

http://snapsvg.io/

SVG の使いどころ

img 要素 • 静止画としては実用レベル • png や gif の代わりに十分使える • 動きは animate 要素による SMILアニメーションのみ • フォールバックは JS で判別すべし

object 要素 • フォールバックも考えると、最もオススメ • animate 要素だけでなく、SVG 内の JS や CSS も動く • 親 HTML 側との JS 連携は面倒くさい（param で可能だけど） • 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.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

by Naoki Matsuda, 取締役 at 株式会社まぼろし on Apr 11, 2014

Statistics

Views

Actions

2 Embeds 9

Accessibility

Categories

Upload Details

Usage Rights

Report content

SVG MANIAX - CSS Nite After dark7 Presentation Transcript

https://twitter.com	8
http://s.deeeki.com	1