svg教程：简介、优缺点、示例及与html集成

菜小编

2018-12-20

网页制作

SVG是一种以快速开发和高性能为目标来开发图形的Google XML格式语言。

它有以下特点 -

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

优点

SVG有以下优点 -

使用任何文本编辑器来创建和编辑SVG图像。
基于XML，SVG图像是可搜索的，可索引的，并且可以被脚本化和压缩。
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页面 - test-svg.html

<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/Firefox/Opera直接查看SVG图像，无需任何插件。在Internet Explorer中，需要使用activeX控件才能查看SVG图像。

SVG如何与HTML集成

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

THE END