SVG-可伸缩矢量图

一、SVG是用标记式语言进行描述的，使用XML来描述

二、SVG支持的三种图形对象：矢量图形形状、图像和文本

三、SVG的优点：

1. 矢量图是使用相对点来保存数据的，因此可以缩放到任意大小而不会失帧
2. SVG仅仅是保存矢量图，文件大小相对于JPEG、GIF和PNG更小,可压缩性更强
3. SVG图像可在任何高分辨率下被高质量打印
4. SVG图像中文本是可选的，同时也是可搜索的

四、SVG的根元素

• width
• height
• viewbox(定义了SVG中所有形状遵循的坐标，前两个值被称为min-x，min-y，来描述左上角的位置；后两个值被称为宽度和高度，来描述右下角的位置)

<svg width="200px" height="180px" viewbox="0 0 200 180">

其中的形状为了填满SVG的宽度和高度，就会被放大

五、标题和描述标签

• title
• desc

1. 可以用来在图像不可见的情况下描述图形的内容,提高了SVG文档的可读性
2. 在SVG图片被应用为背景图片时，可以去除这些标签来减少文件大小

六、defs标签

它用于储存所有可以复用的元素定义的地方，如梯度、符号、路径

七、元素g

1. g元素能把其他元素捆绑在一起
2. g标签中我们可以看到先前的命名空间，这会有助于图形编辑软件再次打开这个图像，但是它对于这个图片在其他地方展示并没有影响

八、SVG路径

SVG拥有一系列可用的形状（path, rect、circle、ellipse、line、polyline、polygon）

九、在Web上插入SVG

1. 使用img标签
2. 使用object标签

object标签是W3C推荐的用于装载非HTML内容的容器
data属性是你链接SVG资源的方式。type属性描述了内容的MIME类型
通过object标签插入到页面的SVG可以被JavaScript访问

3. 把SVG作为背景图形插入(background-image)

在CSS中，当两个相同属性都被应用的时候，样式表中下方的属性总会覆盖上方的属性

4. 内联SVG

在CSS中，当两个相同属性都被应用的时候，样式表中上方的属性总会覆盖下方的属性
如果你删除掉SVG元素的width和height属性，SVG就会自动缩放来填满容器
使用内联SVG后，可以根据上下文来改变SVG的颜色

<img  src="mySconeVector.svg" alt="Amazing line art of a scone" />  
<object  data="img/svgfile.svg" type="image/svg+xml"><span class="fallback-info">Your browser doesn't support SVG</span></object>  
.items{background-image:url('image.svg')}  
<svg id="svgInline" width="200" height="180" viewBox="0 0 200 180" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.
w3.org/1999/xlink">
<title>Star 1</title>
<g class="star_Wrapper" fill="none" fill-rule="evenodd">
<path id="star_Path" stroke="#979797" strokewidth="3" fill="#F8E81C" d="M99 154l-58.78 30.902 11.227-65.45L3.89473.097l65.717-9.55L99 4l29.39 59.55 65.716 9.548-47.553 46.353 11.22665.452z" /></g></svg>