SVG 总概

上一节
下一节  

什么是SVG？

  • SVG，Scalable Vector Graphics（可缩放矢量图形），是一种用来绘制矢量图的XML基准的语言。
  • SVG是用来在网页上显示图形的
  • 作为矢量图，SVG图形不会损失质量，不管它们怎么被放大或变形。
  • SVG图像支持交互和动画
  • SVG是一个W3C标准
  • 其他图像格式例如画家光栅图像（RIFF）同样可以用SVG来画
  • SVG利用XSLT和DOM很好的嵌入到HTML中

SVG优点

  • 使用任何文本编辑器都可以创建和编辑SVG图像
  • 因为是XML基准，SVG图像是可查询、可索引的，并且可以转位和压缩。
  • SVG图像是高度可扩展的，因为它们从来不会失去质量，不管它们是如何缩小或调整。
  • 在任何分辨率下都有很好的打印质量
  • SVG是一种开放式标准

SVG缺点

  • SVG因为是文本格式，所以其体积大于二进制格式的光栅图像文件（RIFF）。
  • 一个很小的图像可能体积都很大。

SVG实例

如下XML片段能在网页浏览器上画出一个圆。

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

把SVG直接包含到HTML里去。

testSVG.html
<html>
<title>SVG图像</title>
<body>
<h1>SVG图像实例</h1>
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="red" stroke-width="2" fill="green" />
</svg>
</body>
</html>

输出

在Chrome浏览器上打开文件，你能用Chrome/Firefox/Opera或IE9+直接看到SVG图像而不用任何插件，在IE8里需要使用activeX控件才能看SVG图像。

SVG图像实例

SVG图像实例

SVG怎样插入到HTML里

  • <svg>标签是SVG图像的开始标识
  • <svg>标签的width和height属性定义SVG图像的宽度和高度
  • 在上例中，我们用一个<circle>标签来画一个圆。
  • cx和cy属性表示圆的中心，默认是(0,0)，r属性表示圆的半径。
  • 其他属性stroke和stroke-width控制圆的外线。
  • fill属性定义圆的填充颜色
  • </svg>标签表示SVG图像结束。
上一节
下一节