svg相关知识简介

在网页开发过程中，我们可能会用到一下图形化的操作，如构建一个2d模型或者3d模型，或实现一个画布等，此时我们可能会用到canvas或者svg这些前端图形操作的插件。那么svg和canvas的区别在于哪里呢？

canvas：

Canvas是HTML5新增的组件，它就像一块幕布，可以用JavaScript在上面绘制各种图表、动画等。

svg：

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用来定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
SVG 是万维网联盟的标准
SVG 与诸如 DOM和 XSL 之类的W3C标准是一个整体

svg的优点：

SVG 可被非常多的工具读取和修改（比如记事本）
SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。
SVG 是可伸缩的
SVG 图像可在任何的分辨率下被高质量地打印
SVG 可在图像质量不下降的情况下被放大
SVG 图像中的文本是可选的，同时也是可搜索的（很适合制作地图）
SVG 可以与 Java 技术一起运行
SVG 是开放的标准
SVG 文件是纯粹的 XML

下面的例子是一个简单的 SVG 文件的例子。SVG 文件必须使用 .svg 后缀来保存：

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
     xmlns="http://www.w3.org/2000/svg">

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

使用embed标签引入svg

当在 HTML 页面中嵌入 SVG 时使用 <embed> 标签是 Adobe SVG Viewer 推荐的方法！然而，如果需要创建合法的 XHTML，就不能使用

 <embed>。任何 HTML 规范中都没有 <embed> 标签。

<embed src="rect.svg" width="300" height="100"
       type="image/svg+xml"
       pluginspage="http://www.adobe.com/svg/viewer/install/" />

使用 <object> 标签引入svg
<object> 标签是 HTML 4 的标准标签，被所有较新的浏览器支持。它的缺点是不允许使用脚本。

<object data="rect.svg" width="300" height="100"
        type="image/svg+xml"
        codebase="http://www.adobe.com/svg/viewer/install/" />

使用 <iframe> 标签引入svg
<iframe> 标签可工作在大部分的浏览器中。

<iframe src="rect.svg" width="300" height="100">
</iframe>

SVG是一个XML文件，用于XML编程的两种模型DOM和SAX也适用于它。因为SVG是被设计用于互联网，所以通过Javascript和DOM访问它就是最重要的应用模式。通过Javascript和DOM可以动态地修改HTML，同样也可以在浏览器中动态地创建、修改和删除图片，svg并不是属于任何个体的专利，而是一个通过协作、共同开发的工业标准。