最高效的WEB程序员学习网站
SVG手册 HTML5手册
 

SVG和HTML5


在HTML5里,我们可以直接在html网页里嵌入/使用SVG。


在HTML网页里直接嵌入SVG

下面是一个简单的SVG图片例子:

它使用的代码是:

实例

<!DOCTYPE html>
<html>
<body><h1>My first SVG</h1><svg width="100" height="100">
<circle cx="50" cy="50" r="40"
stroke="green" stroke-width="4" fill="yellow"
/>
</svg>

</body>
</html>

SVG代码说明:

  • SVG图片用<svg>标记定义
  • <svg>元素里提供了“width”和“height”两个属性来定义SVG图片的高度和宽度
  • <circle>元素的功能是画出一个圆
  • cxcy两个属性分别定义了圆心的x坐标和y坐标。如果没有提供cxcy的值,那么,缺省圆心是(0, 0)
  • r属性定义了圆的半径长度
  • strokestroke-width两个属性用来定义图像的边框样子。上面例子中定义圆的边框颜色为green,边框粗细为4px
  • fill属性定义了圆内部填充的颜色。我们可以看出,例子中填充了黄色。

注意:因为SVG是XML格式的,所以,所有元素标记必须正确的闭合。


SVG简介


w3svg

SVG 是英文 Scalable Vector Graphics 的缩写,意为可缩放矢量图。

SVG 是用XML格式定义的矢量图。


本教程中将要使用的代码例子

<html>
<body>

<h1>我的第一个SVG程序</h1>

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

</body>
</html>

SVG是什么?

  • SVG 表示可缩放矢量图
  • SVG 用来定义WEB上使用的矢量图
  • SVG 用XML格式定义矢量图
  • SVG 在缩放时不会损失任何的图片质量
  • SVG 文件里的所有元素和属性都可以运用动画效果
  • SVG 是W3C推荐的
  • SVG 集成了其它W3C标准,比如 DOM 和 XSL

SVG 是W3C推荐的标准格式

  • SVG 1.0 诞生于2001年9月4日

SVG 的优势

相比起其它图片格式(比如JPEG和GIF),SVG的优势有:

  • SVG 图片可以使用文本编辑器创建和编辑
  • SVG 图片能够实现内容搜索,索引,脚本控制和压缩
  • SVG 图片是可缩放的
  • SVG 图片可以以任意高分辨率打印
  • SVG 图片的缩放显示是无损的
  • SVG 是开放标准
  • SVG 文件是纯XML的

SVG的最大竞争者是Flash。

SVG的优势体现在,它兼容了其它标准(比如,XSL和DOM)。Flash是具有专利的技术,不开源。


创建 SVG 图片

SVG 图片可以使用任何文本编辑器创建,但更高效的还是一些专业绘图软件,比如 Inkscape.