SVG概述

什么是SVG？

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

优势

使用任何文本编辑器创建和编辑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>
   
      <h1>Sample SVG Image</h1>
      
      <svg width="100" height="100">
         <circle cx="50" cy="50" r="40" stroke="red" stroke-width="2" fill="green" />
      </svg>
   
   </body>
</html>

输出

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

SVG如何与HTML集成

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

打印页面

广告