河源网页设计：重新思考响应式SVG

2019.08.12 mf_web

159

如果你还没有看过Joe Harrison的响应式图标技术，你很可能会像我第一次发现它时那样留下深刻的印象。在本文中，我想探讨除了用于替换位图PNG的“传统”可缩放矢量图形之外我们可以用SVG做什么。河源网页设计

响应SVG

实际上，我们可以将SVG视为一个独立的模块，它封装了用于自定义视图的CSS以及为交互逻辑封装JavaScript的响应行为。

现在，让我们深入研究一下这种技术。

响应SVG：Hobo的方法

Harrison的Responsive Icons网站实现得非常简单。它遵循一个众所周知的技术：图像精灵。如果你不熟悉精灵，请解释一下。图像精灵是一种以前仅用于光栅图像以抵抗不良网络性能的技术。我们的想法是将大量小图像合并到一个文件中，这样客户端就只能从服务器下载一个图像。

您还可以使用CSS来移动图像并仅显示特定元素所需的部分，从而为用户节省了必须单独下载每个图像的开销。

哈里森的技术做了同样的事情，除了SVG而不是PNG。这就是他将所有图标组合成一个文件的样子：

所有图标组合在一个SVG文件中。大视图。

然后，此文件将被设置为容器的背景，其中需要显示其中一个图标：

.icon {
  width: 300px;
  height: 300px;
  background: url(../images/home_sprite.svg);
  background-position: center top;}

复制

上面的例子很简单，但有一些问题。解决方案不够便携。实际上，需要两个部分才能使方法工作：外部CSS和SVG精灵。

响应式SVG：穷人的方法

因为CSS可以在SVG本身中定义，所以让我们修改上面的例子来封装图标并使其可移植。

首先，让我们删除精灵中图标的所有空间移位。当然，这给我们带来了一堆图标

然后，让我们重新排列所有形状并按图标.icon对它们进行分组，为每个组添加一个类，以及能够识别我们想要的每个形状的数字（所以#home_icon_0，#home_icon_1以及最多#home_icon_8）：

<svg>
  <g id="home_icon_0" class="icon">
    <!-- paths and shapes -->
  </g>
  <!-- ... -->
  <g id="home_icon_8" class="icon">
    <!-- paths and shapes -->
  </g></svg>

复制

现在，我们已准备好添加媒体查询，以便我们可以选择要显示的SVG文件中的图标。为此，<svg>可以使用<defs>标签直接在标签中编写CSS 。

<svg>
  <defs>
    <style>
    /* Hide all of the icons first. */
    .icon {
      display: none;
    }
    /* Display the first one. */
    #home_icon_0 {
      display: block;
    }
    /* Display the desired icon and hide the others according to the viewport's size. */
    @media screen and (min-width: 25em) {
      #home_icon_0 {
        display: none;
      }
      #home_icon_1 {
        display: block;
      }
    }
    @media screen and (min-width: 30em) {
      #home_icon_1 {
        display: none;
      }
      #home_icon_2 {
        display: block;
      }
    }
    /* And so on */
    </style>
  </defs><!-- Icon groups go here --></svg>

复制

因此，相同的图标现在适应视口的大小 - 除了现在，CSS规则，媒体查询和SVG形状都封装在SVG文件本身中。调整浏览器大小以查看以下示例的工作原理

响应SVG：使用枪法的人

上面的示例看起来比第一个好，但问题仍然存在：

响应式SVG能否以更好的方式交付？
是否采用了响应式方法来布置图标和自定义元素，而不仅仅是隐藏和显示文件的一部分？

期待我们每天依赖于响应式Web设计的内容编排和布局重组技巧，我们甚至可以改进我们的原型。我们将使用响应式设计，形状重构和转换来使图标适应不同的视口大小。

首先，让我们重新绘制SVG精灵文件中最大和最详细的房子图标，分割所有路径并将形状连接成元素形状。结果更具可读性，现在可以将任何转换应用于图标的任何部分：

我们的重绘图标看起来与精灵中最大的图标相同，但包含更多形状并占用更多空间。神奇之处在于我们将媒体查询和转换添加到新变体中，转换图标本身的形状以获得与SVG精灵相同的结果：

<svg>
  <defs>
    <style>
    @media screen and (max-width: 65em) {
      #door-shadow, #tube-shadow, .backyard {
        display: none;
      }
      #door-body {
        fill: white;
      }
      #door-handle {
        fill: #E55C3C;
      }
      #door-body, #door-handle {
        -ms-transform: translate(0,0);
        -webkit-transform: translate(0,0);
        transform: translate(0,0);
      }
      #window {
        -ms-transform: translate(0,0) scale(1);
        -webkit-transform: translate(0,0) scale(1);
        transform: translate(0,0) scale(1);
      }
      #house-body {
        -ms-transform: scaleX(1) translate(0, 0);
        -webkit-transform: scaleX(1) translate(0, 0);
        transform: scaleX(1) translate(0, 0);
      }
      #tube-body {
        -ms-transform: translate(0, 0);
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
      }
      #tube-upper {
        -ms-transform: translate(0, 0);
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
      }
    }
    /* And so on */
    </style>
  </defs><!-- Icon groups go here --></svg>

复制

一旦我们添加了一些转换魔法，该图标就会像Joe Harrison的SVG精灵一样，但会包含其中的所有逻辑。在新窗口中打开下面的示例并调整其大小以查看所有图标变体。

使图标适应父容器的大小

还有一件事。使图标响应其父容器中的更改（至少宽度和高度）也是可能的。

为此，首先，我尝试将SVG文件加载到一个包含在的img元素中div。但是，即使SVG文件中的一个媒体查询似乎也不起作用。

我的第二次尝试是在柔性object元素中加载图标，包裹在一个div。这样做可以使所有媒体查询都有效。现在也可以使一个对象填充其父对象的空间。（不要忘记将svg元素的宽度和高度属性设置为100％或完全删除它们。）

<div style="width: 100%; margin: 0 auto;">
  <object>
    <embed src="responsive3.svg" style="width: 100%; height: auto;" />
  </object></div>

复制

至于将SVG与媒体查询和转换嵌入的其他方法，您可以将SVG用作任何块元素的背景图像。也允许内联SVG，但媒体查询将响应视口。

下面的示例演示了图标如何响应不同的容器大小。SVG中的媒体查询根据要渲染SVG的尺寸处理图标的绘制方式。这里有八个不同大小的块，嵌入了一个相同的 SVG文件。

将JAVASCRIPT添加到SVG

更多好消息！SVG文件不仅可以封装CSS，还可以封装JavaScript。实质上，我们可以将包含的SVG文件视为可以应用任何旧标记语言的独立模块。

当嵌入内联<object>元素时，SVG中的JavaScript将完美地工作。这么美好的世界，对吧？

浏览器支持

使用SVG进行媒体查询和转换的最后一个也是最复杂的方法在以下浏览器版本中表现完美：

Internet Explorer 9+
Firefox 17+
Chrome 17+
Opera 15+
Safari 6.0+
iOS 6.0及更高版本的Safari
Android 3.0+上的Android浏览器

该技术可能适用于旧版本的浏览器，但某些转换（如缩放）不会应用。

结论

响应式SVG图标可以通过多种方式使用，包括：

响应式广告（广告内容将占据文档给予的空间，并且考虑到允许使用CSS和JavaScript，大多数操作将包含在每个广告的单个SVG文件中）;
标志;
应用程序图标

我应该说乔·哈里森提出的精灵技术没有任何问题。它有效，并且出于某些目的是必要的！

思考？反馈？我期待您在下面的评论部分中提出意见。

干杯，玩得开心！

河源网页设计