svg

svg: scalable vector graphics，可缩放的矢量图

1. 该图片使用代码书写而成
2. 缩放不会失真
3. 内容轻量

SVG是一种XML语言，类似 XHTML，可以用来绘制矢量图形。SVG 可以通过定义必要的线和形状来创建一个图形，也可以修改已有的位图，或者将这两种方式结合起来创建图形。图形和其组成部分可以形变（be transformed）、合成、或者通过滤镜完全改变外观。

1. 怎么使用

svg可以嵌入浏览器，也可以单独成为一个文件。

1.直接嵌入：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" class="icon" p-id="2056" style="" t="1558689414500" version="1.1" viewBox="0 0 1024 1024">
<defs>
    <style type="text/css" />
    defs>
    <path fill="#34950e" d="M236.24 323.769c0 24.005 19.32 43.325 43.325 43.325s43.326-19.32 43.326-43.325c0-24.005-19.321-43.325-43.326-43.325-24.004 0-43.325 19.32-43.325 43.325z m336.064 223.067c0 18.735 15.223 33.958 33.958 33.958s33.958-15.223 33.958-33.958-15.223-33.958-33.958-33.958-33.958 15.223-33.958 33.958zM456.38 323.769c0 24.005 19.32 43.325 43.325 43.325 24.005 0 43.325-19.32 43.325-43.325 0-24.005-19.32-43.325-43.325-43.325-24.005 0-43.325 19.32-43.325 43.325z" p-id="2057"/>
    <path fill="#34950e" d="M858.017 0H165.983C74.648 0 0.293 74.356 0.293 166.276v690.863c0 91.92 74.355 166.276 165.69 166.276h692.034c91.335 0 165.69-74.356 165.69-166.276V166.276C1023.707 74.94 949.352 0 858.017 0zM384.366 686.18c-38.642 0-69.672-8.197-108.899-15.808L167.154 724.82l31.03-93.09C120.316 577.28 74.063 507.022 74.063 422.128c0-147.54 139.929-264.05 310.303-264.05 152.81 0 286.298 93.09 313.23 217.798a255.341 255.341 0 0 0-29.859-1.757c-147.54 0-264.05 110.07-264.05 245.315 0 22.834 3.513 44.496 9.367 64.988-9.367 1.171-18.735 1.757-28.688 1.757z m457.843 108.313l23.42 77.283-84.895-46.838c-31.03 7.61-62.06 15.808-93.09 15.808-147.541 0-264.051-100.703-264.051-225.41 0-124.12 116.51-225.408 264.05-225.408 139.344 0 263.465 101.288 263.465 225.409-0.585 70.843-46.838 132.903-108.899 179.156z" p-id="2058"/>
    <path fill="#34950e" d="M741.507 546.836c0 18.735 15.223 33.958 33.958 33.958s33.958-15.223 33.958-33.958-15.223-33.958-33.958-33.958c-19.32 0-33.958 15.223-33.958 33.958z" p-id="2059"/>
svg>
1
2
3
4
5
6
7
8

单独保存一个文件，再在html文件中引入：

• img元素：

• embed元素：

• object元素：

• iframe元素：

• 背景图：
  html:

  
  css:p{background: url("imgs/weixin.svg") no-repeat center/cover;}

xml语言，svg使用该语言定义

2. 书写svg代码

HTML 提供了定义标题、段落、表格等等内容的元素。与此类似，SVG 也提供了一些元素，用于定义圆形、矩形、简单或复杂的曲线。一个简单的 SVG 文档由根元素和基本的形状元素构成。另外还有一个g元素，它用来把若干个基本形状编成一个组。

新建一个.svg文件，添加根元素，

基于XML语言的特点，SVG书写时需要注意：

• SVG 的元素和属性必须按标准格式书写，因为 XML 是区分大小写的（这一点和 HTML 不同）;
• SVG 里的属性值必须用引号引起来，就算是数值也必须这样做。

在svg根元素中，可以定义svg的初始大小（width/height）（注意数值没有单位），也可以使用style设置CSS样式。

<svg style="background:#ccc;" width="500" height="1000" xmlns="http://www.w3.org/2000/svg">
svg>
1
2

其中xmlns是SVG的命名空间。

2.1 矩形: rect

• 宽高依然可以使用width/height来设置，数值是没有单位的。

• 填充颜色可以使用fill来设置，颜色的取值同CSS。

• 边框（描边）可以使用strock来设置边框颜色，strock-width来设置边框宽度。

• 矩形位置可以通过x/y来调节，x表示矩形左上角离根元素svg的左上角的水平距离，y表示矩形左上角距离svg元素左上角的垂直距离。

• rx和ry分别表示圆角的x/y方位的半径。

<svg style="background: #ccc;" width="600" height="400" xmlns="http://www.w3.org/2000/svg">
    <rect width="100" height="100" x="50" y="50" rx="10" ry="20" fill="#f40" stroke="#008c8c" stroke-width="20"/>
svg>
1
2
3

2.2 圆形：circle

• r：圆的半径；
• cx：圆心的x位置；
• cy：圆心的y位置。

<svg style="background: #ccc;" width="600" height="400" xmlns="http://www.w3.org/2000/svg">
    <rect width="100" height="100" x="50" y="50" rx="10" ry="20" fill="#f40" stroke="#008c8c" stroke-width="2"/>
    <circle r="50" cx="100" cy="100" fill="#444" stroke="#fff"/>
svg>
1
2
3
4

2.3 椭圆：ellipse

• rx：椭圆的 x 半径；

• ry：椭圆的 y 半径；

• cx：椭圆中心的 x 位置；

• cy：椭圆中心的 y 位置。

<svg style="background: #ccc;" width="600" height="400" xmlns="http://www.w3.org/2000/svg">
    <ellipse rx="50" ry="100" cx="200" cy="200" fill="#e6e6e6"/>
svg>
1
2
3

2.4 线条：line

• x1：起点的 x 位置；
• y1：起点的 y 位置；
• x2：终点的 x 位置；
• y2：终点的 y 位置。

<svg style="background: #ccc;" width="600" height="400" xmlns="http://www.w3.org/2000/svg">
    <line x1="50" y1="50" x2="300" y2="300" stroke="#000" stroke-width="3"/>
svg>
1
2
3

2.5 折线：polyline

Polyline是一组连接在一起的直线。因为它可以有很多的点，折线的的所有点位置都放在一个 points 属性中。

points：里面写入所要连接的点的坐标，数字之间用逗号或空格隔开。

点集数列。每个数字用空白、逗号、终止命令符或者换行符分隔开。每个点必须包含 2 个数字，一个是 x 坐标，一个是 y 坐标。所以点列表 (0,0), (1,1) 和 (2,2) 可以写成这样：“0 0, 1 1, 2 2”。

默认会自动将points的首尾相连，并自动填充。

<svg style="background: #ccc;" width="600" height="400" xmlns="http://www.w3.org/2000/svg">
    <polyline points="50 50, 100 50, 100 100, 50 100" fill="none" stroke="#000" stroke-width="2"/>
svg>
1
2
3

2.6 多边形：polygon

polygon和折线很像，它们都是由连接一组点集的直线构成。不同的是，polygon的路径在最后一个点处自动回到第一个点。

<svg style="background: #ccc;" width="600" height="400" xmlns="http://www.w3.org/2000/svg">
    <polygon points="50 50, 100 50, 100 100, 50 100" fill="none" stroke="#000" stroke-width="2"/>
svg>
1
2
3

2.7 路径：path

• M(moveto)
  移动画笔，但不画线。一般M命令出现在路径的开始处，用来指明从何处开始画；

• L(lineto)
  在当前位置和新位置之间画一条线段；

<svg style="background: #ccc;" width="600" height="400" xmlns="http://www.w3.org/2000/svg">
    <path d="M100 100 L150 100 L150 180 Z" fill="none" stroke="#000" stroke-width="3"/>
svg>
1
2
3

• H(horizontal lineto)
  绘制水平线，只带一个参数，标明x轴移动到的位置；
• V(vertical lineto)
  绘制垂直线，只带一个参数，标明y轴移动到的位置；

<svg style="background: #ccc;" width="600" height="400" xmlns="http://www.w3.org/2000/svg">
    <path d="M100 100 H300 V200" fill="none" stroke="#000" stroke-width="3"/>
svg>
1
2
3

• C(curveto)
  贝塞尔曲线，
• S(smooth curveto)
• Q(quadratic Belzier curve)
• T(smooth quadratic Belzier curveto)
• A(elliptical Arc)
  参数：半径1、半径2、顺时针旋转角度、小弧（0）或大弧（1）、顺时针（1）逆时针（0）、终点坐标。

<svg style="background: #ccc;" width="600" height="400" xmlns="http://www.w3.org/2000/svg">
    <path d="M300 300 A200 200 0 0 0 500 100" fill="none" stroke="#000" stroke-width="3"/>
svg>
1
2
3

• Z(closepath)
  闭合路径

3. 例子

画太极图

<svg style="background: #ccc;" width="600" height="400" xmlns="http://www.w3.org/2000/svg">
    <path d="M300 50 A75 75 0 0 1 300 200 A75 75 0 0 0 300 350 A150 150 0 0 1 300 50" fill="#000" />
    <path d="M300 50 A75 75 0 0 1 300 200 A75 75 0 0 0 300 350 A150 150 0 0 0 300 50" fill="#fff" />
    <circle r="30" cx="300" cy="125" fill="#fff" />
    <circle r="30" cx="300" cy="275" fill="#000" />
svg>
1
2
3
4
5
6