SVG 入门及嵌入HTML的7种方式

网友投稿 908 2022-05-29

SVG简介

SVG 意为可缩放矢量图形（Scalable Vector Graphics）。

SVG 使用 XML 格式定义图像。

SVG与其他图像格式相比，SVG的优势在于

SVG 可被非常多的工具读取和修改（比如记事本）

SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。

SVG 是可伸缩的

SVG 图像可在任何的分辨率下被高质量地打印

SVG 可在图像质量不下降的情况下被放大

SVG 图像中的文本是可选的，同时也是可搜索的（很适合制作地图）

SVG 可以与 Java 技术一起运行

SVG 是开放的标准

SVG 文件是纯粹的 XML

一个简单的SVG实例

第一行包含了 XML 声明。请注意 standalone 属性！该属性规定此 SVG 文件是否是”独立的”，或含有对外部文件的引用。

standalone=”no” 意味着 SVG 文档会引用一个外部文件 - 在这里，是 DTD 文件。

第二行引用了这个外部的 SVG DTD。该 DTD 位于 “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd“。该 DTD 位于 W3C，含有所有允许的 SVG 元素（DTD，即文档类型定义，作用是定义 XML 文档的合法构建模块）

省略该行对显示并不会有影响。

SVG 代码以元素开始，包括开启标签和关闭标签。这是根元素。width 和 height 属性可设置此 SVG 文档的宽度和高度。version 属性可定义所使用的 SVG 版本，xmlns 属性可定义 SVG 命名空间。

使用SVG

SVG可以单独显示

完整版如上例所示

最简的SVG形式，除了“SVG标签”和“xmlns名空间”其他声明标签均可省略。

SVG可以嵌入HTML中显示

嵌入的方式有7种，分别是：

代码直接嵌入

链接方式引用

SVG 入门 及 嵌入HTML的7种方式