入门

一个基本示例

让我们通过一个示例直接开始。看看下面的代码。

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

  <rect width="100%" height="100%" fill="red" />

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

  <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>

</svg>

复制代码并粘贴到一个名为 demo1.svg 的文件中。然后，在浏览器中打开该文件。它将按以下屏幕截图所示进行渲染。（或者 在线查看）

渲染过程包括以下步骤：

1. 我们从 <svg> 根元素开始。

   • 应省略 DTD 声明，就像 (X)HTML 中已知的那样，因为基于 DTD 的 SVG 验证会带来比解决更多问题。
   • 在 SVG 2 之前，为了识别 SVG 的版本以进行其他类型的验证，应始终使用 version 和 baseProfile 属性。在 SVG 2 中，version 和 baseProfile 属性均已弃用。
   • 作为 XML 方言，SVG 必须始终正确绑定命名空间（在 xmlns 属性中）。有关更多信息，请参阅 命名空间速成课程页面。

2. 通过绘制一个覆盖整个图像区域的矩形 <rect> 来将背景设置为红色。

3. 在红色矩形中心上方绘制一个半径为 80px 的绿色圆 <circle>（圆心从左上角偏移 150px 向右，向下偏移 100px）。

4. 绘制文本“SVG”。每个字母的内部都填充白色。通过设置一个锚点来定位文本，我们将中点设置在那里：在这种情况下，中点应对应于绿色圆的中心。可以通过调整字体大小和垂直位置来确保最终结果美观。

SVG 文件的基本属性

• 首先需要注意的重要一点是渲染元素的顺序。SVG 文件的全局有效规则是：*后面的*元素渲染在*前面*元素的*上方*。元素越靠下，它就越可见。

• Web 上的 SVG 文件可以直接在浏览器中显示，或通过多种方法嵌入到 HTML 文件中：

  • 如果 HTML 是 XHTML 并且以 application/xhtml+xml 类型提供，则 SVG 可以直接嵌入到 XML 源中。

  • SVG 也可以直接嵌入到 HTML 中。

  • 可以使用 img 元素。

  • 可以通过 object 元素引用 SVG 文件。

    html

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

  • 同样，可以使用 iframe 元素。

    html

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

  • 最后，SVG 可以通过 JavaScript 动态创建并注入到 HTML DOM 中。

• SVG 如何处理大小和单位将在 下一页中进行解释。

SVG 文件类型

SVG 文件有两种格式。普通的 SVG 文件是包含 SVG 标记的文本文件。这些文件的推荐文件扩展名为“.svg”（全部小写）。

由于 SVG 文件在某些应用（例如地理应用）中可能会非常大，因此 SVG 规范也允许使用 gzip 压缩的 SVG 文件。这些文件的推荐文件扩展名为“.svgz”（全部小写）。不幸的是，当从 Microsoft IIS 服务器提供时，让 gzip 压缩的 SVG 文件在所有支持 SVG 的用户代理中可靠运行非常困难，并且 Firefox 无法从本地计算机加载 gzip 压缩的 SVG。避免使用 gzip 压缩的 SVG，除非您要发布到您知道会正确提供它的 Web 服务器（见下文）。

关于 .svgz 文件的 Web 服务器说明

现在您对如何创建基本的 SVG 文件有了初步了解，下一步是将它们上传到 Web 服务器。不过，在此阶段会遇到一些棘手的问题。对于普通的 SVG 文件，服务器应发送 HTTP 标头：

Content-Type: image/svg+xml
Vary: Accept-Encoding

对于 gzip 压缩的 SVG 文件，服务器应发送 HTTP 标头：

Content-Type: image/svg+xml
Content-Encoding: gzip
Vary: Accept-Encoding

您可以使用 网络监视器面板或像 websniffer.com 这样的网站来检查您的服务器是否正在发送正确的 HTTP 标头以及您的 SVG 文件。提交其中一个 SVG 文件的 URL，然后查看 HTTP 响应标头。如果您发现您的服务器没有发送具有上述值的标头，那么您应该联系您的 Web 主机。如果您在说服他们正确配置服务器以支持 SVG 方面遇到困难，则可能有办法自行解决。请参阅 w3.org 上的 服务器配置页面，了解一系列解决方案。

服务器配置不正确是 SVG 无法加载的非常常见的原因，因此请务必检查您的配置。如果您的服务器未配置为发送正确的标头以及它提供的 SVG 文件，那么 Firefox 最有可能将文件的标记显示为文本或乱码，甚至要求查看者选择一个应用程序来打开它们。

• 上一页
• 下一页