入门

让我们直接从一个简单的例子开始。查看以下代码。

<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 的文件中。然后在浏览器中打开该文件。它将按以下截图所示进行渲染。（Firefox 用户：点击 这里）

渲染过程涉及以下步骤

1. 我们从 <svg> 根元素开始
   • 应省略 (X)HTML 中已知的文档类型声明，因为基于 DTD 的 SVG 验证会导致比解决问题更多的问题。
   • 在 SVG 2 之前，为了识别其他类型验证的 SVG 版本，应该始终使用 version 和 baseProfile 属性。version 和 baseProfile 属性在 SVG 2 中已被弃用。
   • 作为 XML 语言，SVG 必须始终正确绑定命名空间（在 xmlns 属性中）。有关更多信息，请参见 命名空间速成课程 页面。
2. 通过绘制一个覆盖整个图像区域的矩形 <rect>，将背景设置为红色。
3. 在红色矩形中心（圆心向右偏移 150 像素，向下偏移 100 像素，从左上角算起）绘制一个半径为 80 像素的绿色圆形 <circle>。
4. 绘制文本“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>
    

  • 最后，可以使用 JavaScript 动态创建 SVG 并将其注入到 HTML DOM 中。
• SVG 如何处理大小和单位将在 下一页 中解释。

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

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

现在您已经了解了如何创建基本的 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 等网站检查您的服务器是否正在使用您的 SVG 文件发送正确的 HTTP 标头。提交您其中一个 SVG 文件的 URL，然后查看 HTTP 响应标头。如果您发现您的服务器没有以给定值发送标头，那么您应该联系您的 Web 主机。如果您无法说服他们正确配置他们的服务器以使用 SVG，那么您可能可以自己进行配置。有关一系列简单的解决方案，请参阅 w3.org 上的 服务器配置页面。

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

• « 上一页
• 下一页 »