Download to read offline
Let's Try SVG Sprite
- 1. Let’s Try SVGSprite 小林 正弘 14年11月30日日曜日
- 2. 小林 正弘 FrontendEngineer 14年11月30日日曜日
- 3. iPhone 6 plus device-pixel-raito = 3 14年11月30日日曜日
- 4. iPhone6 plus で見ても、そんなに劣化してないな ３倍にすると対応時間かかるし重いからこれで。。 Engineer 14年11月30日日曜日
- 5. iPhone6 plus で見ても、そんなに劣化してないな ３倍にすると対応時間かかるし重いからこれで。。 Engineer なんか画像ぼやけてません？ ここもうちょっとキレイに表示できませんか？ Desiner 14年11月30日日曜日
- 6. iPhone6 plus で見ても、そんなに劣化してないな ３倍にすると対応時間かかるし重いからこれで。。 Engineer なんか画像ぼやけてません？ ここもうちょっとキレイに表示できませんか？ Desiner ファイルサイズガー 表示速度ガー くぁwせdrftgyふじこlp.......!! Engineer 14年11月30日日曜日
- 7. Retinaディスプレイ登場時の 悪夢 再び・・・？ 14年11月30日日曜日
- 8. S V G Scalable Vector Grahpics 14年11月30日日曜日
- 9.
- 10.
- 11.
- 12. Step1 Sprite用のコードを作成 svgタグにclass=”defs”を指定 14年11月30日日曜日
- 13. Step1 Sprite用のコードを作成 svgタグにclass=”defs”を指定 14年11月30日日曜日
- 14. Step1 Sprite用のコードを作成 symbol要素に使用するSVGの idとviewBoxを記述 14年11月30日日曜日
- 15. Step1 Sprite用のコードを作成 使用するSVG画像のsvg タグを挿入 14年11月30日日曜日
- 16.
- 17. Step2 呼び出す xlink:href属性にスプライトで指定し たid属性を指定します。 useタグは必ずsvgタグで包括する必 要があります。 14年11月30日日曜日
- 18. Step2 呼び出す アクセシビリティ向上のため、 title/desc属性を 指定してあげるとよりベター 14年11月30日日曜日
- 19.
- 20. .defs { display:none; } 14年11月30日日曜日
- 21.
- 22.
- 23.
- 24.
- 25.
- 26. iOS 4～ 3.2～3～ 9～ 3.0～ 3.2～ 14年11月30日日曜日
- 27.