在响应式网站上的使用矢量图形

发布于 2023-05-13 13:13:54 字数 14235 浏览 63 评论 0

创建令人眼花缭乱的移动内容意味着平衡下载的数据量和最大的视觉效果。矢量图形是使用最小带宽提供令人惊叹的视觉效果的好方法。许多人认为 canvas 是在 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 压缩，因此正确设置 Web 服务器可能是利用 GZIP 压缩的更好方法。

让我们看一下一些流行的移动设备屏幕尺寸，以了解其中的含义。下表列出了支持 HTML5 和 SVG 的设备、它们的屏幕分辨率以及使用 PNG 和 JPEG 文件的 HTML5 徽标背景图像的文件大小。图像 /矢量比率 显示与 1427 字节 SVG 文件和括号中压缩的 663 字节 SVG 文件相比，JPEG 的尺寸减小。

HTML5 标志图片大小对比

Device	Resolution	PNG image	JPEG image	Image/Vector ratio
iPhone 3G	320x480	9.5k	6.3k	4.4 (9.5)
Nexus One	480x800	15.4k	9.8k	6.8 (14.7)
DROID RAZR	540x960	17.3k	12k	8.4 (18.1)
iPhone 4	640x960	20.7k	13.2k	9.25 (19.9)
iPhone 5	640x1136	21.6k	14k	9.8 (21.1)
Galaxy Nexus	720x1280	24.4k	15.8k	11 (23.8)
iPad 1&2	1024x768	24.8k	15.7k	11 (23.7)
Galaxy Tab 10.1, Nexus 7	1280x800	27.1k	17.9k	12.5 (27)
Kindle Fire HD	1920x1200	44.1k	29.9k	20.9 (45)
iPad new	2048x1536	57.7k	39.6k	27.7 (59.7)

如您所见，示例内容的 SVG 数据大小明显更小，有趣的是，随着屏幕分辨率的增加，大小优势越来越大。请注意，这是非常简单的矢量内容，因此随着 SVG 文件大小的增加，对于更复杂的内容，文件大小优势会减弱 - 但您仍然可以获得分辨率独立性。

通过我们在一些最新设备上的示例文件，我们看到了使用压缩矢量数据的 60 倍优势！另外请注意，这些比较是在 JPEG 和 SVG 之间进行的，而不是在 PNG 之间进行的。但是，JPEG 是一种有损格式，其质量低于 SVG 或 PNG。如果我们使用 PNG，优势将超过 80 倍，这是惊人的！

但当然，PNG 和 JPEG 并非生而平等。许多优化提示告诉您使用 JPEG 而不是 PNG，但这并不总是一个好主意。看看下面的图片。左边的图像是 HTML5 徽标右上部分放大 6 倍的 PNG 图像。右边的图像是同样的东西，但用 JPEG 编码。

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" alt="HTML5 logo">

自己试试

您会注意到，无论显示器的尺寸如何，图像的尺寸都恰到好处，边缘清晰干净。

当然，我们想在背景上放置一些内容，如下例所示。

但如您所见，结果并不理想，因为我们无法阅读文本。那么我们该怎么办？

调整背景看起来更漂亮

我们需要做的显而易见的事情是使背景图像中的所有颜色都变浅。这可以通过使用 CSS 不透明度属性轻松实现——或者在 SVG 文件本身中使用不透明度。您可以通过简单地将此代码添加到您的 CSS 内容来完成这项工作：

#bg {
  opacity: 0.2;
}

那会给你结果：这样的

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

更好的解决方案

修改原始 SVG 内容中的颜色比使用 CSS 设置不透明度要好得多。这是我们的 HTML5 徽标，通过更改使用的颜色修改为淡出效果，并在此过程中完全避免使用不透明属性。所以下面的背景图像看起来与改变不透明度的结果相同，但实际上会更快地绘制并节省我们的 CPU 时间并在此过程中节省宝贵的电池寿命。

所以现在我们对一些基础知识有了很好的掌握，让我们继续讨论其他一些功能。

有效地使用渐变

假设我们要构建一个按钮。我们可以从创建一个带有漂亮圆角的矩形开始。然后我们可以添加一个漂亮的线性渐变来给按钮一些漂亮的纹理。这样做的代码可能类似于：

<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
  <linearGradient>
    <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 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 y2="1">

为我们的按钮提供不同的外观，它最终看起来如下图所示。

我们还可以通过这个小的代码更改轻松地将渐变更改为从上到下：

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

最终看起来像下图。

那么我听到你问的关于梯度不同角度的所有讨论是什么？

提示：使用从上到下的渐变以获得更好的性能。

事实证明，最后一个例子——从上到下渐变的例子在大多数设备上绘制速度最快。在编写浏览器代码的图形极客中，垂直（从上到下）渐变的绘制速度几乎与纯色一样快，这是一个鲜为人知的秘密。（原因是绘制对象是在页面下方的水平线上完成的——绘制代码的核心理解每条线的颜色都不会改变，因此他们对其进行了优化）。

因此，当您选择在页面设计中使用渐变时，垂直渐变会更快并且使用更少的电池作为副作用。这种加速也适用于 CSS 渐变，所以它不仅仅是 SVG 的事情。

请注意，应避免径向渐变，除非您知道它们会被硬件加速——在软件中它们非常慢。

如果我们真的对这种新的渐变知识感到冒险，那么我们也许可以通过添加以下代码在我们的 HTML5 徽标后面添加一个很酷的渐变：

  <defs>
  <linearGradient 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)"/>

上面的代码在我们的 HTML5 徽标的背景中添加了一个褪色的垂直线性渐变，以提供一种微妙的多色色调，运行速度与纯色背景一样快。

请注意，选择背景矩形的大小可确保颜色填充本文开头列出的所有移动设备的屏幕（它们的屏幕纵横比范围从 10/16 到 18/10）。

如果您在桌面浏览器中加载内容并调整到极端纵横比，您会看到顶部/底部或左侧/右侧出现白条。无论如何，在上面的代码更改之后，结果背景将如下所示：

轻松制作动画

到目前为止，您可能想知道使用 SVG 渐变作为页面背景的意义何在。使用 CSS 渐变确实可以做到这一点，但 SVG 的一个优点是渐变本身存在于 DOM 中。这意味着您可以使用脚本对其进行修改，但更重要的是，您可以利用 SVG 的内置动画功能为您的内容添加细微的变化。

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

<linearGradient 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 进行比较，以选择正确的工具来创作您的移动图形站点。