Embed Size (px)
Citation preview
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 で見ても、そんなに劣化してないな３倍にすると対応時間かかるし重いからこれで。。
Engineer
14年11月30日日曜日
iPhone6 plus で見ても、そんなに劣化してないな３倍にすると対応時間かかるし重いからこれで。。
Engineer
なんか画像ぼやけてません？ここもうちょっとキレイに表示できませんか？
Desiner
14年11月30日日曜日
iPhone6 plus で見ても、そんなに劣化してないな３倍にすると対応時間かかるし重いからこれで。。
Engineer
なんか画像ぼやけてません？ここもうちょっとキレイに表示できませんか？
Desiner
ファイルサイズガー 表示速度ガーくぁwせdrftgyふじこlp.......!!
Engineer
14年11月30日日曜日
Retinaディスプレイ登場時の
悪夢 再び・・・？
14年11月30日日曜日
SVG
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://github.com/FWeinb/grunt-svgstore
grunt/gulpもあります
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日日曜日
