SVG

SVG

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

什么是 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 例子:

<svg version="1.1"
  baseProfile="full"
  width="300" height="200"
  xmlns="http://www.w3.org/2000/svg">

  <rect width="100%" height="100%" stroke="red" stroke-width="4" fill="yellow" />

  <circle cx="150" cy="100" r="80" fill="green" />

  <text x="150" y="115" font-size="16" text-anchor="middle" fill="white">web技术交流</text>

</svg>

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

SVG 的 <rect> 用来创建一个矩形,通过 fill 把背景颜色设为黄色。

SVG 的 <circle> 用来创建一个圆。cx 和 cy 属性定义圆中心的 x 和 y 坐标。如果忽略这两个属性,那么圆点会被设置为 (0, 0),r 属性定义圆的半径。 一个半径 80px 的绿色圆圈 <circle> 绘制在红色矩形的正中央 (向右偏移 150px,向下偏移 115px)。

stroke 和 stroke-width 属性控制如何显示形状的轮廓。我们把圆的轮廓设置为 4px 宽,红色边框。

fill 属性设置形状内的颜色。我们把填充颜色设置为红色。

关闭标签 </svg> 的作用是关闭 SVG 元素和文档本身。

SVG 在 HTML 页面

SVG 文件可通过以下标签嵌入 HTML 文档:<embed><object> 或者 <iframe>

SVG 的代码可以直接嵌入到 HTML 页面中,或您可以直接链接到 SVG 文件。

使用 <embed> 标签

  • 优势:所有主要浏览器都支持,并允许使用脚本
  • 缺点:不推荐在 HTML4 和 XHTML 中使用(但在 HTML5 允许)

<embed src="circle1.svg" type="image/svg+xml" />

使用 <object> 标签

  • 优势:所有主要浏览器都支持,并支持 HTML4,XHTML 和 HTML5 标准
  • 缺点:不允许使用脚本。

<object data="circle1.svg" type="image/svg+xml"></object>

使用 <iframe> 标签

  • 优势:所有主要浏览器都支持,并允许使用脚本
  • 缺点:不推荐在 HTML4 和 XHTML 中使用(但在 HTML5 允许)

<iframe src="circle1.svg"></iframe>

直接在 HTML 嵌入 SVG 代码

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
   <circle cx="100" cy="50" r="40" stroke="green" stroke-width="2" fill="blue" />
</svg>
SVG