SVG动画开发实例一：SVG介绍-清楚SVG结构)和完全入门【万字长文!】

介绍

SVG是一种开放标准的矢量图形语言，表示可缩放矢量图形（Scalable Vector Graphics）格式，是由万维网联盟（W3C）开发并进行维护的。它用来定义网络的基于矢量的图形。

SVG的优点：

1. 基于文本的格式(Text-based format)：SVG元素包含文本，这提高了网站的可访问性。最大的优势是可以被搜索引擎抓取到，用户可以直接通过搜索引擎找到一个SVG文件。

2. 可扩展性(Scalability)：SVG图像的质量不取决于分辨率。与其他格式或字体图标的图像不同，SVG作为矢量图像，可以无限缩小放大，在任何设备和尺寸上都非常清晰。不需要再输出各种@2x倍图来适配不同分辨率的屏幕。

   可伸缩性还意味着，如果在网站上使用相同的图像，但尺寸不同，则仅使用一个SVG就可以。不必像PNG一样创建多个副本。相反，可以嵌入同一图像，并直接在SVG代码中定义其大小。

3. 高性能(High performance)：如果你优先考虑性能，则应使用SVG。使用SVG，则不需要加载到图像文件的HTTP请求。由于没有文件下载，因此页面加载速度更快。更快的加载时间可以转化为更好的网页性能和更高的搜索引擎排名。反过来，它可以改善用户体验。

4. 更小的文件大小(Small file size)：简单SVG文件的大小由包含的颜色，图层，渐变，效果和蒙版决定。PNG或任何其他栅格图形文件的大小由其组成的像素数决定。PNG图像越大，其尺寸越大。但SVG不是这样。而且，优化SVG可以减少其体积。

5. 大量的编辑和动画的可能：与栅格图像不同，可以在专用矢量绘图程序或文本编辑器中编辑矢量图像。还可以直接通过CSS编辑SVG的颜色或大小。而动画SVG，可以借助SMIL，Web Animations API，WebGL或CSS animation完成。

   常用设计工具都支持编辑和导出SVG图形格式，比如AI或Sketch、Inkscape

6. 与HTML，XHTML和CSS集成：SVG是一种XML格式的图形。被设计为与其他的开放Web平台技术集成并扩展，例如X/HTML，CSS和Javascript。

   可以使用CSS和JavaScript进行交互。主流设备也都支持SVG。

7. W3C文档对象模型支持(W3C Document Object Model support)：SVG由w3c维护和支持。

缺点就是，细节比较多的svg，体积可能会比较大。

svg图像通常由大量的小部分组成，大量的小部件使SVG格式的使用不太方便。图像组成的部分越多，其体积越大。

在实际使用中，考虑到体积问题，如果图片是线性的并且包含很少的颜色——SVG可能比较好。但是，如果细节很重要并且有很多细节，则PNG或JPEG可能更合适。

注意，SVG不能用作图片。如果在网站上使用图片，则SVG并非最佳选择，绝对应该使用光栅图像格式(raster image format)。

图形系统

计算机中描述图形信息的两大系统是栅格图形和矢量图形。

• raster image format：栅格图片格式

栅格图形(raster graphics)

栅格图的图像被表示为图片元素或者像素的长方形数组。如下图片所示，每个像素用其RGB颜色值或者颜色表内的索引表示。

栅格图也称为位图，是像素的集合，由无数个像素点组成，通过以某种压缩格式存储。由于大多数现代显示设备也是栅格设备，显示图像时仅需要一个阅读器将位图解压并将它传输到屏幕上。

位图图像(bitmap)

矢量图形(vector graphics)

矢量图形是以数学方式表示图像的图形，是由坐标和基于坐标的线、面、体组成，是基于绘制的图形，包含图形的各项参数(颜色、坐标、大小、满足的数学公式等)。

比较好的说明：

SVG作为矢量图像由数学方程式组成，这些数学方程式定义了以XML格式构成图形和文字的直线和曲线的位置和颜色。 SVG可用于图标，徽标，图形设计和字体。

As vector images, SVGs are composed of mathematical equations that define the positioning and color of lines and curves which make up graphic shapes and text in XML format. SVGs are used for icons, logos, graphic designs, and fonts.

但是，通常，矢量图都是由位图仿制出来的(用于呈现到屏幕上)

基本知识

SVG元素基本结构

SVG的结构：

<svg width='140' height='170' xmlns='http://wwww.w3.org/2000/svg'>
  <title>Cat</title>
  <desc>Stick Figure of Cat</desc>
  <!-- 在这里绘制图像 -->
</svg>

根元素<svg>以像素为单位定义整个图像的width和height，通过xmlns属性定义 SVG 的命名空间。x和y表示SVG坐标系统的起点。

<title>元素的内容可以被阅读器显示在标题栏上或者鼠标指针指向图像时的提示。

<desc>元素为图像定义完整的描述信息。

SVG的坐标系统

SVG 坐标系统的起点从左上角开始，width 和 height 属性表示 svg元素 的宽高。

svg使用的是网格坐标系统。svg的坐标系以左上角为原点(0,0)，向右为 x 轴的正方向（从 0,0 点开始向右，x 逐渐增大），向下为 y 轴的正方向（从 0,0 点开始向下，y 逐渐增大）。

svg的坐标以像素为单位。svg 元素内的所有子元素的 x、y 属性，表示基于 svg 原点的开始位置，并通过宽高、路径等确定最终形状。

基本形状

可以先看下svg内容和图形效果：

<svg x="0px" y="0px" width="600px" height="100px" viewBox="0 0 600 100">
    <rect x="10" y="5" fill="white" stroke="black" width="90" height="90"></rect>
    <circle cx="170" cy="50" r="45" fill="white" stroke="black"></circle>
    <ellipse cx="320" cy="50" rx="100" ry="50" fill="white" stroke="black" />
    <line fill="none" stroke="black" x1="430" y1="6" x2="460" y2="95"></line>
    
    <polyline points='35 110,45 120, 95 120, 105, 110' style='stroke:black; fill:none'/>
    <polygon points='60 60, 65,72 80 60, 90,90 72,85 50,95' style="fill: yellow; fill-opacity:.5; stroke:black" />
</svg>

svg元素的 width 和 height 表示宽高。svg的坐标系以左上角为原点(0,0)，向右x增大，向下y增大。

svg 元素自身指定 x 和 y 属性没有任何效果，svg元素的位置是根据文档流及css属性确定的。

• svg图形的基本属性

  简单常用的几个属性：

  • fill表示填充形状的颜色。默认值fill:black。

  • stroke表示边框的颜色。默认值stroke:none，没有描边。

  • stroke-width边框的宽度。

  • transformCSS3的图形变换属性

这几个属性可以直接写在元素上作为单独的属性，也可以写在style属性(即css)中。所有的外观属性都可以被用于CSS

• 基本图形

1. rect定义矩形或正方形：

- `x`和`y`属性是相对于**svg**元素的定位，即矩形的起始点；
- `width`矩形宽度
- `height`矩形高度

2. <circle>定义圆：

• cx和cy 定义圆心坐标，
• r为圆的半径

3. <ellipse>绘制椭圆：

• rx为短轴长，ry为横轴长

4. <line>表示一条直线

• x1和y1为直线的起点，
• x2和y2为直线的终点。

5. <polyline>表示折线

• points表示一组坐标点的数列，坐标点及坐标点的X和Y坐标使用逗号或空格分割。因此坐标总数必须是偶数(x、y坐标的和)。polyline连接这些点组成折线。如points="108 62,90 10, 70 45, 50, 10, 32, 62"。

6. <polygon>表示闭合多边形形状

• points，同样使用points绘制。

SVG容器、viewBox和全局(世界)【重要】

图形的视窗

SVG的属性width、height控制svg图形的视窗的大小，也称为SVG容器

全局(世界)

SVG里面的元素或代码，在SVG的世界内定义，SVG世界是基于坐标(0,0)的坐标系范围，其空间可以看作是一个任意扩展的空间，也便于适用不同尺寸的屏幕。

视野

SVG的viewBox用于精确控制和定义SVG的可视空间，相当于看SVG世界时的视野，视野最后呈现在视窗(svg容器)上。viewBox属性和svg元素的关系，可以类比视窗viewport和浏览器窗口的关系。viewBox定义可见的范围，这个范围的图形会被显示到svg上。

如下图所示，蓝色范围相当于viewBox，该范围作为可见区域显示在SVG上，就是看到的内容。

• viewbox默认范围是容器元素的大小，也就是整个svg元素的范围(svg是一个容器元素)。
• svg元素的大小和viewBox的大小无关，但是viewBox会适应svg的范围，显示在其内。viewBox的适应准则是默认占满一边(占满整个高度，或整个宽度，另外方向上自动扩展至整个容器)。后面的示例可以看到

viewBox参数x、y、width、height。

viewBox的作用在于以完整，或以设置的视野，将图像呈现到svg中，方便调整svg的大小，而不影响看到的(显示的)图形。自己可以从测试使用中体会到

• 实际示例，理解viewBox

如下，是没有设置viewBox的效果：

<svg width="400" height="300" style="border:1px solid blue;">
    <circle cx="10" cy="10" r="10" fill="blue"></circle>
    <circle cx="30" cy="10" r="10" fill="blue"></circle>
</svg>

然后是设置viewBox，以及将viewBox的宽度不一样时的对比，可以看到viewBox首先占满宽度或高度：

<svg width="400" height="300" viewBox="0 0 20 20" style="border:1px solid blue;">
    <title>viewBox</title>
    <desc>视野 高度铺满，宽度按比例，然后拉伸整个宽度</desc>
    <circle cx="10" cy="10" r="10" fill="blue"></circle>
    <circle cx="30" cy="10" r="10" fill="blue"></circle>
</svg>
<svg width="400" height="300" viewBox="0 0 26 20" style="border:1px solid blue;">
    <title>viewBox</title>
    <desc>视野 </desc>
    <circle cx="10" cy="10" r="10" fill="blue"></circle>
    <circle cx="30" cy="10" r="10" fill="blue"></circle>
</svg>

这是因为圆的半径是10，直径是20。viewBox宽高都为20，则相当于在SVG坐标系的左上角画来一个20x20的框，然后这个框放大填充整个 SVG 区域，展现这个区域内的内容。

SVG高级使用

SVG路径path

查看如下代码和效果：

<svg class="svg-example" viewBox="0 0 580 400" xmlns="http://www.w3.org/2000/svg">
<g>
  <path id="svg_5" d="m148.60774,139.10039c28.24222,-69.1061 138.89615,0 0,88.8507c-138.89615,-88.8507 -28.24222,-157.9568 0,-88.8507z" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" stroke="#000" fill="none"/>
  <path id="svg_6" d="m265.00089,146.09396l19.88082,-21.09307l21.11909,22.40665l21.11909,-22.40665l19.88101,21.09307l-21.11909,22.40684l21.11909,22.40684l-19.88101,21.09326l-21.11909,-22.40684l-21.11909,22.40684l-19.88082,-21.09326l21.11891,-22.40684l-21.11891,-22.40684z" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" stroke="#000" fill="none"/>
 </g>
</svg>

.svg-example {
  width:580px;
  height:400px;
}

• path是svg中最核心的元素，所有的基本形状都是通用的<path>元素的快捷写法。<path>的属性d，即data，保存的是一条路径的绘图数据。d一般以M或m(moveTo)为第一个值，即确定一个起点。

由示例可知，d中坐标数据使用逗号或空格分隔；命令和坐标之间可以有空格，也可以直接写在一起；命令使用一个关键字母表示，命令的大写字母，表示采用绝对定位，小写字母表示采用相对定位（例如：从上一个点开始，向上移动10px，向左移动7px）。

下面是<path>的d属性的各种命令：

Command	Description	类型
M/m x y	moveto − 移动到点(x,y)，小写表示相对于上个坐标的位移，除特殊说明外，下同.	---
L/l x y	lineto − 从当前点画一条到(x,y)的直线.	直线命令
H/h x	horizontal lineto − 水平画一条直线到x.	直线命令
V/v y	vertical lineto − 垂直画一条直线到y.	直线命令
Z/z	closepath − 从当前点画一条直线到路径的起点，闭合路径。Z命令不区分大小写	直线命令
A/a rx ry x-axis-rotation large-arc sweep x y	elliptical Arc − (7个参数) 绘制弧形，弧形可以看作圆形或椭圆形的一部分 画一段到(x,y)的[椭]圆弧，[椭]圆弧的 x,y 轴半径分别为 rx,ry，椭圆相对于 x 轴旋转 x-axis-rotation 度.large-arc=0表明弧线小于180读, large-arc=1表示弧线大于180度. sweep=0表明弧线逆时针旋转,sweep=1表明弧线顺时间旋转.	曲线命令
C/c cx1 cy1 cx2 cy2 x y	curveto − 从当前点画一条到(x,y)的三次贝塞尔曲线，曲线的开始控制点和终止控制点分别为(cx1,cy1),(cx2,cy2)。 Bézier curve——贝塞尔曲线。 如图，为三次贝塞尔曲线： 控制点描述的是曲线起始点的斜率，曲线上各个点的斜率，是从起点斜率到终点斜率的渐变过程。
S/s cx2 cy2 x y	smooth curveto − 此命令要跟在C或S命令后或单独使用，假设C命令生成曲线s，S命令的作用是再画一条到 (x,y) 的三次贝赛尔曲线，曲线的终点控制点是(cx2,cy2)，曲线的开始控制点是s的终点控制点关于s终点的中心对称点；单独使用时，当前点将作为第一个控制点。
Q/q cx cy x y	quadratic Bezier curve − 从当前点画一条到(x,y)的二次贝赛尔曲线,曲线控制点为(cx,cy). 二次贝塞尔曲线描述的是一条抛物线
T/t x y	smooth quadratic Bezier curveto − T命令前面必须是一个Q命令，或者是另一个T命令，延长二次贝赛尔曲线。如果T单独使用，那么控制点就会被认为和终点是同一个点，所以画出来的将是一条直线。

关于贝塞尔曲线可以参考贝塞尔曲线简单介绍中的介绍

用计算机画图大部分时间是操作鼠标来掌握线条的路径。与手绘的感觉和效果有很大的差别。即使是一位精明的画师能轻松绘出各种图形，拿到鼠标想随心所欲的画图也不是一件容易的事。

使用贝塞尔工具画图很大程度上弥补了这一缺憾。

贝塞尔曲线是计算机图形图像造型的基本工具，是图形造型运用得最多的基本线条之一。

尤其是曲线，借助三阶贝塞尔曲线，可以画出很流畅的线条。

SVG组合g和引用对象

分组g

上面可以看到两个图形位于<g>元素中：

<g>标签即 group 组，用来集合多个 SVG 元素。g设置的所有样式可以直接应用到没有设置相关属性的子元素。

1）<g>元素会将所有子元素作为一个组合，通常还有一个唯一的id作为名称;

2）每个组合还可以拥有自己的<title>和<desc>来供基于文本的xml应用程序识别或者为视障用户提供更好的可访问性;

3）阅读器会读取<title>和<desc>元素的内容。鼠标悬停或者轻触组合内的图形时，会显示<title>元素内容的提示框。

4）<g>元素可以组合元素并提供一些注释，组合还可以嵌套;

如下是一个使用g分组的图形例子，将相同的图形要素作为一组来处理

 <svg width='240' height='240' xmlns='http://wwww.w3.org/2000/svg'>
  <title>欢乐一家人</title>
  <desc>一家人在一起就是简单幸福的了</desc>

  <g id='house' style='fill:none; stroke:black'>
    <desc>房子</desc>
    <rect x='6' y='50' width='60' height='60'/>
    <polyline points='6 50, 36 9, 66 50' />
    <polyline points='36 110, 36 80, 50 80， 50 110' />
  </g>

  <g id='man' style='fill:none; stroke:green'>
    <desc>男人</desc>
    <circle cx='85' cy='56' r='10'/>
    <line x1='85' y1='66' x2='85' y2='80'/>
    <polyline points='76 104, 85 80, 94 104'/>
    <polyline points='76 70, 85 76, 94 70'/>
  </g>

  <g id='woman' style='fill:none; stroke:red'>
    <desc>女人</desc>
    <circle cx='110' cy='56' r='10'/>
    <polyline points='110 66, 110 80, 100 90, 120 90, 110 80'/>
    <line x1='104' y1='104' x2='108' y2='90'/>
    <line x1='112' y1='90' x2='116' y2='104'/>
    <polyline points='101 70, 110 76, 119 80'/>
  </g>
 </svg>

use元素

1）复杂的图形中经常会出现重复元素，svg使用<use>元素为定义在<g>元素内的组合或者任意独立图形元素提供了类似复杂黏贴的能力;

2）定义了一组<g>图形对象后，使用<use>标签再次显示它们。要指定想要的重用的组合给xlink:href属性指定URI即可，同时还要指定x和y的位置以表示组合应该移动到的位置。

3）<use>元素并不限制只使用在同一个文件内的对象，还可以指定任意有效的文件或者URI.

因此，直接使用下面的代码就可以再创建上面的小人和房子：

<use xlink:href='#house' x='70' y='100'/>
<use xlink:href='#woman' x='-80' y='100'/>
<use xlink:href='#man' x='-30' y='100'/> 

defs元素

使用<use>有几个缺点：

• 复用 man 和 woman 组合时，需要知道原始图形的位置，并以此位置为基础调整新位置，而不能直接使用数字的绝对位置

• 房子的填充和笔画颜色由原始图形建立，并且不能通过<use>元素覆盖。

• 文档中会画出所有的三个元素 woman,man 和 house,并不能将它们单独'存储'下来，然后只绘制一排房子或者只绘制一组人。

借助<defs>元素可以解决这些问题：

1）SVG规范推荐将所有想要复用的对象放置在<defs>元素内，这样SVG阅读器进入流式环境中就能更轻松地处理数据。

2）组合在<defs>元素内，不会立刻绘制到屏幕上，而是作为"模板"供其他地方使用。

<svg width='500' height='240' viewBox='0 0 500 240' xmlns='http://wwww.w3.org/2000/svg'>
    <title>欢乐一家人</title>
    <desc>一家人在一起就是简单幸福的了</desc>

    <defs>
        <desc>并不会显示，作为模板储存起来</desc>
        <g id='house' style='stroke:black'>
            <desc>房子</desc>
            <rect x='0' y='41' width='60' height='60' />
            <polyline points='0 41, 30 0, 60 41' />
            <polyline points='30 110, 30 71, 44 71， 44 101' />
        </g>

        <g id='man' style='fill:none; stroke:green'>
            <desc>男人</desc>
            <circle cx='10' cy='10' r='10' />
            <line x1='10' y1='20' x2='10' y2='44' />
            <polyline points='1 58, 10 44, 19 58' />
            <polyline points='1 24, 10 30, 19 24' />
        </g>

        <g id='woman' style='fill:none; stroke:red'>
            <desc>女人</desc>
            <circle cx='10' cy='10' r='10' />
            <polyline points='10 20, 10 34, 0 44, 20 44, 10 34' />
            <line x1='4' y1='58' x2='8' y2='44' />
            <line x1='12' y1='44' x2='16' y2='58' />
            <polyline points='1 24, 10 30, 19 24' />
        </g>

        <g id='couple'>
            <desc>夫妻</desc>
            <use xlink:href='#man' x='0' y='0' />
            <use xlink:href='#woman' x='25' y='0' />
        </g>
    </defs>
    <use xlink:href='#house' x='0' y='0' style='fill:#cfc' />
    <use xlink:href='#couple' x='70' y='40' />

    <use xlink:href='#house' x='120' y='0' style='fill:#99f' />
    <use xlink:href='#couple' x='190' y='40' />

    <use xlink:href='#house' x='240' y='0' style='fill:#e39' />
    <use xlink:href='#house' x='320' y='0' style='fill:#e39' />
    <use xlink:href='#house' x='400' y='0' style='fill:#e39' />
</svg>

symbol元素

<symbol>作为模板，同<defs>一样，内部的所有元素都不会展现在画布上。习惯上会将它放到<defs>中，因为symbol也是定义的供后续使用的元素。

symbol上可以单独定义viewBox。

<svg width='240' height='240' viewBox='0 0 240 240' xmlns='http://wwww.w3.org/2000/svg'>
  <defs>
    <symbol id="circle" viewBox="0 0 100 100" preserveAspectRatio="xMinYMin meet">
      <circle cx="50" cy="50" r="50"></circle>
    </symbol>
    <symbol id="triangle" viewBox="0 0 100 100" preserveAspectRatio="xMaxYMax slice">
      <polygon points="0 0, 100 0, 50 100"></polygon>
    </symbol>
  </defs>
  <g stroke="grey" fill="none">
    <rect x="0" y="0" width="50" height="100"></rect>
    <rect x="100" y="0" width="50" height="100"></rect>
  </g>
  <use xlink:href="#circle" width="50" height="100" fill="red"></use>
  <use xlink:href="#triangle" width="50" height="100" fill="purple" x="100"></use>
</svg>

边框(笔画)和填充

描边

• 边框(笔画,描边)stroke：上面介绍了颜色和宽度，此外还有几个需要了解的特性：

属性	值
stroke	笔画颜色，默认为none。没有描边
stroke-opacity	笔画透明度，默认为1.0（完全不透明），值范围：0.0~1.0
stroke-dasharray	用一系列数字指定虚线中实线和间隙的长度，如：stroke-dasharray:5,10,5,20
stroke-linecap	线头尾的形状：butt（默认）、round、square
stroke-linejoin	图形的棱角或一系列连线的形状：miter（尖的，默认值）、round（圆的）、bevel（平的）
stroke-miterlimit	相交处显示宽度与线宽的最大比例，默认为4

填充颜色

属性	值
fill	指定填充颜色，默认值为 black
fill-opacity	从 0.0 到 1.0 的数字， 0.0 表示完全透明, 1.0(默认值) 表示完全不透明
fill-rule	用于确定一个点属于多边形的外部还是内部。属性值为 nonzero (默认值) 或 evenodd。使用evenodd基本可以实现视觉上的图形内部为空。

fill-rule是一个外观属性，它定义了用来确定一个多边形内部区域(即可以被填充的区域)的算法。

nonzero：确定了某点属于该形状的“内部”还是“外部”：从该点向任意方向的无限远处绘制射线，然后检测形状与射线相交的位置。从 0 开始统计，路径上每一条从左到右（顺时针）跨过射线的线段都会让结果加 1，每条从右向左（逆时针）跨过射线的线段都会让结果减 1。当统计结束后，如果结果为 0，则点在外部；如果结果不为 0，则点在内部。

下面nonzero的例子：

<svg viewBox="-10 -10 320 120" xmlns="http://www.w3.org/2000/svg">
  <!-- nonzero 填充规则被用于路径段会相交的形状上的效果 -->
  <polygon fill-rule="nonzero" stroke="red"
           points="50,0 21,90 98,35 2,35 79,90"/>
 
  <!--
  nonzero 填充规则被用于一个形状在另一形状内部的效果
  这两个正方形的路径段方向相同（都是顺时针）
  -->
  <path fill-rule="nonzero" stroke="red"
        d="M110,0  h90 v90 h-90 z
           M130,20 h50 v50 h-50 z"/>

  <!--
  这个例子与第二个例子几乎相同，唯一的区别是：两个形状的路径段方向相反
  外面的正方形是顺时针，里面的正方形则是逆时针
  -->
  <path fill-rule="nonzero" stroke="red"
        d="M210,0  h90 v90 h-90 z
           M230,20 v50 h50 v-50 z"/>
</svg>

evenodd确定了某点属于该形状的“内部”还是“外部”：从该点向任意方向无限远处绘制射线，并统计这个形状所有的路径段中，与射线相交的路径段的数量。如果有奇数个路径段与射线相交，则点在内部；如果有偶数个，则点在外部。

下面evenodd的例子：

<svg viewBox="-10 -10 320 120" xmlns="http://www.w3.org/2000/svg">
  <!-- evenodd 填充规则被用于路径段会相交的形状上的效果 -->
  <polygon fill-rule="evenodd" stroke="red"
           points="50,0 21,90 98,35 2,35 79,90"/>

  <!--
  evenodd 填充规则被用于一个形状在另一形状内部的效果
  这两个正方形的路径段方向相同（都是顺时针）
  -->
  <path fill-rule="evenodd" stroke="red"
        d="M110,0  h90 v90 h-90 z
           M130,20 h50 v50 h-50 z"/>

  <!--
  这个例子与第二个例子几乎相同，唯一的区别是：两个形状的路径段方向相反
  外面的正方形是顺时针，里面的正方形则是逆时针
  -->
  <path fill-rule="evenodd" stroke="red"
        d="M210,0  h90 v90 h-90 z
           M230,20 v50 h50 v-50 z"/>
</svg>

此部分参考自MDN fill-rule

image元素

image元素用于引用图片，图片可以是矢量图(vector)或位图(raster)。比如在svg中使用image元素：

<svg width='310' height='310' viewBox='0 0 310 310' xmlns='http://wwww.w3.org/2000/svg'>
  <ellipse cx='154' cy='154' rx='150' ry='120' style='fill: #999'/>
  <ellipse cx='152' cy='152' rx='150' ry='120' style='fill: #999' />

  <image xlink:href='3.jpg' x='72' y='92'
    width='160' height='120'
  />
</svg>

svg的使用

标签中引用SVG图片

比如img标签引用svg

<img src="emoj.svg" alt="emoj">

使用 object 标签引入 SVG （不推荐）

<object> 元素的 type 属性表示要嵌入的文件类型。这个属性应该是一个有效的网络媒体类型(通常被称为 MIME 类型)。对于SVG，使用type='image/svg+xml'。

<object data='cat.svg' type='image/svg+xml' width='100' height='100'/>

css中引用

使用背景图片background-image属性可以显示SVG

 .emoji {
   display: block;
   text-indent: -9999px;
   width: 100px;
   height: 82px;
   background: url(emoji.svg);
   background-size: 100px 82px;
 }

内联（inline）应用SVG——网页中直接使用SVG标签

内联，就是直接把 SVG 代码插入到html文件中。

使用编辑器打开 SVG 文件，将SVG图片的代码插入到html文件中即可。如下：

<body>
    <svg width="128" height="128" style="enable-background:new 0 0 128 128;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <path d="M63.89,9.64C1.58,9.64,0.1,79.5,0.1,93.33c0,13.83,28.56,25.03,63.79,25.03 c35.24,0,63.79-11.21,63.79-25.03C127.68,79.5,126.21,9.64,63.89,9.64z" style="fill:#FCC21B;"/>
    <g>
        <defs>
        <path id="SVGID_1_" d="M63.89,98.06c23.15,0.05,40.56-12.97,41.19-29.05c-27.24,4.91-55.14,4.91-82.38,0 C23.33,85.09,40.74,98.11,63.89,98.06z"/>
        </defs>
        <use style="overflow:visible;fill:#FFFFFF;" xlink:href="#SVGID_1_"/>
        <clipPath id="SVGID_2_">
        <use style="overflow:visible;" xlink:href="#SVGID_1_"/>
        </clipPath>
        <g style="clip-path:url(#SVGID_2_);">
        <path d="M78.05,108c-1.1,0-2-0.9-2-2V61.07c0-1.1,0.9-2,2-2s2,0.9,2,2V106C80.05,107.1,79.16,108,78.05,108 z" style="fill:#2F2F2F;"/>
        </g>
        <g style="clip-path:url(#SVGID_2_);">
        <path d="M92.21,108c-1.1,0-2-0.9-2-2V61.07c0-1.1,0.9-2,2-2s2,0.9,2,2V106C94.21,107.1,93.32,108,92.21,108 z" style="fill:#2F2F2F;"/>
        </g>
        <g style="clip-path:url(#SVGID_2_);">
        <path d="M63.89,108c-1.1,0-2-0.9-2-2V61.07c0-1.1,0.9-2,2-2s2,0.9,2,2V106 C65.89,107.1,64.99,108,63.89,108z" style="fill:#2F2F2F;"/>
        <path d="M49.72,108c-1.1,0-2-0.9-2-2V61.07c0-1.1,0.9-2,2-2s2,0.9,2,2V106 C51.72,107.1,50.83,108,49.72,108z" style="fill:#2F2F2F;"/>
        <path d="M35.56,108c-1.1,0-2-0.9-2-2V61.07c0-1.1,0.9-2,2-2s2,0.9,2,2V106 C37.56,107.1,36.67,108,35.56,108z" style="fill:#2F2F2F;"/>
        </g>
    </g>
    <path d="M64.01,100.56h-0.25c-24.13,0-42.86-13.52-43.56-31.46c-0.03-0.76,0.29-1.49,0.86-1.98 c0.57-0.5,1.33-0.71,2.08-0.57c26.82,4.84,54.67,4.84,81.5,0c0.75-0.14,1.51,0.08,2.08,0.57c0.57,0.5,0.89,1.23,0.86,1.98 C106.87,87.04,88.14,100.56,64.01,100.56z M63.88,95.56h0.13c19.55,0,35.56-10.1,38.2-23.52c-25.29,4.18-51.36,4.18-76.65,0 c2.64,13.42,18.65,23.52,38.2,23.52H63.88z" style="fill:#2F2F2F;"/>
    <path d="M31.96,54.45c-0.78,1.28-2.44,1.7-3.73,0.93c-1.29-0.77-1.71-2.42-0.96-3.71 c0.18-0.31,4.6-7.62,14.37-7.62c9.78,0,14.2,7.31,14.39,7.62c0.76,1.29,0.32,2.97-0.97,3.73c-0.44,0.26-0.91,0.38-1.39,0.38 c-0.92,0-1.83-0.47-2.34-1.32c-0.13-0.22-3.12-4.96-9.69-4.96C35.07,49.49,32.1,54.24,31.96,54.45z" style="fill:#2F2F2F;"/>
    <path d="M100,55.39c-0.43,0.26-0.91,0.38-1.37,0.38c-0.94,0-1.85-0.49-2.36-1.34 c-0.11-0.2-3.08-4.94-9.66-4.94c-6.69,0-9.66,4.89-9.69,4.94c-0.77,1.29-2.43,1.73-3.73,0.96c-1.29-0.76-1.73-2.44-0.96-3.73 c0.18-0.31,4.6-7.62,14.38-7.62c9.77,0,14.18,7.31,14.36,7.62C101.73,52.96,101.29,54.63,100,55.39z" style="fill:#2F2F2F;"/>
    </svg>
</body>

参考

• SVG 入门指南(看完,对SVG结构不在陌生)
• Why You Should Use SVG Images

本文正在参与「掘金小册免费学啦！」活动, 点击查看活动详情