什么是 SVG 文件？

SVG 文件是一个标量矢量图形文件，它使用基于 XML 的文本格式来描述图像的外观。 Scalable 这个词指的是 SVG 可以缩放到不同的大小而不会损失任何质量。此类文件的基于文本的描述使它们独立于分辨率。它是构建网站和打印图形以实现可扩展性的最常用格式之一。该格式只能用于二维图形。 SVG 文件可以在几乎所有现代浏览器中查看/打开，包括 Chrome、Internet Explorer、Firefox 和 Safari。

历史简介 ＃＃

SVG 规范自 1999 年起由万维网联盟 (W3C) 作为开放标准提供。在此之前，直到 1998 年，六种不同格式的类似文件格式规范已提交给 W3C。2011 年对规范进行了更新，版本为 1.1 . 2016 年，SVG 2 作为更新版本发布，其中包括 SVG 1.1 中的功能之外的功能。

文件格式规范##

SVG 文档对象模型 (DOM) 为与规范的特定部分相对应的所有规范和接口奠定了基础。 SVG 查看器必须实现整个 W3C 规范中定义的 SVG DOM 接口。它的 DOM 为不同的数据类型和元素公开了几个接口。

SVG 形状

SVG 有一些预定义的形状元素可供开发人员使用：

  • 长方形
  • 圆圈
  • 椭圆
  • 线
  • 折线
  • 多边形
  • 小路

基于这些形状和规格，SVG 的功能区域如下。

路径 - 路径用于表示简单和复合形状轮廓。编码用于定义操作的性质。例如，M 用于 Move To，L 用于 Line To，Z 用于关闭路径等等。

基本形状 - 可以绘制直线路径和由一系列连接的直线段（折线）组成的路径，以及封闭的多边形、圆形和椭圆形。矩形和圆角矩形也是标准元素。

文本 - 文本表示表示为 XML 字符数据，其中许多视觉效果可以应用于文本。该规范允许沿弯曲路径处理双向文本、垂直文本和字符。

绘画 - 可以用颜色、渐变或图案填充和/或勾勒形状，使其能够使其不透明或具有任何程度的透明度。出现在多边形顶点处的箭头或符号等线端特征由标记表示。

颜色 - SVG 规范允许直接或通过填充、描边和其他属性将颜色应用于所有可见的 SVG 元素。不同的颜色编码可用于指定黑色或蓝色、十六进制表示、十进制或 RGB 形式的百分比。

渐变和图案 - SVG 文件中的形状可以用纯色、渐变或重复图案填充或勾勒。

滤镜效果 - 它实际上是一系列图形操作，应用于给定的源矢量图形以产生修改后的结果。

交互性 - 用户可以通过更改焦点、鼠标点击、滚动或缩放图像来与 SVG 文件交互。如前所述，交互性让 SVG 图像以许多不同的方式与用户交互。

链接 - SVG 图像可能具有指向其他文档的超链接。这是通过 XML 链接语言或 XLink 实现的。这允许创建用于放大/缩小特定区域或将视图限制到特定元素的特定视图状态。

脚本 - 与 HTML 类似，SVG 文档的所有方面都可以使用脚本进行操作。 SVG DOM 对象提供了使用 SVG 元素和属性实现此目的的指南。脚本包含在“脚本"标签元素中，可以根据需要响应指针、键盘或文档事件而运行。

动画 - DOM 元素,和允许您包含 SVG 内容的动画。当然，如果不使用脚本和内置计时器，这是无法实现的。这些动画可以是连续的，可以循环播放和重复播放，同时响应用户事件。

字体 - SVG 中的文本可以引用外部字体文件，例如系统字体。如果没有此类字体，SVG 中的文本将不会呈现到输出中。这可以通过在这样的文件中合并所需的字形作为字体来克服，然后使用元素。

例子 ＃＃

以下几行显示了如何使用 SVG 脚本来表示圆。

<html>
<body>

<h1>My first SVG</h1>

<svg width#"100" height#"100">
  <circle cx#"50" cy#"50" r#"40" stroke#"green" stroke-width#"4" fill#"yellow" />
</svg>

</body>
</html>

以下代码行显示了如何使用用于将文本呈现为 SVG 的块。

<svg height#"30" width#"200">
  <text x#"0" y#"15" fill#"red">I love SVG!</text>
</svg>

参考 ＃＃

See Also