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

Alex Danilo
X

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

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

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

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

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

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

扩缩基础知识

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

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

HTML5 徽标

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

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

别急，还有更多好消息 - HTML5 徽标只有 1427 字节！天哪，它太小了，加载时几乎不会消耗任何移动流量，这意味着它加载速度快，而且对用户来说费用低且速度快！

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

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

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

PNG 图片
PNG 图片
JPEG 图片<
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 入门的链接。