【转】【翻译】对响应式SVG的再思考

来源: http://www.w3ctech.com/topic/1555

原文地址:http://www.smashingmagazine.com/2014/03/rethinking-responsive-svg/

如果你还未曾见过乔•哈里森响应式图标http://responsiveicons.co.uk/的技术,那你很可能会像我第一次看到它时一样,对它印象深刻。在这篇文章中,我想探究一下,我们该如何使用SVG来做一些更有趣的事情,而不只是作为“可伸缩矢量图形”来对PNG位图进行替换。事实上,我们知道SVG作为一个独立的模块,不光能够通过封装CSS实现自定义视图,也能够通过封装javascript实现交互逻辑。

那现在,让我们深入了解一下该技术。

响应式SVG:流浪汉的方法

哈里森的响应式图标的网站实现方式很简单。它使用了一个众所周知的前端技术, image sprites。如果你不了解该技术,那我来介绍一下。 image sprites是一门以节省带宽、提升网络性能为目的的以往只用于光栅图像的技术。它的实现逻辑是让很多小图像组合成一个文件,这样客户端就只需要从服务器下载一张图片。

你可以使用CSS来移动图片,使其显示在需要让它显示的地方,这种方式相比于下载每个图片,将会更加节约网络流量。

除了将PNG替换成SVG,哈里森对于SVG的处理方式与image sprites并没有什么不同。他将所有图标合并为一个文件,如下图所示:

所有的图标组合在单个SVG文件,该文件之后会被设置为一个容器的背景,在该容器中,一个图标会显示出来:

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

上面所举的例子虽然很简单,但也存在一些问题。那就是该解决方案不够简便。实际上,想要使用这种方式,两部分必不可少:外联的CSS和SVG Sprite。

响应式SVG:穷人的方法

因为CSS可以在SVG内部定义,那我们来修改一下上面的例子,使用更简便的方法来封装图标。首先,删除sprite里图标的所有的空间相关属性。当然,这也给我们留下了一堆堆积杂乱的图标: http://codepen.io/pukhalski/embed/inxym?height=343&theme-id=8287&slug-hash=inxym&default-tab=result&user=pukhalski

然后,按照图标重新排列所有的形状和组,添加.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文件中的图标了。为此,我们可以用<defs>标签把CSS直接写在<svg>标签中。

<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文件中。缩放你的浏览器,来看看它在下面的例子中是如何运行的: http://codepen.io/pukhalski/embed/uxIKB?height=349&theme-id=8287&slug-hash=uxIKB&default-tab=result&user=pukhalski

响应式SVG:持枪男人的方法

上面的例子虽然看起来比第一个稍微好一点,但问题依然存在:

  • 响应式SVG能否以一种更好的方式实现?
  • 相比隐藏和显示部分文件,使用自定义元素与响应式的方式对图标进行布局是否更可行?

细查响应式网页设计所用的内容编排和布局结构调整的方法会发现,我们仍然可以优化我们的方法。我们可以使用响应式设计,图形重构和变换,以使图标适用不同的视图的大小。

首先,在我们的SVG sprite中重绘最大且最详细的房子的图标,拆分所有路径,并把形状加入到元素的形状中。这种方式更易读,而且移植性更强:

http://codepen.io/pukhalski/embed/Azqyn?height=325&theme-id=8287&slug-hash=Azqyn&default-tab=result&user=pukhalski

重绘的图标虽然看起来和sprite里最大的图标一样,但它包含更多的形状,而这仅多占用了一丢丢空间。神奇之处在于,我们把媒体查询和变换添加到新的变种中,通过改变图标本身的形状可以得到和SVG sprite相同的结果。


<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>

只要我们使用上面提到的方法,图标就会表现的像乔•哈里森的SVG sprite一样,而且它自己会包含全部的逻辑。在新窗口中打开下面的例子,调整其大小以查看所有图标变种。

http://codepen.io/pukhalski/embed/hFLDG?height=336&theme-id=8287&slug-hash=hFLDG&default-tab=result&user=pukhalski

使图标适应父容器的尺寸

还有一件事,就是让图标能够对父容器的宽高变化实现响应。为了做到这一点,我尝试加载一个包裹在div中使用img标签的SVG文件。但似乎SVG文件所有的媒体查询都失效了。

我的第二次尝试是加载了一个由div包裹的object元素中的图标。这种方式下,所有的媒体查询都起作用了:让对象能够充满整个父容器。(记得将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文件中但尺寸不同的例子。

http://codepen.io/pukhalski/embed/hszLl?height=485&theme-id=8287&slug-hash=hszLl&default-tab=result&user=pukhalski

添加JavaScript到SVG

其他的好消息! SVG文件不仅可以封装CSS,也可以封装JavaScript。本质上,我们在使用任何一种旧标记的语言时,都可以把一个被引用SVG文件当做一个独立的模块。

当JavaScript 内联到在元素中时,还能够完美地执行。多奇妙的世界,是吧?

浏览器支持

能够完美支持在SVG文件中实现媒体查询和变换的浏览器版本有:

  • 互联网浏览器9+
  • 火狐17+
  • 谷歌17+
  • 欧朋15+
  • Safari浏览器6.0+
  • Safari浏览器iOS 6.0或更高版本 Android浏览器 Android 3.0+

该技术有可能在某些旧版本的浏览器中能够实现,但一些转换效果,如缩放,可能还不支持。

结论

响应式SVG图标可以应用在很多方面,如下所示:

  • 响应式广告;
  • 标志;
  • 应用程序的图标。

我要指出的是,乔•哈里森提出的sprite技术并没有什么不妥。它能够实现,并且在某些场景下非常有用。

时间: 2024-10-06 18:15:57

【转】【翻译】对响应式SVG的再思考的相关文章

ProgressBar.js – 漂亮的响应式 SVG 进度条

ProgressBar.js 是一个借助动态 SVG 路径的漂亮的,响应式的进度条效果.使用 ProgressBar.js 可以很容易地创建任意形状的进度条.这个 JavaScript 库提供线条,圆形和方形等几个内置的形状,但你可使用 Illustrator 或任何其它的矢量图形编辑器创建自己的进度条效果. 在线演示      插件下载 线条进度条: var line = new ProgressBar.Line('#example-line-container', { color: '#FC

响应式编程框架ReactiveCocoa学习——框架概览

这篇博客将会继续翻译RAC的官方文档Framework Overview. 主要是对RAC这和框架进行概览的介绍和学习.同时也可以参考我前面的两篇翻译<响应式编程框架ReactiveCocoa学习--基本操作符><响应式编程框架ReactiveCocoa介绍与入门>.其中ReactiveCocoa的Github官方地址为 https://github.com/ReactiveCocoa/ReactiveCocoa . 这篇文档包括了RAC中的对不同组件的高层描述,并解释如何进行结合

响应式开发(2)

1.像素 因为浏览器不是根据硬件像素宽度工作的,而是根基DIPs工作的叫什么设备独立像素值,这个有个链接给你 (http://yunkus.com/physical-pixel-device-independent-pixels/) 2.DPR 设备像素比DPR(devicePixelRatio)是默认缩放为100%的情况下,设备像素和CSS像素的比值 例子 以iphone5为例,iphone5的CSS像素为320px*568px,DPR是2,所以其设备像素为640px*1136px 深入了解我

Flexslider - 响应式的 jQuery 内容滚动插件

FlexSlider 是一款轻量的响应式 jQuery 内容滚动插件,能够帮助你在项目轻松的创建漂亮的内容滚动效果.这款插件曾经连续多年入选 WDL 的年度最佳 jQuery 插件,值得大家在网站开发中试试. 温馨提示:响应式效果需要再 IE10+.Chrome.Firefox 和 Safari 等现代浏览器中才支持. 效果演示     插件下载 使用示例: <div class="flexslider"> <ul class="slides"&g

响应式编程(Reactive Programming)(Rx)介绍

很明显你是有兴趣学习这种被称作响应式编程的新技术才来看这篇文章的. 学习响应式编程是很困难的一个过程,特别是在缺乏优秀资料的前提下.刚开始学习时,我试过去找一些教程,并找到了为数不多的实用教程,但是它们都流于表面,从没有围绕响应式编程构建起一个完整的知识体系.库的文档往往也无法帮助你去了解它的函数.不信的话可以看一下这个: 通过合并元素的指针,将每一个可观察的元素序列放射到一个新的可观察的序列中,然后将多个可观察的序列中的一个转换成一个只从最近的可观察序列中产生值得可观察的序列. 天啊. 我看过

响应式布局的3个陷阱

设计师们无法回避移动设备的大势所趋,当然在网站设计上有大量新的概念来迎合移动设备.但是单独的网站,无法在移动设备层出不穷的大潮中站稳脚跟.无论是在个人电脑.笔记本.智能手机.平板电脑.大屏幕手机.智能电视.上网本以及其它有前景的设备,都需引人入胜的设计. 响应式布局是这种情况下唯一理智的方式. 尽管不是所有人确信响应式Web设计是未来的方向,但是响应式Web设计已经获得全世界Web设计师的广泛支持. 而我们许多人还是通过简单使用响应式Web设计来解决不同大小屏幕的布局问题——这解决了普通设计量用

如何实现 font-size 的响应式

本文转自掘金网 那么多的文章讲了响应式的网站如何布局,使用 CSS 如何实现,如何 Blah Blah 的.但是,我们都忘了很重要的一点——对字体大小的响应式控制. 现在的很多网站,从布局上来说,尽管是响应式的(当然,或许可以说成所谓响应式的).但是,从字体上来说,却不一定是响应式的.虽然,每个网站可能会通过某些方式(比如频繁使用@media )来让自己的网站在不同的屏幕大小下显示不同大小的字体,但是,这样不能叫做响应式,这只是一种适应式的做法. 那么,怎么样才能对我们的 font-size 实

响应式编程,是明智的选择

相信你们在学习响应式编程这个新技术的时候都会充满了好奇,特别是它的一些变体,例如:Rx系列.Bacon.js.RAC等等…… 在缺乏优秀资料的前提下,响应式编程的学习过程将满是荆棘.起初,我试图寻找一些教程,却只找到少量的实践指南,而且它们讲的都非常浅显,从来没人接受围绕响应式编程建立一个完整知识体系的挑战.此外,官方文档通常也不能很好地帮助你理解某些函数,因为它们通常看起来很绕,不信请看这里: Rx.Observable.prototype.flatMapLatest(selector, [t

【翻译】移动端友好的响应式导航栏教程

以下是译文: 今天我来教大家设计一个色彩绚丽且移动端友好的响应式导航栏.这个导航栏的灵感源自一款叫做"无主之地(Borderlands)"游戏中的一个叫做Maliwan武器生产商商标所采用的颜色集.导航栏会自动根据浏览器窗口的大小调整布局格式:在PC宽度下呈现为一行按钮,在平板宽度下呈现为三行按钮,而在移动端则变成了一个菜单栏按钮连接,点击可以显示和隐藏整个导航栏.为了使这个导航栏做到真正地移动端友好,我们将采用图标字体来作为导航栏图表,这样的话,当界面放大缩小的时候,图标也会自动调整