此页面由 Cloud Translation API 翻译。

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

Alex Danilo

制作令人眼花缭乱的移动内容意味着要平衡下载的数据量和最大限度的视觉冲击。矢量图形是一种以最小带宽实现惊艳视觉效果的绝佳方式。

许多人认为画布是在网络上绘制矢量和光栅混合的唯一方式，但也有替代方案有一些优点。可缩放矢量图形 (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，但这不是个好主意。请看下面的图片。左侧图片是放大 6 倍的 HTML5 徽标右上方的 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 Primer 的链接。