html5 内联 svg——迹忆客-ag捕鱼王app官网

html5 支持内联 svg。

什么是svg？

• svg 指可伸缩矢量图形 (scalable vector graphics)
• svg 用于定义用于网络的基于矢量的图形
• svg 使用 xml 格式定义图形
• svg 图像在放大或改变尺寸的情况下其图形质量不会有损失
• svg 是万维网联盟的标准

svg优势

与其他图像格式相比（比如 jpeg 和 gif），使用 svg 的优势在于：

• svg 图像可通过文本编辑器来创建和修改
• svg 图像可被搜索、索引、脚本化或压缩
• svg 是可伸缩的
• svg 图像可在任何的分辨率下被高质量地打印
• svg 可在图像质量不下降的情况下被放大

浏览器支持

internet explorer 9 , firefox, opera, chrome, 和 safari 支持内联svg。

把 svg 直接嵌入 html 页面

在 html5 中，您能够将 svg 元素直接嵌入 html 页面中：

示例

结果：

抱歉, 你的浏览器不支持内联svg.

学习更多关于 svg 教程, 请访问 svg 教程.

svg 与 canvas两者间的区别 svg 是一种使用 xml 描述 2d 图形的语言。

canvas 通过 javascript 来绘制 2d 图形。

svg 基于 xml，这意味着 svg dom 中的每个元素都是可用的。您可以为某个元素附加 javascript 事件处理器。

在 svg 中，每个被绘制的图形均被视为对象。如果 svg 对象的属性发生变化，那么浏览器能够自动重现图形。

canvas 是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

canvas 与 svg 的比较

下表列出了 canvas 与 svg 之间的一些不同之处。