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用户：点击这里）

​

​

渲染过程涉及以下内容：

1. 我们从svg根元素开始：
   • 从（X）HTML中已知的doctype声明应该被关闭，因为基于DTD的SVG验证导致比解决更多的问题
   • 为其他类型的验证标识SVG的版本，应始终使用version和baseProfile属性
   • 作为XML方言，SVG必须始终正确绑定名称空间（在xmlns属性中）。有关更多信息，请参见命名空间崩溃课程页面。

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

3. <circle/>在红色矩形的中心上方绘制一个半径为80像素的绿色圆圈（向内偏移30 + 120像素，向上偏移50 + 50像素）。

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

SVG文件的基本属性

• 首先要注意的是元素渲染的顺序。SVG文件的全局有效规则是，后面的元素在之前的元素上面被渲染。元素越远越可见。
• 网络上的SVG文件可以直接在浏览器中显示或通过多种方法嵌入到HTML文件中：
  • 如果HTML是XHTML并按类型提供application/xhtml+xml，则SVG可以直接嵌入到XML源中。
  • 如果HTML是HTML5，并且浏览器是符合HTML5的浏览器，则SVG也可以直接嵌入。但是，可能会出现符合HTML5规范的语法更改
  • SVG文件可以用一个object元素引用：<object data =“image.svg”type =“image / svg + xml”/>

- 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文件在用于某些应用程序（如地理应用程序）时可能会达到大规模的大小，因此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很可能会将文件标记为文本或编码垃圾，或者甚至要求观众选择一个应用程序来打开它们。