Let’s Try SVG Sprite 
小林 正弘 
14年11月30日日曜日
小林 正弘 
Frontend Engineer 
14年11月30日日曜日
iPhone 6 plus 
device-pixel-raito = 3 
14年11月30日日曜日
iPhone6 plus で見ても、そんなに劣化してないな 
3倍にすると対応時間かかるし重いからこれで。。 
Engineer 
14年11月30日日曜日
iPhone6 plus で見ても、そんなに劣化してないな 
3倍にすると対応時間かかるし重いからこれで。。 
Engineer 
なんか画像ぼやけてません? 
ここもうちょっとキレイに表示できませんか? Desiner 
14年11月30日日曜日
iPhone6 plus で見ても、そんなに劣化してないな 
3倍にすると対応時間かかるし重いからこれで。。 
Engineer 
なんか画像ぼやけてません? 
ここもうちょっとキレイに表示できませんか? Desiner 
ファイルサイズガー 表示速度ガー 
くぁwせdrftgyふじこlp.......!! Engineer 
14年11月30日日曜日
Retinaディスプレイ登場時の 
悪夢 再び・・・? 
14年11月30日日曜日
S 
V 
G 
Scalable 
Vector 
Grahpics 
14年11月30日日曜日
SVGファイルをつくってみましょう 
14年11月30日日曜日
14年11月30日日曜日
複数のSVGファイルを 
Sprite化してみましょう 
14年11月30日日曜日
Step1 Sprite用のコードを作成 
svgタグにclass=”defs”を指定 
14年11月30日日曜日
Step1 Sprite用のコードを作成 
svgタグにclass=”defs”を指定 
14年11月30日日曜日
Step1 Sprite用のコードを作成 
symbol要素に使用するSVGの 
idとviewBoxを記述 
14年11月30日日曜日
Step1 Sprite用のコードを作成 
使用するSVG画像のsvg 
タグを挿入 
14年11月30日日曜日
Step2 呼び出す 
14年11月30日日曜日
Step2 呼び出す 
xlink:href属性にスプライトで指定し 
たid属性を指定します。 
useタグは必ずsvgタグで包括する必 
要があります。 
14年11月30日日曜日
Step2 呼び出す 
アクセシビリティ向上のため、 
title/desc属性を 
指定してあげるとよりベター 
14年11月30日日曜日
14年11月30日日曜日
.defs { 
display: none; 
} 
14年11月30日日曜日
14年11月30日日曜日
Step3 CSSで装飾 
14年11月30日日曜日
アレ・・・ 
ちょっとめんどくね・・・? 
14年11月30日日曜日
ファイル一式落とせます 
https://icomoon.io 
14年11月30日日曜日
grunt/gulpもあります 
https://github.com/FWeinb/grunt-svgstore 
https://github.com/shakyShane/gulp-svg-sprites 
14年11月30日日曜日
iOS 
4~ 3.2~ 3~ 9~ 3.0~ 3.2~ 
14年11月30日日曜日
ありがとうございました 
14年11月30日日曜日

Let's Try SVG Sprite