此页面由 Cloud Translation API 翻译。

自适应网站上的启动画面矢量图形

Alex Danilo

若要制作出令人惊艳的移动内容，就需要在下载的数据量与最大视觉效果之间取得平衡。矢量图形是使用最少带宽即可呈现出令人惊艳的视觉效果的绝佳方式。

许多人认为，在 Web 上绘制矢量和光栅图形的混合图形的唯一方法是使用画布，但有一些替代方案具有一些优势。实现矢量绘图的绝佳方式是使用可缩放矢量图形 (SVG)，它是 HTML5 的关键组成部分。

我们都知道，自适应设计是处理不同屏幕尺寸的重要部分，而 SVG 非常适合轻松处理不同尺寸的屏幕。

SVG 非常适合呈现基于矢量的线条绘图，是位图的绝佳补充，后者更适合连续色调图片。

SVG 最实用的一个特性是它与分辨率无关，这意味着您无需考虑设备上的像素数，因为浏览器始终会对结果进行缩放和优化，使其看起来效果出色。

许多热门创作工具（例如 Google 云端硬盘中的绘图应用、Inkscape、Illustrator、Corel Draw 等）都可以生成 SVG，因此您可以通过多种方式生成内容。我们将深入探讨使用 SVG 素材资源的一些方法，以及一些优化提示，助您轻松上手。

扩缩基础知识

我们先从一个简单的场景开始 - 您希望将整页图片用作网页的背景。始终在后台全屏显示公司徽标或类似内容非常有用，但当然，在各种不同尺寸的屏幕上实现这一点非常困难。因此，为了说明这一点，我们先从简单的 HTML5 徽标开始。

下图显示了 HTML5 徽标，您可能已经猜到了，它最初是 SVG 文件。

点击该徽标，然后在任何新型浏览器中查看，您会发现它可以根据窗口大小进行精美缩放。尝试在您常用的浏览器中打开该图片，调整窗口大小，然后观察图片在任何放大倍率下是否清晰。如果我们尝试使用位图图片来实现此目的，则必须为我们可能会遇到的每种屏幕提供多种不同尺寸的图片，或者被迫忍受严重像素化的放大图片。

那有什么大不了的？如果您还没有注意到，这是唯一一种可独立于我们查看内容所用的设备进行缩放的格式。因此，我们只需向用户提供一个资源，而无需知道他们的屏幕或窗口尺寸 - 太棒了！

别急，还有更多好消息 - HTML5 徽标只有 1427 字节！天哪，它太小了，加载时几乎不会消耗任何移动流量，这意味着它可以快速加载，并且为用户提供低成本、快速的加载体验！

SVG 文件的另一个优点是，它们可以使用 GZIP 压缩来进一步缩减。以这种方式压缩 SVG 时，必须将文件扩展名更改为“.svgz”。以 HTML5 徽标为例，压缩后其大小仅缩减为 663 字节，而且大多数新型浏览器都能轻松处理！

注意： 请注意，某些浏览器可以正常加载 GZIP 文件，但无法通过 <img> 标记加载。幸运的是，HTTP 可以使用 GZIP 压缩，因此正确设置网络服务器可能是利用 GZIP 压缩的更好方法。

在一些最新设备上使用我们的示例文件时，我们发现使用压缩矢量数据可将性能提升 60 倍！另请注意，这些比较是在 JPEG 与 SVG 之间进行的，而不是 PNG。不过，JPEG 是一种有损格式，其画质不如 SVG 或 PNG。如果我们使用 PNG，优势将超过 80 倍，这真是令人惊叹！

当然，PNG 和 JPEG 并不相同。许多优化提示都建议您使用 JPEG 而非 PNG，但这并不一定是明智之举。请查看以下图片。左侧图片是 HTML5 徽标右上角部分放大 6 倍的 PNG 图片。右侧的图片是相同的内容，但采用了 JPEG 编码。

很容易看出，JPEG 的文件大小缩减是有代价的，锐利边缘会出现色彩伪影，这可能会让您的视网膜认为自己需要戴眼镜：-) 公平地说，JPEG 针对的是照片进行了优化，因此不太适合矢量图形。无论如何，SVG 版本的质量与 PNG 版本相同，因此在文件大小和清晰度方面都胜出。

制作矢量背景

我们来看看如何将矢量文件用作网页的背景。一种简单的方法是使用 CSS 固定定位来声明背景文件：

<style>
#bg {
  position:fixed; 
  top:0; 
  left:0; 
  width:100%;
  z-index: -1;
}
</style>
<img src="HTML5-logo.svgz" id="bg" alt="HTML5 logo"></pre>

您会发现，无论显示屏的尺寸如何，图片的尺寸都恰到好处，边缘清晰锐利。

当然，我们还想在背景上放置一些内容。

但如您所见，由于我们无法读取文本，因此结果不太理想。那么我们该怎么做？

调整背景以使其看起来更美观

显然，我们需要做的是让背景图片中的所有颜色都变浅。只需使用 CSS 不透明度属性或在 SVG 文件本身中使用不透明度，即可轻松实现此目的。只需将以下代码添加到 CSS 内容中，即可实现此目的：

#bg {
  opacity: 0.2;
}

这样，您将会得到如下结果：

虽然此解决方案简单易行，但在移动设备上可能会成为性能痛点。对于大多数现有移动浏览器，与不透明对象相比，使用不透明度属性的绘制速度可能会慢得多。

更好的解决方案

修改原始 SVG 内容中的颜色远比使用 CSS 设置不透明度更有效。下面的 HTML5 徽标经过修改，通过更改所用颜色使其看起来像是褪色了，在此过程中完全避免了使用不透明度属性。因此，下面的背景图片看起来与更改不透明度后的结果完全相同，但实际上绘制速度会快很多，同时还能节省 CPU 时间并延长宝贵的电池续航时间。

现在，我们已经掌握了一些基本知识，接下来我们来了解一些其他功能。

高效使用渐变

假设我们要构建一个按钮。我们可以先创建一个圆角较大的矩形。然后，我们可以添加一个漂亮的线性渐变，为按钮添加一些不错的纹理。执行此操作的代码可能如下所示：

<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="blueshiny">
      <stop stop-color="#a0caf6" offset="0"/>
      <stop stop-color="#1579df" offset="0.5" />
      <stop stop-color="#1675d6" offset="0.5"/>
      <stop stop-color="#115ca9" offset="1"/>
    </linearGradient>
  </defs>
  <g id="button" onclick="alert('ouch!');">
    <rect fill="url(#blueshiny)" width="198" height="83" x="3" y="4" rx="15" />
    <text x="100" y="55" fill="white" font-size="18pt" text-anchor="middle">Press me</text>
  </g>
</svg>

最终的按钮将如下所示：

请注意，我们添加的渐变是从左到右的。这是 SVG 中的默认渐变方向。不过，我们可以做得更好，原因有二：美观性和性能。我们来尝试更改渐变方向，让其看起来更美观一些。设置线性渐变的“x1”“y1”“x2”和“y2”属性可控制填充颜色的方向。

只需设置“y2”属性，即可将渐变更改为对角线。因此，这项小小的代码更改：

<linearGradient id="blueshiny" y2="1">

为按钮提供了不同的外观，最终效果如下图所示。

我们还可以通过以下一小段代码更改渐变效果，使其从上到下呈现：

<linearGradient id="blueshiny" x2="0" y2="1">

最终结果如下图所示。

我听到您问，为什么我们一直在讨论渐变的不同角度？

事实证明，在大多数设备上，最后一个示例（从上到下绘制渐变色）的绘制速度最快。在编写浏览器代码的图形极客中，有一个鲜为人知的秘密：垂直（从上到下）渐变的绘制速度几乎与纯色一样快。（原因是，绘制对象是从页面顶部向下沿水平线绘制，而绘制代码的核心会理解颜色在每条线上不会发生变化，因此会对其进行优化）。

因此，当您选择在网页设计中使用渐变时，纵向渐变的速度会更快，并且耗电量也会随之降低。这种加速也适用于 CSS 渐变，因此不仅仅适用于 SVG。

如果我们对这些新的渐变知识充满好奇，不妨通过添加以下代码，在 HTML5 徽标后面添加一个酷炫的渐变效果：

<defs>
<linearGradient id="grad1" x2="0" y2="1">
    <stop stop-color="#FBE6FB" offset="0" />
    <stop stop-color="#CCCCFF" offset="0.2" />
    <stop stop-color="#CCFFCC" offset="0.4" />
    <stop stop-color="#FFFFCC" offset="0.6" />
    <stop stop-color="#FFEDCC" offset="0.8" />
    <stop stop-color="#FFCCCC" offset="1" />
</linearGradient>
</defs>
<rect x="-200" y="-160" width="910" height="830" fill="url(#grad1)"/></pre>

上述代码会向 HTML5 徽标的背景添加淡化的垂直线性渐变，以呈现细微的多色色调，并且运行速度与纯色背景一样快。

如果您在桌面浏览器中加载内容并将其调整为极端宽高比，则会在顶部/底部或左侧/右侧看到白色条。无论如何，在上述代码更改生效后，生成的背景将如下所示：

轻松制作动画

到目前为止，您可能还在思考使用 SVG 渐变作为网页背景有什么意义。确实，使用 CSS 渐变实现此目的可能是有意义的，但 SVG 的一个优势是渐变本身就位于 DOM 中。这意味着，您可以使用脚本对其进行修改，但更重要的是，您可以利用 SVG 的内置动画功能对内容进行细微更改。

例如，我们将线性渐变定义更改为以下代码，以修改色彩鲜艳的 HTML5 徽标：

<linearGradient id="grad1" x2="0" y2="1">
    <stop stop-color="#FBE6FB" offset="0">
    <animate attributeName="stop-color"
        values="#FBE6FB;#CCCCFF;#CCFFCC;#FFFFCC;#FFEDCC;#FFCCCC;#FBE6FB"
        begin="0s" dur="20s" repeatCount="indefinite"/>
    </stop>
    <stop stop-color="#CCCCFF" offset="0.2">
    <animate attributeName="stop-color"
        values="#CCCCFF;#CCFFCC;#FFFFCC;#FFEDCC;#FFCCCC;#FBE6FB;#CCCCFF"
        begin="0s" dur="20s" repeatCount="indefinite"/>
    </stop>
    <stop stop-color="#CCFFCC" offset="0.4">
    <animate attributeName="stop-color"
        values="#CCFFCC;#FFFFCC;#FFEDCC;#FFCCCC;#FBE6FB;#CCCCFF;#CCFFCC"
        begin="0s" dur="20s" repeatCount="indefinite"/>
    </stop>
    <stop stop-color="#FFFFCC" offset="0.6">
    <animate attributeName="stop-color"
        values="#FFFFCC;#FFEDCC;#FFCCCC;#FBE6FB;#CCCCFF;#CCFFCC;#FFFFCC"
        begin="0s" dur="20s" repeatCount="indefinite"/>
    </stop>
    <stop stop-color="#FFEDCC" offset="0.8">
    <animate attributeName="stop-color"
        values="#FFEDCC;#FFCCCC;#FBE6FB;#CCCCFF;#CCFFCC;#FFFFCC;#FFEDCC"
        begin="0s" dur="20s" repeatCount="indefinite"/>
    </stop>
    <stop stop-color="#FFCCCC" offset="1">
    <animate attributeName="stop-color"
        values="#FFCCCC;#FBE6FB;#CCCCFF;#CCFFCC;#FFFFCC;#FFEDCC;#FFCCCC"
        begin="0s" dur="20s" repeatCount="indefinite"/>
    </stop>
</linearGradient>

请查看下图，了解上述更改的结果。

该代码会在 20 秒的连续循环中，通过我们定义的所有不同颜色停止点更改线性渐变的颜色。这样一来，渐变色就看起来像是在页面上以永不停止的连续运动向上移动。

这样做的好处是，您无需使用脚本！因此，它会作为此页面中引用的图片运行，但同时也通过消除脚本需求来减轻移动设备 CPU 的工作负载。

此外，浏览器本身可以利用其对绘制操作的了解，确保尽可能减少用于执行精美动画的 CPU 开销。

有一个注意事项：某些浏览器根本无法处理这种动画，但在这种情况下，您仍然可以获得漂亮的彩色背景，只是它不会发生变化。您可以使用脚本（和 requestAnimationFrame）来解决此问题，但这超出了本文的讨论范围。

还有一点需要注意，这个未压缩的 SVG 文件只有 2922 字节，对于提供如此丰富的图形效果来说，这个大小非常小，可让用户和数据流量计划都满意。

接下来该怎么做？

在许多情况下，SVG 并不理想，照片和视频以其他格式呈现效果更好。文本也是如此，通常情况下，原生 HTML 和 CSS 的效果会更好。不过，作为线条绘制图形的工具，它可能是理想之选。

我们介绍了 SVG 图形的一些基本用途，展示了如何轻松生成小体积内容，以便以最少的下载量提供全屏生动图形。只需添加少量标记，即可对内容进行小幅增强，轻松获得出色的图形效果。在下一篇文章中，我们将详细介绍如何使用内置于 SVG 中的动画来实现更简单、更强大的效果，并比较使用画布与 SVG 的效果，以便选择合适的工具来创作移动图形网站。

其他实用资源

Inkscape：一个使用 SVG 作为文件格式的开源绘图应用。
Open Clip Art 是一个庞大的开源剪贴画库，包含数千张 SVG 图片。
W3C SVG 页面，其中包含指向规范、资源等的链接
Raphaël 是一个 JavaScript 库，提供方便的 API 来绘制和为 SVG 内容添加动画效果，并为旧版浏览器提供了出色的回退方案。
Slippery Rock University 的 SVG 资源 - 包含指向一本出色的 SVG 入门的链接。