svg 介绍

简介

svg 是『矢量图』，相比于『位图』，矢量图的特点是不会随着图片放大而失真，能做到这一点，主要是由于矢量图存储的内容是对『图形的描述』
svg 适合描述一些简单的图形

起步

下面来画第一个图形

<svg>
  <circle cx="50" cy="50" r="50" stroke="#DF3D82" stroke-width="2" fill="#2E9AFE"/>
</svg>

svg {
  background: lightblue;
  width: 100px;
  height: 100px;
}

圆

svg 可以当做普通的 HTML 标签放在页面中，svg 标签的作用有点像 canvas，充当绘制图形的画布。如果绘制的图形超出了画图，则会被截断。
svg 提供一些标签来表达常用的基本图形，如 <circle/> <rect/> <ellipse/> <line/> <polygon/> <polyline/> <path/>，分别对应圆、矩形、椭圆、线段、多边形、多段线、路径。
表达图形的具体属性不作介绍，请自行查阅资料。
有些属性可以放在CSS中：

circle {
  fill: #2E9AFE;
  stroke: #DF3D82;
  stroke-width: 2px;
  r: 50px;
  cx: 50px;
  cy: 50px;
}

有些则只能写在标签里，如下：

<svg><line x1="0" y1="0" x2="100" y2="100"/></svg>

<svg><polygon points="0,0 75,25 50,50 75,50"/></svg>

<svg><polyline points="0,0 30,70 70,20"/></svg>

<svg><path d="M50 0 L15 70 L70 70"/></svg>

再画一些别的图形

• 矩形

<svg><rect/></svg>

rect {
  width: 100px;
  height: 50px;
  x: 0;
  y: 0;
  rx: 10;
  ry: 10;
  fill: lightcoral;
  fill-opacity: .5;
}

• 椭圆

<svg><ellipse/></svg>

ellipse {
  cx: 50;
  cy: 50;
  rx: 50;
  ry: 30;
  fill: lightgoldenrodyellow;
}

• 线段

<svg><line x1="0" y1="0" x2="100" y2="100"/></svg>

line {
  stroke: #2E9AFE;
  stroke-width: 2px;
}

• 多边形

<svg><polygon points="0,0 75,25 50,50 75,50"/></svg>

polygon {
  fill: lightgreen;
  stroke: #2E9AFE;
  fill-rule: nonzero;
}

• 多段线

<svg><polyline points="0,0 30,70 70,20"/></svg>

polyline {
  stroke: #2E9AFE;
  fill: none;
}

• 路径

<svg><path d="M 50 0 L 15 70 L 70 70"/></svg>

path {
  stroke: blueviolet;
  stroke-width: 4px;
  fill: none;
}

path 是一个更强大的 API，可以画出上面几种基本图形，还可以画出表现力更强的曲线。上面的几个标签的优势是使用方便。

• 文本

<svg><text x="0" y="20">天气很冷</text></svg>

text {
  fill: lightcoral;
  writing-mode: tb;
}

letter-spacing 可以调整字符间距，还有很多其它的属性。

其它

有一些东西没有提到，比如 transform 变换：包括旋转、平移、缩放等，你可以自行去了解。
上文中的示例：链接

参考链接

SVG教程 | MDN
SVG 教程 | 菜鸟教程