svg矢量图标

一、介绍：是使用 XML来描述二维图形和绘图程序的语言，可缩放矢量图形。Internet Explorer9，火狐，谷歌Chrome，Opera和Safari都支持SVG。IE8和早期版本都需要一个插件 - 如Adobe SVG浏览器，这是免费提供的。

• SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
• SVG 用来定义用于网络的基于矢量的图形
• SVG 使用 XML 格式定义图形
• SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
• SVG 是万维网联盟的标准
• SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体

阿里svg网址：https://www.iconfont.cn/plus

二、svg属性：SVG 代码以 <svg> 元素开始，包括开启标签 <svg> 和关闭标签 </svg>。这是根元素。常用属性：

1、width ：宽度，数字或者百分比

2、height ：高度，数字或者百分比

3、version ：可定义所使用的 SVG 版本

4、xmlns ：可定义 SVG 命名空间。

三、语法：svg预定义的形状元素（标签）有：

 1、矩形 <rect>：<rect> 标签可用来创建矩形，以及矩形的变种。常用属性：

  （1） width 和 height ：可定义矩形的高度和宽度

  （2）x 、y属性：定义矩形的左侧位置、顶端位置（如，x="0" 表示矩形到浏览器窗口左侧的距离是 0px，y="0" 表示矩形到浏览器窗口顶端的距离是 0px），数字或者百分比

  （3）rx 和 ry 属性：可使矩形产生圆角。

  （4）style 属性：用来定义 CSS 属性，其中，

        1）fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值）

        2）stroke-width 属性定义边框的宽度

        3）stroke 属性定义边框的颜色

        4）fill-opacity ：定义填充颜色透明度（合法的范围是：0 - 1）

        5）stroke-opacity ：定义轮廓颜色的透明度（合法的范围是：0 - 1）

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect width="300" height="100" x="50" y="20"
  style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/>
</svg>

2、 圆形<circle> ：标签可用来创建一个圆。常见属性：

   （1）cx和cy：定义圆点的x和y坐标。如果省略cx和cy，圆的中心会被设置为(0, 0)

   （2）r：定义圆的半径

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle cx="100" cy="50" r="40" stroke="black"
  stroke-width="2" fill="red"/>
</svg>

3、椭圆<ellipse>

4、直线 <line>

5、多边形<polygon>

6、曲线<polyline>

7、路径<path>：<path> 元素用于定义一个路径。常用属性：

 （1）d：定义路径的，下面的命令可用于路径数据，均允许小写字母。大写表示绝对定位，小写表示相对定位：

       1）M = moveto

       2）L = lineto

       3）H = horizontal lineto

       4）V = vertical lineto

       5）C = curveto

       6）S = smooth curveto

       7）Q = quadratic Bézier curve

       8）T = smooth quadratic Bézier curveto

       9）A = elliptical Arc

      10）Z = closepath

       如开始于位置150 0，到达位置75 200，然后从那里开始到225 200，最后在150 0关闭路径：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <path d="M150 0 L75 200 L225 200 Z" />
</svg>

8、文本 <text>： 

四、使用方法：有三种方法：

1、方法1：直接使用svg代码；如：我从阿里矢量图官网https://www.iconfont.cn/复制的svg半圆，并插入自定义的文字（text标签中的内容）：

 <svg
      t="1612603582072"
      class="icon"
      viewBox="0 0 1024 1024"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      p-id="2958"
      width="100%"
      height="100%"
    >
      <path
        d="M804.5 835.4375L720.828125 728.5625c109.6875-105.46875 123.75-279.84375 27.421875-401.484375-103.359375-130.078125-291.796875-152.578125-421.875-49.921875s-151.875 291.796875-49.21875 421.875c9.140625 11.25 18.28125 21.796875 28.828125 31.640625l-83.671875 106.171875c-18.28125-16.171875-35.15625-34.453125-51.328125-54.140625C21.921875 594.265625 54.265625 320.046875 242.703125 171.6875S704.65625 54.96875 853.71875 243.40625c142.734375 180.703125 118.828125 439.453125-49.21875 592.03125z"
        fill="#F6C076"
        p-id="2959"
      ></path>
      <text x="50%" y="45%" font-size="150" style="fill: #555555"  text-anchor="middle" dominant-baseline="middle">
        <tspan font-weight="bold">{{label}}</tspan>
      </text>
       <text x="50%" y="65%" font-size="150" style="fill: #555555"  text-anchor="middle" dominant-baseline="middle">
        <tspan font-weight="bold">{{number}}{{isPercent ? '%':''}}</tspan>
      </text>
    </svg>

2、方法2：通过以下标签嵌入到 HTML 文档中：<embed>、<object> 或者 <iframe>

 （1）<embed> ：语法 <embed src="circle1.svg" type="image/svg+xml" />

• 优势：所有主要浏览器都支持，并允许使用脚本
• 缺点：不推荐在HTML4和XHTML中使用（但在HTML5允许）

（2）<object> ：语法 <object data="circle1.svg" type="image/svg+xml"></object>

• 优势：所有主要浏览器都支持，并支持HTML4，XHTML和HTML5标准
• 缺点：不允许使用脚本。

（3）<iframe>:语法 <iframe src="circle1.svg"></iframe>

• 优势：所有主要浏览器都支持，并允许使用脚本
• 缺点：不推荐在HTML4和XHTML中使用（但在HTML5允许）

3、链接到SVG文件：a标签，语法 <a href="circle1.svg">查看 SVG 文件</a>