SlideShare a Scribd company logo
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/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 の場合は不要
viewBox 属性を理解しよう
<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>
描画領域を指定する 
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 0 200 160" 
width="" height="" 
viewBox="0 0 200 160"
viewBox の値は 
利用空間(描画領域)における 
座標と長さを変換する基準値
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
width, height が相対値指定、もしくは auto の場合 
width="100%" height="100%" viewBox="0 0 200 200" 
<circle cx="100" cy="100" r="100"/> 
可変 
円の直径は可変 
200 
SVG の 1px 
= 
親要素のサイズに応じる
viewBox の指定がない場合 
width="100px" height="100px" 
<circle cx="100" cy="100" r="100"/> 
円の直径は 
200 
SVG の 1px 
= 
ブラウザの 1px 
100px 
100px
これが 
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="0" y="0"/> 
</svg> 
</body> 
</html> 
HTML 
SVG 
HTML5 に SVG の名前空間が内包されているので、xmlns の記述は必要なし
SVG Referencing modes 
参照モード
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
SVG Processing modes 
処理モード
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
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
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"> 
<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"/> 
...
<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 
アニメーション 
させてたり 
こんなコードです
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: 100%; 
height: atuo; 
}
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>');
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>
Processing DEMO
ちなみに IE 11 では 
img 要素でも 
外部参照可 
SMILアニメは 
まったく非対応 
viewBoxの値が 
拡大の最大値 
width, height 
の指定がないと 
おかしい
「Referencing modes」と「Processing modes」は 
まだ Working Draft なので、 
各ブラウザでの表示仕様も揺れている現状 
https://svgwg.org/specs/integration/#referencing-modes 
https://svgwg.org/specs/integration/#processing-modes
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; は無視される 
正常 
(原因不明のバグあり?) 
正常 
(原因不明のバグあり?) 
正常 
(原因不明のバグあり?)
ちなみに、SVG のレンダリングは 
IE が最も綺麗
できること・できないこと 
• SVG 文書内のスクリプトは動作しない 
• SVG 文書内に埋め込んだ外部ファイルは表示されない(IEを除く) 
• SVG 文書内のハイパーリンクは無視される 
• SVG 文書内のスクリプトも動作する 
• 親 HTMLから、param 要素 や contentdocument を用いて SVG 
DOM にアクセスも可能 
• ただし、親である HTML 側にはイベントはバブリングしない 
• SVG のすべての機能を使用できる 
• 直接 SVG DOM を操作でき、親 HTML の DOM と連携可能 
• 細かい表示がまだまだブラウザ間で違う点がある 
img 要素 
object 要素 
インライン SVG
おすすめコード 
img, object, iframe 
• svg 要素には、viewBox 属性を必ず指定 
• width, height はお好みで 
CSS background 
• svg 要素には、width, height, viewBox 属性が必須 
inline SVG 
• 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> 
ただこの方法だと、sample.svg も fallback.png も読み込んでしまう 
HTTPリソースの無駄。
object 要素で 
<object type="image/svg+xml" data="sample.svg"> 
<object data="fallback.png" type="image/png"> 
<p>xxx</p> 
</object> 
</object> 
object 要素の入れ子なら解決できるけど…
インラインの image 要素で 
<svg viewBox="0 0 96 96"> 
<image 
xlink:href="sample.svg" 
src="fallback.png" 
width="96" height="96" /> 
</svg>
img 要素 + Modernizr で 
<img src="sample.svg" alt="xxx"> 
if(!Modernizr.svg) { 
$('img[src*="svg"]').attr('src', function() { 
return $(this).attr('src').replace('.svg', '.png'); 
}); 
}
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="fallback.png"/> 
</foreignObject> 
</svg> 
</body> 
</html>
代替用の PNG 画像を用意するのが 
そもそも面倒
svg2png 
Gulp, Grunt のタスクとして、 
指定したフォルダ内のSVGを 
自動で PNG に変換 
ただし、 
svg要素に width, height の指定必須。 
ないと余白が生まれる 
https://github.com/akoenig/gulp-svg2png 
https://github.com/dbushell/grunt-svg2png
svgstore 
指定したフォルダー内の SVG を 
ひとつの SVG にマージできる 
SVG の CSS Sprite を自動で 
生成できる 
前頁の svg2png を併用すれば 
CSS Sprite のフォールバックも可能 
https://github.com/FWeinb/grunt-svgstore 
https://github.com/w0rm/gulp-svgstore
アニメーション
大きく分けて 
3種類 
SMIL アニメーション 
CSS アニメーション 
SVG DOM アニメーション
SMIL アニメーション 
<circle fill="#000" r="30"> 
<animate 
attributeName="r" 
begin="0s" 
dur="7s" 
from="10" 
to="30" 
repeatCount="indefinite"/> 
</circle>
SMIL Animation DEMO
SVG MANIAX Ver.2 -  Mars vanilla
CSS アニメーション 
• transition 
• transform 
• animation 
• @keyframes
SMIL アニメーション と CSS アニメーション 
• SVG 2.0 において、SMIL アニメーションは廃止され、 
CSS animation、CSS transition 等と統合する方向で 
検討されている 
• 詳細は、「W3C Scalable Vector Graphics (SVG) 2」 
「W3C Web Animations 1.0」にて
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("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/
Canvas と SVG どっち使う?
Canvas SVG 
アニメーション高速やや低速 
オブジェクトContext DOM 
描画方式ビットマップベクター 
Web GL, Open GL ○ × (SVG 2から対応予定) 
描画キャッシュ機能○ × 
DOM操作× ○ 
SMIL アニメーション× ○ (ただし負荷高め) 
アクセシビリティ× ○
SVG でのアニメーションは 
はっきり言って「低速」 
• SMIL アニメーションは、特に Webkit で負荷が高い 
• IE が SMIL・CSS のアニメーションに非対応 
• よって必然的に JavaScript での DOM アニメーションになる 
• DOM アニメーションでは、グラフィックアクセラレーターの 
恩恵を受けられない 
• DOM 操作である以上、Reflow・Repaint の制約を受ける 
http://dresscording.com/blog/performance/layout_painting.html
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フィルター」も同様。日本語になるので使わない
SVG 保存時の注意点 
• 非表示のレイヤーなども「display: none;」で書き出される 
• ブレンド、アピアランス、ブラシは、「アプアランスを分割」されて 
書き出される 
• 画像ブラシはラスタライズされ、png ファイルが別途作られる 
• 非表示にしたアピアランスは書き出されない 
• アピアランスによっては、SVG のコードが XML として不正になる 
• グラデーションメッシュをかけた図形は全体がラスタライズされ、 
png ファイルが別途作られる 
• 乗算などの描画モードは無視されて書き出される
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"> 
×削除 
×削除 
×削除 
×削除 
×削除 
×削除
<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 名は修正すること
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>
SVG を軽くするネタ
SVG を軽くするネタ 
• 「パス → 単純化」などで、パス、アンカーの数は極力減らす 
• 書き出し時の「小数点以下の桁数」を「0」や「1」くらいにする 
• 同じ図形を複数回使うときは、シンボル登録してから配置する。 
symbol 要素と use 要素によるモジュール化が行われる 
• 逆に、1回しか使わないシンボル図形であれば 
「シンボルへのリンクの解除」をしておいたほうがコードは少なくなる 
• 非表示のレイヤーは削除しておく
SVG を軽くするネタ 
• アピアランスの多用は、図形の要素が増えるだけなので控える 
(しかも、defs や symbol によるモジュール化が行われない) 
• CSSプロパティは「スタイル要素」にした方がスタイルが class 化 
されるのでコードが少なくなる 
(ただし、inline SVG などの場合は埋め込む先の HTML の CSS とバッ 
ティングする可能であるのでこの限りではない) 
• 保存時に svgz 形式にした方が軽くなるが、再編集性を考えると svg で 
書き出しておき、Webサーバー側で gzip したほうがいい 
(約60~80%軽量化可)
シンボルを効率的に利用する 
defs, symbol, use 要素 
defs 要素、または symbol 要素 で実体のない図形を定義し、 
それを use 要素で再利用できる 
要素の再利用 
<symbol id="s"> 
<path d="..."/> 
</symbol> 
<use xlink:href="#s" x="20" 
y="10" fill="#fc0"/>
<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"/>
defs 要素 と symbol 要素の違い 
symbol 要素 
• viewBox を定義できるため、単独での座標系を持つ 
• つまり、use 要素で再利用する際にサイズを自由に変えられる 
• Illustrator のシンボルは symbol 要素に変換される 
defs 要素 
• 図形要素をグルーピングして単にテンプレート化したもの 
• 単独の座標系は持たず、再利用時にサイズは変更できない
松田直樹 
ありがとうございました 
SVG Scalable Vector Graphics 
MANIAX 
Ver. 2

More Related Content

What's hot

インタフェース完全に理解した
インタフェース完全に理解したインタフェース完全に理解した
インタフェース完全に理解した
torisoup
 
UE4における大規模背景制作事例(コリジョン編)
UE4における大規模背景制作事例(コリジョン編) UE4における大規模背景制作事例(コリジョン編)
UE4における大規模背景制作事例(コリジョン編)
エピック・ゲームズ・ジャパン Epic Games Japan
 
Ruby での外部コマンドの実行について
Ruby での外部コマンドの実行についてRuby での外部コマンドの実行について
Ruby での外部コマンドの実行について
Tomoya Kawanishi
 
Unityではじめるオープンワールド入門 アーティスト編
Unityではじめるオープンワールド入門 アーティスト編Unityではじめるオープンワールド入門 アーティスト編
Unityではじめるオープンワールド入門 アーティスト編
Unity Technologies Japan K.K.
 
【Unity道場スペシャル 2017博多】TextMesh Pro を使いこなす
【Unity道場スペシャル 2017博多】TextMesh Pro を使いこなす【Unity道場スペシャル 2017博多】TextMesh Pro を使いこなす
【Unity道場スペシャル 2017博多】TextMesh Pro を使いこなす
Unity Technologies Japan K.K.
 
【Unity】 Behavior TreeでAIを作る
 【Unity】 Behavior TreeでAIを作る 【Unity】 Behavior TreeでAIを作る
【Unity】 Behavior TreeでAIを作る
torisoup
 
【Unite 2018 Tokyo】Unityにおける疎結合設計 ~UIへの適用事例から学ぶ、テクニックとメリット~
【Unite 2018 Tokyo】Unityにおける疎結合設計 ~UIへの適用事例から学ぶ、テクニックとメリット~【Unite 2018 Tokyo】Unityにおける疎結合設計 ~UIへの適用事例から学ぶ、テクニックとメリット~
【Unite 2018 Tokyo】Unityにおける疎結合設計 ~UIへの適用事例から学ぶ、テクニックとメリット~
UnityTechnologiesJapan002
 
Webページが表示されるまで
Webページが表示されるまでWebページが表示されるまで
Webページが表示されるまで
Masataka Suzuki
 
Unity ネイティブプラグインの作成について
Unity ネイティブプラグインの作成についてUnity ネイティブプラグインの作成について
Unity ネイティブプラグインの作成について
Tatsuhiko Yamamura
 
OpenCVでつくろうARスタンプアプリ in 熊本
OpenCVでつくろうARスタンプアプリ in 熊本OpenCVでつくろうARスタンプアプリ in 熊本
OpenCVでつくろうARスタンプアプリ in 熊本
Takashi Yoshinaga
 
[KGC2011_박민근] 신입 게임 개발자가 알아야 할 것들
[KGC2011_박민근] 신입 게임 개발자가 알아야 할 것들[KGC2011_박민근] 신입 게임 개발자가 알아야 할 것들
[KGC2011_박민근] 신입 게임 개발자가 알아야 할 것들
MinGeun Park
 
IncrediBuildでビルド時間を最大90%短縮! - インクレディビルドジャパン株式会社 - GTMF 2018 OSAKA
IncrediBuildでビルド時間を最大90%短縮! - インクレディビルドジャパン株式会社 - GTMF 2018 OSAKAIncrediBuildでビルド時間を最大90%短縮! - インクレディビルドジャパン株式会社 - GTMF 2018 OSAKA
IncrediBuildでビルド時間を最大90%短縮! - インクレディビルドジャパン株式会社 - GTMF 2018 OSAKA
Game Tools & Middleware Forum
 
それを早く言ってよ〜パフォーマンスを出すエフェクト制作のポイント
それを早く言ってよ〜パフォーマンスを出すエフェクト制作のポイントそれを早く言ってよ〜パフォーマンスを出すエフェクト制作のポイント
それを早く言ってよ〜パフォーマンスを出すエフェクト制作のポイント
Makoto Goto
 
UE4 コリジョン検証 -HitとOverlapイベントが発生する条件について-
UE4 コリジョン検証 -HitとOverlapイベントが発生する条件について-UE4 コリジョン検証 -HitとOverlapイベントが発生する条件について-
UE4 コリジョン検証 -HitとOverlapイベントが発生する条件について-
Tatsuya Iwama
 
メカアクションゲーム『DAEMON X MACHINA』 信念と血と鋼鉄の開発事例
メカアクションゲーム『DAEMON X MACHINA』 信念と血と鋼鉄の開発事例メカアクションゲーム『DAEMON X MACHINA』 信念と血と鋼鉄の開発事例
メカアクションゲーム『DAEMON X MACHINA』 信念と血と鋼鉄の開発事例
エピック・ゲームズ・ジャパン Epic Games Japan
 
CEDEC2016: Unreal Engine 4 のレンダリングフロー総おさらい
CEDEC2016: Unreal Engine 4 のレンダリングフロー総おさらいCEDEC2016: Unreal Engine 4 のレンダリングフロー総おさらい
CEDEC2016: Unreal Engine 4 のレンダリングフロー総おさらい
エピック・ゲームズ・ジャパン Epic Games Japan
 
OpenCVで作るスタンプAR
OpenCVで作るスタンプAROpenCVで作るスタンプAR
OpenCVで作るスタンプAR
Takashi Yoshinaga
 
UE4のライティング解体新書~効果的なNPRのためにライティングの仕組みを理解しよう~
UE4のライティング解体新書~効果的なNPRのためにライティングの仕組みを理解しよう~UE4のライティング解体新書~効果的なNPRのためにライティングの仕組みを理解しよう~
UE4のライティング解体新書~効果的なNPRのためにライティングの仕組みを理解しよう~
エピック・ゲームズ・ジャパン Epic Games Japan
 
"有翼のフロイライン Wing of Darkness"と歩むUE4の世界
"有翼のフロイライン Wing of Darkness"と歩むUE4の世界"有翼のフロイライン Wing of Darkness"と歩むUE4の世界
"有翼のフロイライン Wing of Darkness"と歩むUE4の世界
エピック・ゲームズ・ジャパン Epic Games Japan
 
わからないまま使っている?UE4 の AI の基本的なこと
わからないまま使っている?UE4 の AI の基本的なことわからないまま使っている?UE4 の AI の基本的なこと
わからないまま使っている?UE4 の AI の基本的なこと
rarihoma
 

What's hot (20)

インタフェース完全に理解した
インタフェース完全に理解したインタフェース完全に理解した
インタフェース完全に理解した
 
UE4における大規模背景制作事例(コリジョン編)
UE4における大規模背景制作事例(コリジョン編) UE4における大規模背景制作事例(コリジョン編)
UE4における大規模背景制作事例(コリジョン編)
 
Ruby での外部コマンドの実行について
Ruby での外部コマンドの実行についてRuby での外部コマンドの実行について
Ruby での外部コマンドの実行について
 
Unityではじめるオープンワールド入門 アーティスト編
Unityではじめるオープンワールド入門 アーティスト編Unityではじめるオープンワールド入門 アーティスト編
Unityではじめるオープンワールド入門 アーティスト編
 
【Unity道場スペシャル 2017博多】TextMesh Pro を使いこなす
【Unity道場スペシャル 2017博多】TextMesh Pro を使いこなす【Unity道場スペシャル 2017博多】TextMesh Pro を使いこなす
【Unity道場スペシャル 2017博多】TextMesh Pro を使いこなす
 
【Unity】 Behavior TreeでAIを作る
 【Unity】 Behavior TreeでAIを作る 【Unity】 Behavior TreeでAIを作る
【Unity】 Behavior TreeでAIを作る
 
【Unite 2018 Tokyo】Unityにおける疎結合設計 ~UIへの適用事例から学ぶ、テクニックとメリット~
【Unite 2018 Tokyo】Unityにおける疎結合設計 ~UIへの適用事例から学ぶ、テクニックとメリット~【Unite 2018 Tokyo】Unityにおける疎結合設計 ~UIへの適用事例から学ぶ、テクニックとメリット~
【Unite 2018 Tokyo】Unityにおける疎結合設計 ~UIへの適用事例から学ぶ、テクニックとメリット~
 
Webページが表示されるまで
Webページが表示されるまでWebページが表示されるまで
Webページが表示されるまで
 
Unity ネイティブプラグインの作成について
Unity ネイティブプラグインの作成についてUnity ネイティブプラグインの作成について
Unity ネイティブプラグインの作成について
 
OpenCVでつくろうARスタンプアプリ in 熊本
OpenCVでつくろうARスタンプアプリ in 熊本OpenCVでつくろうARスタンプアプリ in 熊本
OpenCVでつくろうARスタンプアプリ in 熊本
 
[KGC2011_박민근] 신입 게임 개발자가 알아야 할 것들
[KGC2011_박민근] 신입 게임 개발자가 알아야 할 것들[KGC2011_박민근] 신입 게임 개발자가 알아야 할 것들
[KGC2011_박민근] 신입 게임 개발자가 알아야 할 것들
 
IncrediBuildでビルド時間を最大90%短縮! - インクレディビルドジャパン株式会社 - GTMF 2018 OSAKA
IncrediBuildでビルド時間を最大90%短縮! - インクレディビルドジャパン株式会社 - GTMF 2018 OSAKAIncrediBuildでビルド時間を最大90%短縮! - インクレディビルドジャパン株式会社 - GTMF 2018 OSAKA
IncrediBuildでビルド時間を最大90%短縮! - インクレディビルドジャパン株式会社 - GTMF 2018 OSAKA
 
それを早く言ってよ〜パフォーマンスを出すエフェクト制作のポイント
それを早く言ってよ〜パフォーマンスを出すエフェクト制作のポイントそれを早く言ってよ〜パフォーマンスを出すエフェクト制作のポイント
それを早く言ってよ〜パフォーマンスを出すエフェクト制作のポイント
 
UE4 コリジョン検証 -HitとOverlapイベントが発生する条件について-
UE4 コリジョン検証 -HitとOverlapイベントが発生する条件について-UE4 コリジョン検証 -HitとOverlapイベントが発生する条件について-
UE4 コリジョン検証 -HitとOverlapイベントが発生する条件について-
 
メカアクションゲーム『DAEMON X MACHINA』 信念と血と鋼鉄の開発事例
メカアクションゲーム『DAEMON X MACHINA』 信念と血と鋼鉄の開発事例メカアクションゲーム『DAEMON X MACHINA』 信念と血と鋼鉄の開発事例
メカアクションゲーム『DAEMON X MACHINA』 信念と血と鋼鉄の開発事例
 
CEDEC2016: Unreal Engine 4 のレンダリングフロー総おさらい
CEDEC2016: Unreal Engine 4 のレンダリングフロー総おさらいCEDEC2016: Unreal Engine 4 のレンダリングフロー総おさらい
CEDEC2016: Unreal Engine 4 のレンダリングフロー総おさらい
 
OpenCVで作るスタンプAR
OpenCVで作るスタンプAROpenCVで作るスタンプAR
OpenCVで作るスタンプAR
 
UE4のライティング解体新書~効果的なNPRのためにライティングの仕組みを理解しよう~
UE4のライティング解体新書~効果的なNPRのためにライティングの仕組みを理解しよう~UE4のライティング解体新書~効果的なNPRのためにライティングの仕組みを理解しよう~
UE4のライティング解体新書~効果的なNPRのためにライティングの仕組みを理解しよう~
 
"有翼のフロイライン Wing of Darkness"と歩むUE4の世界
"有翼のフロイライン Wing of Darkness"と歩むUE4の世界"有翼のフロイライン Wing of Darkness"と歩むUE4の世界
"有翼のフロイライン Wing of Darkness"と歩むUE4の世界
 
わからないまま使っている?UE4 の AI の基本的なこと
わからないまま使っている?UE4 の AI の基本的なことわからないまま使っている?UE4 の AI の基本的なこと
わからないまま使っている?UE4 の AI の基本的なこと
 

Viewers also liked

SVGの基本&活用法。SVGのメリットと事例を基礎から学ぶ。
SVGの基本&活用法。SVGのメリットと事例を基礎から学ぶ。SVGの基本&活用法。SVGのメリットと事例を基礎から学ぶ。
SVGの基本&活用法。SVGのメリットと事例を基礎から学ぶ。
Daisuke Koshimizu
 
SVG MANIAX - CSS Nite After dark7
SVG MANIAX - CSS Nite After dark7SVG MANIAX - CSS Nite After dark7
SVG MANIAX - CSS Nite After dark7
Naoki Matsuda
 
HTML5 と SVG で考える、これからの画像アクセシビリティ
HTML5 と SVG で考える、これからの画像アクセシビリティHTML5 と SVG で考える、これからの画像アクセシビリティ
HTML5 と SVG で考える、これからの画像アクセシビリティ
Naoki Matsuda
 
CSS設計の理想と現実
CSS設計の理想と現実CSS設計の理想と現実
CSS設計の理想と現実
拓樹 谷
 
関西☆フリ女会議
関西☆フリ女会議関西☆フリ女会議
関西☆フリ女会議
Ayaka Sumida
 
Review the OOCSS
Review the OOCSSReview the OOCSS
Review the OOCSS
Manabu Yasuda
 
DIST.12 「Adobe Creative Station ができるまで」
DIST.12 「Adobe Creative Station ができるまで」DIST.12 「Adobe Creative Station ができるまで」
DIST.12 「Adobe Creative Station ができるまで」
Naoki Matsuda
 
ノンデザイナーのための配色理論
ノンデザイナーのための配色理論ノンデザイナーのための配色理論
ノンデザイナーのための配色理論
tsukasa obara
 
おふとんから眺めるSVG
おふとんから眺めるSVGおふとんから眺めるSVG
おふとんから眺めるSVG
cocu_628496
 
情報編集(Web) HTML5 実践1 Canvas + Javascriptで図形を描く
情報編集(Web) HTML5 実践1 Canvas + Javascriptで図形を描く情報編集(Web) HTML5 実践1 Canvas + Javascriptで図形を描く
情報編集(Web) HTML5 実践1 Canvas + Javascriptで図形を描く
Atsushi Tadokoro
 
Inline SVG - トラブルとその対策
Inline SVG - トラブルとその対策Inline SVG - トラブルとその対策
Inline SVG - トラブルとその対策
Kohei Kadowaki
 
SVGをつかったプロトタイプ制作
SVGをつかったプロトタイプ制作SVGをつかったプロトタイプ制作
SVGをつかったプロトタイプ制作
Yasuhisa Hasegawa
 
Canvas勉強会
Canvas勉強会Canvas勉強会
Canvas勉強会
Tsutomu Kawamura
 
WordCamp KOBE 2011 LT
WordCamp KOBE 2011 LTWordCamp KOBE 2011 LT
WordCamp KOBE 2011 LT
西村 州平
 
Modern OpenGL Usage: Using Vertex Buffer Objects Well
Modern OpenGL Usage: Using Vertex Buffer Objects Well Modern OpenGL Usage: Using Vertex Buffer Objects Well
Modern OpenGL Usage: Using Vertex Buffer Objects Well
Mark Kilgard
 
「なんとなく」を共有する、コンテンツを活かしたデザインプロセス
「なんとなく」を共有する、コンテンツを活かしたデザインプロセス「なんとなく」を共有する、コンテンツを活かしたデザインプロセス
「なんとなく」を共有する、コンテンツを活かしたデザインプロセス
Yasuhisa Hasegawa
 
コーディングが上達するコツ
コーディングが上達するコツコーディングが上達するコツ
コーディングが上達するコツ
evol-ni
 
C++ マルチスレッド 入門
C++ マルチスレッド 入門C++ マルチスレッド 入門
C++ マルチスレッド 入門
京大 マイコンクラブ
 
はじめてのUXとUIの話
はじめてのUXとUIの話はじめてのUXとUIの話
はじめてのUXとUIの話
Kazuki Yamashita
 
D3.jsでのデータビジュアライゼーション -人口統計データから使い方を学ぶ-
D3.jsでのデータビジュアライゼーション -人口統計データから使い方を学ぶ-D3.jsでのデータビジュアライゼーション -人口統計データから使い方を学ぶ-
D3.jsでのデータビジュアライゼーション -人口統計データから使い方を学ぶ-
Yoshinori Kobayashi
 

Viewers also liked (20)

SVGの基本&活用法。SVGのメリットと事例を基礎から学ぶ。
SVGの基本&活用法。SVGのメリットと事例を基礎から学ぶ。SVGの基本&活用法。SVGのメリットと事例を基礎から学ぶ。
SVGの基本&活用法。SVGのメリットと事例を基礎から学ぶ。
 
SVG MANIAX - CSS Nite After dark7
SVG MANIAX - CSS Nite After dark7SVG MANIAX - CSS Nite After dark7
SVG MANIAX - CSS Nite After dark7
 
HTML5 と SVG で考える、これからの画像アクセシビリティ
HTML5 と SVG で考える、これからの画像アクセシビリティHTML5 と SVG で考える、これからの画像アクセシビリティ
HTML5 と SVG で考える、これからの画像アクセシビリティ
 
CSS設計の理想と現実
CSS設計の理想と現実CSS設計の理想と現実
CSS設計の理想と現実
 
関西☆フリ女会議
関西☆フリ女会議関西☆フリ女会議
関西☆フリ女会議
 
Review the OOCSS
Review the OOCSSReview the OOCSS
Review the OOCSS
 
DIST.12 「Adobe Creative Station ができるまで」
DIST.12 「Adobe Creative Station ができるまで」DIST.12 「Adobe Creative Station ができるまで」
DIST.12 「Adobe Creative Station ができるまで」
 
ノンデザイナーのための配色理論
ノンデザイナーのための配色理論ノンデザイナーのための配色理論
ノンデザイナーのための配色理論
 
おふとんから眺めるSVG
おふとんから眺めるSVGおふとんから眺めるSVG
おふとんから眺めるSVG
 
情報編集(Web) HTML5 実践1 Canvas + Javascriptで図形を描く
情報編集(Web) HTML5 実践1 Canvas + Javascriptで図形を描く情報編集(Web) HTML5 実践1 Canvas + Javascriptで図形を描く
情報編集(Web) HTML5 実践1 Canvas + Javascriptで図形を描く
 
Inline SVG - トラブルとその対策
Inline SVG - トラブルとその対策Inline SVG - トラブルとその対策
Inline SVG - トラブルとその対策
 
SVGをつかったプロトタイプ制作
SVGをつかったプロトタイプ制作SVGをつかったプロトタイプ制作
SVGをつかったプロトタイプ制作
 
Canvas勉強会
Canvas勉強会Canvas勉強会
Canvas勉強会
 
WordCamp KOBE 2011 LT
WordCamp KOBE 2011 LTWordCamp KOBE 2011 LT
WordCamp KOBE 2011 LT
 
Modern OpenGL Usage: Using Vertex Buffer Objects Well
Modern OpenGL Usage: Using Vertex Buffer Objects Well Modern OpenGL Usage: Using Vertex Buffer Objects Well
Modern OpenGL Usage: Using Vertex Buffer Objects Well
 
「なんとなく」を共有する、コンテンツを活かしたデザインプロセス
「なんとなく」を共有する、コンテンツを活かしたデザインプロセス「なんとなく」を共有する、コンテンツを活かしたデザインプロセス
「なんとなく」を共有する、コンテンツを活かしたデザインプロセス
 
コーディングが上達するコツ
コーディングが上達するコツコーディングが上達するコツ
コーディングが上達するコツ
 
C++ マルチスレッド 入門
C++ マルチスレッド 入門C++ マルチスレッド 入門
C++ マルチスレッド 入門
 
はじめてのUXとUIの話
はじめてのUXとUIの話はじめてのUXとUIの話
はじめてのUXとUIの話
 
D3.jsでのデータビジュアライゼーション -人口統計データから使い方を学ぶ-
D3.jsでのデータビジュアライゼーション -人口統計データから使い方を学ぶ-D3.jsでのデータビジュアライゼーション -人口統計データから使い方を学ぶ-
D3.jsでのデータビジュアライゼーション -人口統計データから使い方を学ぶ-
 

Similar to SVG MANIAX Ver.2 - Mars vanilla

4D Tags
4D Tags4D Tags
4D Tags
kmiyako
 
HTML5-20100626
HTML5-20100626HTML5-20100626
HTML5-20100626
Taku AMANO
 
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみようJavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
Hiroaki Wakamatsu
 
SVGでつくるインタラクティブWebアプリケーション
SVGでつくるインタラクティブWebアプリケーションSVGでつくるインタラクティブWebアプリケーション
SVGでつくるインタラクティブWebアプリケーション
Kohei Kadowaki
 
Gtug girls-20140828
Gtug girls-20140828Gtug girls-20140828
Gtug girls-20140828
Daichi Morifuji
 
モックアップやプロトタイプづくりを 加速させる。それが SVG。@DIST.4 「Life is Short」
モックアップやプロトタイプづくりを 加速させる。それが SVG。@DIST.4 「Life is Short」モックアップやプロトタイプづくりを 加速させる。それが SVG。@DIST.4 「Life is Short」
モックアップやプロトタイプづくりを 加速させる。それが SVG。@DIST.4 「Life is Short」
Naoki Matsuda
 
インラインSVGをつかって地図っぽいものをつくってみる
インラインSVGをつかって地図っぽいものをつくってみるインラインSVGをつかって地図っぽいものをつくってみる
インラインSVGをつかって地図っぽいものをつくってみる
Kohei Kadowaki
 
ShareWisをFirefoxで動かすためのSVG的とりくみ
ShareWisをFirefoxで動かすためのSVG的とりくみShareWisをFirefoxで動かすためのSVG的とりくみ
ShareWisをFirefoxで動かすためのSVG的とりくみ
Kohei Kadowaki
 
HTML5 on ASP.NET
HTML5 on ASP.NETHTML5 on ASP.NET
HTML5 on ASP.NET
Fujio Kojima
 
レスポンシブWebデザイン【発展編】
レスポンシブWebデザイン【発展編】レスポンシブWebデザイン【発展編】
レスポンシブWebデザイン【発展編】
Yasuhito Yabe
 
CSS Design and Programming
CSS Design and ProgrammingCSS Design and Programming
CSS Design and Programming
Taku AMANO
 
HTML5のCanvas入門 - Img画像を編集してみよう -
HTML5のCanvas入門 - Img画像を編集してみよう -HTML5のCanvas入門 - Img画像を編集してみよう -
HTML5のCanvas入門 - Img画像を編集してみよう -
Toshio Ehara
 
Css3でキャラクターアニメーションに挑戦してみた
Css3でキャラクターアニメーションに挑戦してみたCss3でキャラクターアニメーションに挑戦してみた
Css3でキャラクターアニメーションに挑戦してみた
Shinichi Sato
 
D3jsを使ってみた@wcan lt大会
D3jsを使ってみた@wcan lt大会D3jsを使ってみた@wcan lt大会
D3jsを使ってみた@wcan lt大会
Takuya Ueda
 
Svgについて
SvgについてSvgについて
Svgについて
tomowata
 
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
Yasuhito Yabe
 
Firefox OSアプリ 「ModeView」
Firefox OSアプリ 「ModeView」Firefox OSアプリ 「ModeView」
Firefox OSアプリ 「ModeView」
Hideki Akiba
 
Native x Webでいいとこどり開発 ~ピグトーク~
Native x Webでいいとこどり開発 ~ピグトーク~Native x Webでいいとこどり開発 ~ピグトーク~
Native x Webでいいとこどり開発 ~ピグトーク~
Kazunari Hara
 
SVG、あきた
SVG、あきたSVG、あきた
SVG、あきた
cocu_628496
 
AngularJSでデータビジュアライゼーションがしたい
AngularJSでデータビジュアライゼーションがしたいAngularJSでデータビジュアライゼーションがしたい
AngularJSでデータビジュアライゼーションがしたい
Yosuke Onoue
 

Similar to SVG MANIAX Ver.2 - Mars vanilla (20)

4D Tags
4D Tags4D Tags
4D Tags
 
HTML5-20100626
HTML5-20100626HTML5-20100626
HTML5-20100626
 
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみようJavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
 
SVGでつくるインタラクティブWebアプリケーション
SVGでつくるインタラクティブWebアプリケーションSVGでつくるインタラクティブWebアプリケーション
SVGでつくるインタラクティブWebアプリケーション
 
Gtug girls-20140828
Gtug girls-20140828Gtug girls-20140828
Gtug girls-20140828
 
モックアップやプロトタイプづくりを 加速させる。それが SVG。@DIST.4 「Life is Short」
モックアップやプロトタイプづくりを 加速させる。それが SVG。@DIST.4 「Life is Short」モックアップやプロトタイプづくりを 加速させる。それが SVG。@DIST.4 「Life is Short」
モックアップやプロトタイプづくりを 加速させる。それが SVG。@DIST.4 「Life is Short」
 
インラインSVGをつかって地図っぽいものをつくってみる
インラインSVGをつかって地図っぽいものをつくってみるインラインSVGをつかって地図っぽいものをつくってみる
インラインSVGをつかって地図っぽいものをつくってみる
 
ShareWisをFirefoxで動かすためのSVG的とりくみ
ShareWisをFirefoxで動かすためのSVG的とりくみShareWisをFirefoxで動かすためのSVG的とりくみ
ShareWisをFirefoxで動かすためのSVG的とりくみ
 
HTML5 on ASP.NET
HTML5 on ASP.NETHTML5 on ASP.NET
HTML5 on ASP.NET
 
レスポンシブWebデザイン【発展編】
レスポンシブWebデザイン【発展編】レスポンシブWebデザイン【発展編】
レスポンシブWebデザイン【発展編】
 
CSS Design and Programming
CSS Design and ProgrammingCSS Design and Programming
CSS Design and Programming
 
HTML5のCanvas入門 - Img画像を編集してみよう -
HTML5のCanvas入門 - Img画像を編集してみよう -HTML5のCanvas入門 - Img画像を編集してみよう -
HTML5のCanvas入門 - Img画像を編集してみよう -
 
Css3でキャラクターアニメーションに挑戦してみた
Css3でキャラクターアニメーションに挑戦してみたCss3でキャラクターアニメーションに挑戦してみた
Css3でキャラクターアニメーションに挑戦してみた
 
D3jsを使ってみた@wcan lt大会
D3jsを使ってみた@wcan lt大会D3jsを使ってみた@wcan lt大会
D3jsを使ってみた@wcan lt大会
 
Svgについて
SvgについてSvgについて
Svgについて
 
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
 
Firefox OSアプリ 「ModeView」
Firefox OSアプリ 「ModeView」Firefox OSアプリ 「ModeView」
Firefox OSアプリ 「ModeView」
 
Native x Webでいいとこどり開発 ~ピグトーク~
Native x Webでいいとこどり開発 ~ピグトーク~Native x Webでいいとこどり開発 ~ピグトーク~
Native x Webでいいとこどり開発 ~ピグトーク~
 
SVG、あきた
SVG、あきたSVG、あきた
SVG、あきた
 
AngularJSでデータビジュアライゼーションがしたい
AngularJSでデータビジュアライゼーションがしたいAngularJSでデータビジュアライゼーションがしたい
AngularJSでデータビジュアライゼーションがしたい
 

SVG MANIAX Ver.2 - Mars vanilla

  • 1. SVG MANIAX Scalable Vector Graphics Ver. 2 Mars vanilla 「SVGってもう使っていいの?」勉強会 松田直樹
  • 2. CCO, Web Designer 松田直樹
  • 6. 2012年時点で、CNN が アメリカ大統領選コンテンツで SVG を使っている http://edition.cnn.com/election/2012/ecalculator
  • 7. Google Analytics のグラフも SVG 2013年末で IE8 をサポート外に
  • 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 の場合は不要
  • 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. 描画領域を指定する viewBox 属性 表示する領域(viewport)を指定する属性値 Illustrator でのアートボードに相当する
  • 16. <svg viewBox="0 0 100 100" > 100 x 100 0, 0 100, 100 0,0
  • 17. <svg viewBox=“-100 -100 190 190" > 0,0 100 x 100 -100, -100 190, 190
  • 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. viewBox の値は 利用空間(描画領域)における 座標と長さを変換する基準値
  • 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 = 親要素のサイズに応じる
  • 22. viewBox の指定がない場合 width="100px" height="100px" <circle cx="100" cy="100" r="100"/> 円の直径は 200 SVG の 1px = ブラウザの 1px 100px 100px
  • 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 の記述は必要なし
  • 29. SVG Referencing modes 参照モード
  • 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. SVG Processing 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 の指定がないと おかしい
  • 45. 「Referencing modes」と「Processing modes」は まだ Working Draft なので、 各ブラウザでの表示仕様も揺れている現状 https://svgwg.org/specs/integration/#referencing-modes https://svgwg.org/specs/integration/#processing-modes
  • 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 属性を指定してはいけない
  • 50. ちなみに、 Illustrator で 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'); }); }
  • 57. onerror イベントで <img src="sample.svg"      onerror="this.src='fallback.png';">
  • 58. background-image で .element { background-image: url(fallback.png); background-image: url(sample.svg), none; }
  • 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
  • 64. 大きく分けて 3種類 SMIL アニメーション CSS アニメーション SVG DOM アニメーション
  • 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()
  • 75. Canvas と SVG どっち使う?
  • 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
  • 78. SVG の魅力は、 Illustrator などで1枚絵を書き出したあと、 すぐに動かしたいパーツだけ動かせる 針だけ 動かせる 目だけ 動かせる
  • 79. SVG の魅力は、 HTML における、SVG 以外の DOM オブジェクトや CSS と連携できる
  • 83. SVG と Adobe Illustrator
  • 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 要素 • 図形要素をグルーピングして単にテンプレート化したもの • 単独の座標系は持たず、再利用時にサイズは変更できない
  • 98. 松田直樹 ありがとうございました SVG Scalable Vector Graphics MANIAX Ver. 2