浅唱SVG历史、优势和基本标签

jekyll.jpg

历史

在 2003 年一月，SVG 1.1 被确立为 W3C 标准。
参与定义 SVG 的组织有：太阳微系统、Adobe、苹果公司、IBM 以及柯达。

优势

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

与 Flash 相比，SVG 最大的优势是与其他标准（比如 XSL 和 DOM）相兼容。而 Flash 则是未开源的私有技术。

实例

下面的例子是一个简单的 SVG 文件的例子。SVG 文件必须使用 .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 元素。
• SVG 代码以
• SVG 的 用来创建一个圆。cx 和 cy 属性定义圆中心的 x 和 y 坐标。如果忽略这两个属性，那么圆点会被设置为 (0, 0)。r 属性定义圆的半径。
• stroke 和 stroke-width 属性控制如何显示形状的轮廓。我们把圆的轮廓设置为 2px 宽，黑边框。
• fill 属性设置形状内的颜色。我们把填充颜色设置为红色。
• 关闭标签的作用是关闭 SVG 元素和文档本身。

注释：所有的开启标签必须有关闭标签！

HTML 页面中的 SVG

下面，你会看到三种把 SVG 文件嵌入 HTML 页面的不同方法。

使用 标签

标签被所有主流的浏览器支持，并允许使用脚本。

注释：当在 HTML 页面中嵌入 SVG 时使用 标签是 Adobe SVG Viewer 推荐的方法！然而，如果需要创建合法的 XHTML，就不能使用 。任何 HTML 规范中都没有 标签。

语法：

注释：pluginspage 属性指向下载插件的 URL。

使用