Contenu connexe
Similaire à SVG MANIAX Ver.2 - Mars vanilla (20)
SVG MANIAX Ver.2 - Mars vanilla
- 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 の場合は不要
- 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"
- 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. width, height が相対値指定、もしくは auto の場合
width="100%" height="100%" viewBox="0 0 200 200"
<circle cx="100" cy="100" r="100"/>
可変
円の直径は可変
200
SVG の 1px
=
親要素のサイズに応じる
- 26. 大きく分けて
4種類
HTML
<img>
HTML
<object>
<embed>
<iframe>
CSS
bacground
HTML5
inline SVG
外部ファイル参照インライン
- 27. 外部ファイル参照
img 要素, object 要素, embed 要素, iframe要素,
CSS background-image
HTML
CSS
</>
SVG
- 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 の記述は必要なし
- 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
- 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. 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
- 36. こんな SVG で試してみましょう
circle要素を
use要素で量産
サイズと色を
アニメーション
svg 内に
png を
base64 で埋め込み
svg 内に
外部 png を配置
- 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. <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. img 要素
<img src="sample.svg" alt="xxx">
img {
width: 100%;
height: atuo;
}
- 40. object 要素
<object type="image/svg+xml" data="sample.svg">
<img src="sample.png" alt="xxx">
</object>
object {
width: 100%;
height: atuo;
}
- 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. 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>
- 44. ちなみに IE 11 では
img 要素でも
外部参照可
SMILアニメは
まったく非対応
viewBoxの値が
拡大の最大値
width, height
の指定がないと
おかしい
- 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; は無視される
正常
(原因不明のバグあり?)
正常
(原因不明のバグあり?)
正常
(原因不明のバグあり?)
- 48. できること・できないこと
• SVG 文書内のスクリプトは動作しない
• SVG 文書内に埋め込んだ外部ファイルは表示されない(IEを除く)
• SVG 文書内のハイパーリンクは無視される
• SVG 文書内のスクリプトも動作する
• 親 HTMLから、param 要素 や contentdocument を用いて SVG
DOM にアクセスも可能
• ただし、親である HTML 側にはイベントはバブリングしない
• SVG のすべての機能を使用できる
• 直接 SVG DOM を操作でき、親 HTML の DOM と連携可能
• 細かい表示がまだまだブラウザ間で違う点がある
img 要素
object 要素
インライン SVG
- 49. おすすめコード
img, object, iframe
• svg 要素には、viewBox 属性を必ず指定
• width, height はお好みで
CSS background
• svg 要素には、width, height, viewBox 属性が必須
inline SVG
• svg 要素には、width, height 属性を指定してはいけない
- 53. object 要素で
<object type="image/svg+xml" data="sample.svg">
<img src="fallback.png" alt="xxx">
</object>
ただこの方法だと、sample.svg も fallback.png も読み込んでしまう
HTTPリソースの無駄。
- 54. object 要素で
<object type="image/svg+xml" data="sample.svg">
<object data="fallback.png" type="image/png">
<p>xxx</p>
</object>
</object>
object 要素の入れ子なら解決できるけど…
- 55. インラインの image 要素で
<svg viewBox="0 0 96 96">
<image
xlink:href="sample.svg"
src="fallback.png"
width="96" height="96" />
</svg>
- 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');
});
}
- 59. inline SVG の場合、foreignObject 要素を使う
<html>
<body>
<svg>
本来の SVG のコード …
<foreignObject display="none">
<img src="fallback.png"/>
</foreignObject>
</svg>
</body>
</html>
- 61. svg2png
Gulp, Grunt のタスクとして、
指定したフォルダ内のSVGを
自動で PNG に変換
ただし、
svg要素に width, height の指定必須。
ないと余白が生まれる
https://github.com/akoenig/gulp-svg2png
https://github.com/dbushell/grunt-svg2png
- 62. svgstore
指定したフォルダー内の SVG を
ひとつの SVG にマージできる
SVG の CSS Sprite を自動で
生成できる
前頁の svg2png を併用すれば
CSS Sprite のフォールバックも可能
https://github.com/FWeinb/grunt-svgstore
https://github.com/w0rm/gulp-svgstore
- 65. SMIL アニメーション
<circle fill="#000" r="30">
<animate
attributeName="r"
begin="0s"
dur="7s"
from="10"
to="30"
repeatCount="indefinite"/>
</circle>
- 68. CSS アニメーション
• transition
• transform
• animation
• @keyframes
- 69. SMIL アニメーション と CSS アニメーション
• SVG 2.0 において、SMIL アニメーションは廃止され、
CSS animation、CSS transition 等と統合する方向で
検討されている
• 詳細は、「W3C Scalable Vector Graphics (SVG) 2」
「W3C Web Animations 1.0」にて
- 72. SVG DOM アニメーション
var logo = document.getElementById("logo");
var rot = 0;
setInterval(function(){
logo.setAttribute("transform",
"rotate(" + rot + " 100 100)");
rot = rot + 1;
}, 10);
- 73. SVG DOM アニメーション
SVG は独自の名前空間を持つため、
DOM Level 1 は使えない
DOM Level 2 のメソッドを使用すること
createElement() createElementNS()
- 76. Canvas SVG
アニメーション高速やや低速
オブジェクトContext DOM
描画方式ビットマップベクター
Web GL, Open GL ○ × (SVG 2から対応予定)
描画キャッシュ機能○ ×
DOM操作× ○
SMIL アニメーション× ○ (ただし負荷高め)
アクセシビリティ× ○
- 77. SVG でのアニメーションは
はっきり言って「低速」
• SMIL アニメーションは、特に Webkit で負荷が高い
• IE が SMIL・CSS のアニメーションに非対応
• よって必然的に JavaScript での DOM アニメーションになる
• DOM アニメーションでは、グラフィックアクセラレーターの
恩恵を受けられない
• DOM 操作である以上、Reflow・Repaint の制約を受ける
http://dresscording.com/blog/performance/layout_painting.html
- 87. SVG 作成時の注意点
• アートボードのサイズが、svg 要素の width, height, viewBox となる
• すべての単位は「ピクセル」で作る
• レイヤー は g要素となるが、日本語環境だと、id名が「レイヤー_1_」などと
日本語そのままになるので、レイヤー名・グループ名は英数字で
• 「SVGフィルター」も同様。日本語になるので使わない
- 88. SVG 保存時の注意点
• 非表示のレイヤーなども「display: none;」で書き出される
• ブレンド、アピアランス、ブラシは、「アプアランスを分割」されて
書き出される
• 画像ブラシはラスタライズされ、png ファイルが別途作られる
• 非表示にしたアピアランスは書き出されない
• アピアランスによっては、SVG のコードが XML として不正になる
• グラデーションメッシュをかけた図形は全体がラスタライズされ、
png ファイルが別途作られる
• 乗算などの描画モードは無視されて書き出される
- 89. 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">
×削除
×削除
×削除
×削除
×削除
×削除
- 90. <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 名は修正すること
- 91. 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>
- 93. SVG を軽くするネタ
• 「パス → 単純化」などで、パス、アンカーの数は極力減らす
• 書き出し時の「小数点以下の桁数」を「0」や「1」くらいにする
• 同じ図形を複数回使うときは、シンボル登録してから配置する。
symbol 要素と use 要素によるモジュール化が行われる
• 逆に、1回しか使わないシンボル図形であれば
「シンボルへのリンクの解除」をしておいたほうがコードは少なくなる
• 非表示のレイヤーは削除しておく
- 94. SVG を軽くするネタ
• アピアランスの多用は、図形の要素が増えるだけなので控える
(しかも、defs や symbol によるモジュール化が行われない)
• CSSプロパティは「スタイル要素」にした方がスタイルが class 化
されるのでコードが少なくなる
(ただし、inline SVG などの場合は埋め込む先の HTML の CSS とバッ
ティングする可能であるのでこの限りではない)
• 保存時に svgz 形式にした方が軽くなるが、再編集性を考えると svg で
書き出しておき、Webサーバー側で gzip したほうがいい
(約60~80%軽量化可)
- 95. シンボルを効率的に利用する
defs, symbol, use 要素
defs 要素、または symbol 要素 で実体のない図形を定義し、
それを use 要素で再利用できる
要素の再利用
<symbol id="s">
<path d="..."/>
</symbol>
<use xlink:href="#s" x="20"
y="10" fill="#fc0"/>
- 96. <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"/>
- 97. defs 要素 と symbol 要素の違い
symbol 要素
• viewBox を定義できるため、単独での座標系を持つ
• つまり、use 要素で再利用する際にサイズを自由に変えられる
• Illustrator のシンボルは symbol 要素に変換される
defs 要素
• 図形要素をグルーピングして単にテンプレート化したもの
• 単独の座標系は持たず、再利用時にサイズは変更できない