福州-司马懿
福州-司马懿

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

SVG简介

SVG 意为可缩放矢量图形（Scalable Vector Graphics）。
SVG 使用 XML 格式定义图像。

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

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

一个简单的SVG实例




<svg xmlns="http://www.w3.org/2000/svg" width="130" height="80" version="1.1">
    <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="rgb(0,100,255)" stroke-opacity="0.5" fill-opacity="0.5" />
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 xmlns="http://www.w3.org/2000/svg">
    <rect width="300" height="100" style="fill:red;stroke-width:1;stroke:black"/>
svg>

SVG可以嵌入HTML中显示

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