HTML SVG 图形

SVG（可缩放矢量图形）

SVG 在 XML 中定义基于矢量的图形，可以直接嵌入 HTML 页面。

SVG 图形是可缩放的，放大或调整大小时不会损失任何质量：

所有主流浏览器都支持 SVG。

什么是 SVG？

SVG 代表可缩放矢量图形
SVG 用于为 Web 定义基于矢量的图形
SVG 以 XML 格式定义图形
SVG 文件中的每个元素和属性都可以进行动画处理
SVG 是 W3C 推荐标准
SVG 与其他标准（如 CSS、DOM、XSL 和 JavaScript）集成

<svg> 元素

HTML <svg> 元素是 SVG 图形的容器。

SVG 有多种方法用于绘制路径、矩形、圆形、多边形、文本等等。

SVG 圆形

实例

<!DOCTYPE html>
<html>
<body>

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

</body>
</html>

亲自试一试

SVG 矩形

实例

<svg width="400" height="120">
  <rect x="10" y="10" width="200" height="100" stroke="red" stroke-width="6" fill="blue" />
</svg>

亲自试一试

SVG 矩形（带不透明度和圆角）

实例

<svg width="400" height="180">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150"
  style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>

亲自试一试

SVG 星形

实例

<svg width="300" height="200">
  <polygon points="100,10 40,198 190,78 10,78 160,198"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>

亲自试一试

SVG 渐变椭圆和文本

实例

<svg height="130" width="500">
  <defs>
    <linearGradient id="grad1">
      <stop offset="0%" stop-color="yellow" />
      <stop offset="100%" stop-color="red" />
    </linearGradient>
  </defs>
  <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
  <text fill="#ffffff" font-size="45" font-family="Verdana" x="50" y="86">SVG</text>
  抱歉，您的浏览器不支持内联 SVG。
</svg>

亲自试一试

SVG 与 Canvas 的区别

SVG 是一种用于在 XML 中描述 2D 图形的语言，而 Canvas 则通过 JavaScript 动态绘制 2D 图形。

SVG 基于 XML，这意味着 SVG DOM 中每个元素都是可用的。您可以将 JavaScript 事件处理程序附加到 SVG 图形上。

在 SVG 中，每个绘制的形状都被记忆为一个对象。如果 SVG 对象的属性发生更改，浏览器可以自动重新渲染该形状。

Canvas 是逐像素渲染的。在 Canvas 中，一旦图形绘制完成，浏览器就会忘记它。如果需要更改其位置，则整个场景（包括可能被该图形覆盖的任何对象）都需要重新绘制。

SVG 与 Canvas 的比较

下表显示了 Canvas 和 SVG 之间的一些重要区别：

SVG	Canvas
分辨率无关支持事件处理程序良好的文本渲染能力复杂图形渲染较慢不适合游戏应用	分辨率相关不支持事件处理程序文本渲染能力较差可以将结果图像保存为 .png 或 .jpg 格式非常适合图形密集型游戏

SVG 教程

如需学习有关 SVG 的更多知识，请访问我们的 SVG 教程。