html5 内联 svg
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 页面中：
实例
<!doctype html> <html> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190"> <polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"> </svg> </body> </html>
抱歉, 你的浏览器不支持内联svg.
svg 与 canvas两者间的区别
svg 是一种使用 xml 描述 2d 图形的语言。
canvas 通过 javascript 来绘制 2d 图形。
svg 基于 xml，这意味着 svg dom 中的每个元素都是可用的。您可以为某个元素附加 javascript 事件处理器。
在 svg 中，每个被绘制的图形均被视为对象。如果 svg 对象的属性发生变化，那么浏览器能够自动重现图形。
canvas 是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。
canvas 与 svg 的比较
下表列出了 canvas 与 svg 之间的一些不同之处。
|
|
【说明】：本文章由站长整理发布，文章内容不代表本站观点，如文中有侵权行为，请与本站客服联系(QQ:254677821)！