SVG - 概述

SVG，可缩放矢量图形是一种基于 XML 的语言，用于定义基于矢量的图形。
SVG 旨在通过 Web 显示图像。
作为矢量图像，SVG 图像无论如何缩小或调整大小都不会降低质量。
SVG 图像支持交互性和动画。
SVG 是 W3C 标准。
其他图像格式（如光栅图像）也可以与 SVG 图像混合在一起。
SVG 与 HTML 的 XSLT 和 DOM 很好地集成在一起。

SVG 优点

使用任何文本编辑器创建和编辑 SVG 图像。
SVG 图像基于 XML，可搜索、可索引，并且可以编写脚本和压缩。
SVG 图像具有高度可扩展性，因为无论如何缩小或调整大小，它们都不会降低质量
在任何分辨率下都具有良好的打印质量
SVG 是一种开放标准

SVG缺点

与二进制格式的光栅图像相比，文本格式的大小更大。
即使对于小图像，尺寸也可以很大。

例

以下 XML 代码段可用于在 Web 浏览器中绘制一个圆圈。


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

将 SVG XML 直接嵌入到 HTML 页面中。

testSVG.htm


<html>
   <title>SVG Image</title>
   <body>
   
      <p>简单 SVG 图像</p>
      
      <svg width="100" height="100">
         <circle cx="50" cy="50" r="40" stroke="red" stroke-width="2" fill="green" />
      </svg>
   
   </body>
</html>

输出

在 Chrome Web 浏览器中打开 textSVG.htm。您可以使用 Chrome/Firefox/Opera 直接查看 SVG 图像，无需任何插件。在 Internet Explorer 中，需要 activeX 控件才能查看 SVG 图像。

简单 SVG 图像

SVG 如何与 HTML 集成

<svg> 元素表示 SVG 图像的开头。
<svg> 元素的 width 和 height 属性定义 SVG 图像的高度和宽度。
在上面的示例中，我们使用了 <circle> 元素来绘制一个圆。
cx 和 cy 属性表示圆心。默认值为（0,0）。r 属性表示圆的半径。
其他属性 stroke 和 stroke-width 控制圆的轮廓。
fill 属性定义圆的填充颜色。
Closing</svg> 标签表示 SVG 图像的结尾。

打印本页

SVG - 概述

什么是 SVG？

SVG 优点

SVG缺点

SVG 如何与 HTML 集成