Getting Started（入门）

入门

一个简单的例子

让我们直接看一个简单的例子。看看下面的代码。

<svg version="1.1"
     baseProfile="full"
     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中打开文件。它将呈现如下面的截图所示。（Firefox用户：点击这里）

渲染过程涉及以下内容：

我们从svg根元素开始：

SVG文件的基本属性

首先要注意的是元素渲染的顺序。SVG文件的全局有效规则是，后面的元素在之前的元素上面被渲染。元素越远越可见。

- Likewise an `iframe` element can be used:         <iframe src="image.svg"></iframe>

- An `img` element can be used theoretically, too. However this technique doesn't work in Firefox before 4.0.
- Finally SVG can be created dynamically with JavaScript and injected into the HTML DOM. With this method replacement technologies can be implemented for browsers which normally can't process SVG.

看看这篇深入研究这个话题的专业文章。

SVG文件类型

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

由于SVG文件在用于某些应用程序（如地理应用程序）时可能会达到大规模的大小，因此SVG规范还允许使用gzip压缩的SVG文件。这些文件的推荐文件扩展名是“.svgz”（全部小写）。不幸的是，当从微软IIS服务器提供服务时，让gzip压缩的SVG文件在所有支持SVG的用户代理中可靠地工作，并且Firefox无法从本地计算机加载gzip压缩的SVG，这是非常有问题的。避免使用gzip压缩的SVG，除非您发布到网络服务器，您知道它将正确地提供服务（请参阅下文）。

Webservers上的一个词

现在您已经了解如何创建基本的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

您可以使用网络监视器面板或网站（如web-sniffer.net）检查您的服务器是否使用SVG文件发送了正确的HTTP标头。提交其中一个SVG文件的URL并查看HTTP响应标头。如果你发现你的服务器没有发送上面给出的值，那么你应该联系你的Web主机。如果您在说服他们为SVG正确配置服务器时遇到问题，可能有办法自己做。请参阅w3.org上的服务器配置页面，了解一系列简单的解决方案。

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