什么是SVG？

• SVG，可伸缩矢量图形是一种基于XML的语言，用于定义基于矢量的图形。

• SVG旨在通过网络显示图像。

• SVG图像是矢量图像，无论如何缩放或调整大小都不会丢失质量。

• SVG图像支持交互性和动画。

• SVG是W3C标准。

• 光栅图像等其他图像格式也可以与SVG图像结合在一起。

• SVG与XSLT和HTML DOM很好地集成。

好处

• 使用任何文本编辑器来创建和编辑SVG图像。

• 基于XML的SVG图像可搜索，可索引并且可以编写脚本和压缩。

• SVG图像具有高度可伸缩性，因为无论缩放或调整大小，它们都不会丢失质量

• 在任何分辨率下均具有良好的打印质量

• SVG是开放标准

缺点

• 与文本格式的光栅图像相比，文本格式的尺寸要大。

• 即使是小图像，尺寸也可能很大。

例

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

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

testSVG.htm

   
   
      
Sample SVG Image
      
      
   
   

输出

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

SVG如何与HTML集成

• 在上面的示例中，我们使用了元素绘制一个圆。

• cx和cy属性表示圆心。默认值为（0,0）。 r属性表示圆的半径。

• 其他属性stroke和stroke-width控制圆的轮廓。

• fill属性定义圆的填充颜色。

• 关闭标签表示SVG图片的结尾。