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