svg sprite

SVG（Scalable Vector Graphics）是一种矢量图格式。Adobe Illustrator是专门编辑、制作矢量图的软件。

随着高清视网膜屏幕的出现，Web设计需要根据屏幕输出不同分辨率的图片。在开发中需要准备两套不同的图片应对，一套在普通屏幕上显示；一套在高清屏幕上显示。

现在流行的icon font字体图标，其实质上是SVG的封装。

Adobe Illustrator能直接把文件保存成SVG格式：

1-1保存-选择SVG(svg)

1-2格式类型选择 SVG 1.1

浏览器支持统计

在所有浏览器中支持，可以采用以下方式：David Bushell

使用Modernizr检测,JQuery做降级处理：


 if (!Modernizr.svg) {
 $('img[src$=".svg"]').each(function() {
 $(this).attr('src', $(this).attr('src').replace('.svg', '.png'));
 });
 }

使用Modernizr检测,CSS降级处理：
Modernizr在检测到不支持SVG时，会在HTML上加了no-svgCSS类


 .icon-logo
 {
 background: url(logo.svg) no-repeat top left;
 background-size: contain;
 }


 .no-svg .main-header
 {
 background-image: url(logo.png);
 }

使用img和object标签直接引用svg。这种方法的缺点主要在于要求每个图标都单独保存成一个SVG文件，使用时也是单独请求的，增加了HTTP请求。
- 最简单的用法：
- 使用object标签：
- 使用object标签，Data URL 方式
- object+css：不能加载svg时，会渲染内部 div的样式
  
  html：
  
  css：
  #logo div
  {
  width: 300px;
  height: 50px;
  background-image: url("logo.png");
  }
Inline SVG，直接把SVG写入 HTML 中，这种方法简单直接，而且具有非常好的可调性。Inline SVG 作为HTML文档的一部分，不需要单独请求。临时需要修改某个图标的形状也比较方便。但是Inline SVG使用上比较繁琐，需要在页面中插入一大块SVG代码不适合手写，图标复用起来也比较麻烦。
```
 
```
SVG Sprite。这里所说的Sprite技术，没错，类似于CSS中的Sprite技术。图标图形整合在一起，实际呈现的时候准确显示特定图标。其实基础的SVG Sprite也只是将原来的位图改成了SVG而已。
使用svg中的元素来制作icon。SVG本身的定义是允许你可以使用的方式直接引用SVG中的某一部分。

首先使用方式，将SVG文件组装起来。注意每个都必须有唯一的id。

circle-cross icon

circle-check icon

1.  将SVG的XML文档插入到HTML中，直接用id引用icon：
        

2.  使用外部链接文件的形式引用icon：
        

3.  支持fallback：

自动合并生成工具gulp-svg-symbols