恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
玩转 SVG 让设计更出彩
0.0°
2019-04-09 原创文章 经验/观点 举报 3599 38 28 4

使用SVG,提升视觉设计表现力,让设计更出彩。

前言

——————

SVG 概述


随着浏览器对矢量图形的支持越来越好。在这两年的web设计中,可以发现矢量图形即SVG应用的越来越广泛,使用SVG可以大大的提升视觉设计的表现力和设计体验。

这篇文章就来讲讲SVG在web设计中的一些应用场景,希望可以给大家带来一些灵感。


先还是简要的介绍下SVG:

SVG意为可缩放矢量图形(Scalable Vector Graphics)。它是由万维网联盟(W3C)开发并进行维护的。


SVG对于Web来说有着其它图片格式无可比拟的优势,尤其是现在,因为它不必考虑屏幕分辨率的问题。不论你新入手的智能手机的像素如何密集(分辨率有多高),矢量始终显示得如同刚下的雪一样清晰。


时至今日,无论是设计工具还是浏览器对SVG的支持越来越好,可以放心大胆的使用它来使设计更出彩。


比如设计工具就有强大的Sketch和Adobe Illustrator。

Image title


浏览器几乎也是一片绿的,当然这里指的移动端。PC端的话,还是要注意下IE。


Image title


总结下SVG的一些优势:

1、跟分辨率无关,完美显示,一图可以适配各种尺寸

2、强大的设计工具支持

3、方便交互,方便编写动效



ICON应用


ICON是SVG的一个典型应用场景,由于它是矢量图形的关系,所以不需要考虑像以前一样要切各种倍数的图来适配高清设备,直接一张图就可以搞定所有的设备。

可以体验下下面这个demo,只需要一个SVG,无论多么变态的分辨率都可以完美的高清显示:

Image title



ICON应用

——————
icon换肤

由于SVG是一种XML格式来描述的矢量图形,自带了很多的属性来定制它的表现。比如填充颜色,使用SVG可以很方便改变图形的填充颜色,这对于一些需要换肤的场景就就派上用场了。比如下面这个demo:

Image title

扫码体验:

Image title仅仅只需要改变一句代码,就可以随心所欲的改变icon的颜色。




ICON应用

——————

ICON Morphing 动画


所谓Morphing动画是表示,同一个模型,从一个形状变到另一个形状。这两年来,这种微动效在web应用的越来越多,特别是一些按钮的交互操作上,比如youtube上播放器的按钮交互就使用了morphing动画:

Image title


可以扫码来感受下这种微动画,使用在一些按钮的交互上,可以使交互更加细腻。而不是像以前那样硬生生的直接切换图片。

Image title


具体怎么实现 morphing 动画,敬请期待后面的教程。




SVG 在文字中的应用


在web世界中,文字占据了一个重要的位置。在之前,文字一般是通过不同的字体来提高它的表现力和美感。


最近这两年随着W3C标准不断地发展,通过CSS和SVG的一些属性,可以实现以前只能靠Photoshop等设计软件才能实现的效果。下面就来说说SVG在文字中的应用,当然有些效果使用CSS也能实现。




SVG在文字中的应用

——————
渐变文字效果

渐变文字,故名思议就是使用渐变的颜色来填充文字。以前这种文字的效果只能靠photoshop等设计工具来实现,限制大不灵活。而使用SVG的话,则可以非常的灵活使用它,一句代码就可以搞定(现在使用CSS也可以使用这个效果)。

 

    Applying a gradient background to text in SVG 

    

       

           

           

           

           

           

           

       

    

    ISUX Design

简单几行代码就可以搞定渐变文字的效果,文字可以自定义。

Image title


扫码体验:

Image title


这里不只是可以填充渐变,也可以使用图片来填充文字,来实现你想要的文字效果。


SVG 在文字中的应用

——————
动态文字效果

除了颜色的填充,还可以使用视频或者是gif动图来填充文字,可以实现各种脑洞大开的文字效果。

比如下面这个火焰在燃烧的文字效果,就是使用gif图来填充的。

Image title


上面是gif图填充的动态效果,同样可以使用视频来填充在文字实现动态效果。扫码来体验下:

Image title



SVG 蒙版的应用


蒙版,一直是各种设计工具中一个强大的工具,利用它可以实现各种特殊的图形效果。以前,要想在web中实现特殊的图形效果,只能靠设计师先设计好效果,然后切图利用图片来在网页中实现。


而使用SVG中的蒙版属性则可以轻松实现各种各样的特殊图形效果。比如下面这样的图形效果:

Image title

以前只能靠切图来实现,而现在也只需要几行代码就可以实现。



SVG 蒙版应用

——————
SVG 镂空文字效果

同样蒙版也可以应用到文字中,来实现一些镂空透明的文字视觉效果:

Image title

扫码体验:

Image title

除了实现一些静态的特殊图片效果,使用蒙版配合其它的元素还可以实现一些动画效果。



SVG 蒙版应用

——————
蒙版动画效果


利用SVG蒙版,我们可以制作类似下面这样类似霓虹灯的文字动画效果。

Image title

扫码体验:

Image title

还可以结合视频实现特殊形状的动态效果:


Image title

具体效果可以去这里体验下:http://dspolitical.com/


使用蒙版实现下面这样的聚光灯的动画效果,也非常简单:

Image title




SVG 动画应用

动画也是SVG的一个典型应用,特别是最近这两年,应用的特别多。下面就来看看SVG动画的一些应用。


SVG 动画应用

——————

描边动画

描边动画是啥呢,看个图就知道了。

Image title

看完图是不是感觉熟悉,这种使用SVG来实现的描边动画,这两年在web上大行其道。随时随地都可以看见它的使用,以及变着各种法子来使用。


比如常见的表单也可以使用描边动画来实现有趣的交互动画效果:


Image title


这种描边动画使用SVG来实现成本极低,基本上只需要设计师是导出矢量图形的SVG格式再加上几句代码就可以轻松实现。


SVG 动画应用

——————

Morphing 动画

morphing动画在上面icon那部分已经介绍过了,在icon上使用只是小试牛刀。它的用处远不止如此。比如:

Image title


有了 SVG,实现这样的形变动画,都变的非常的轻松简单。剩下就是你的想象力了。


比如,我想做一个苹果公司产品之间的一个演变,就可以使用 SVG 来实现产品之间的演变的动画,扫码体验下:

Image title


SVG动画应用

——————
转场动画
结合上面说的morphing动画和描边动画,我们可以实现一些酷炫的转场动画即不同页面之间的转场效果。

Image title


或者是下面这种:

Image title


体验地址


SVG 动画

——————
滤镜动画

说到SVG动画,那SVG滤镜动画是不能不提的了,使用SVG的滤镜,我们可以实现一些非常强大的动画效果。

比如,类似下图所示的gooey效果,使用SVG滤镜就可以轻松实现:

Image title

或者是这种炫酷的图片动效,使用SVG滤镜也是轻轻松松可以实现:

Image title


这里也是举了些常见的应用,只要发挥想象力,用好SVG滤镜,可以是实现更多有趣的动画效果。可以多看看文章后面的参考链接,找找灵感。



总结


随着浏览器对web标准支持的越来越好,现在完全可以放心大胆的使用SVG。本文总结一些SVG典型的应用场景,比如icon、文字效果以及动画等应用。大家在进行视觉设计或者一些动画设计的时候,可以结合具体项目的特点来应用SVG,也可以翻翻本文,来找找灵感。

大家对于SVG还有什么样玩法,欢迎留言一起讨论。有疏漏或者理解不到位的地方,还请多多指教!


参考资料:
https://www.newmediacampaigns.com/blog/2017-web-design-trends
https://www.awwwards.com/websites/svg/
https://scotch.io/tutorials/creative-splash-transition-with-css-and-svg
https://css-tricks.com/how-to-do-knockout-text/
https://tympanus.net/codrops/2015/02/16/create-animated-text-fills/
http://tympanus.net/Development/AnimatedCheckboxes/
https://tympanus.net/codrops/2019/03/12/image-distortion-effects-with-svg-filters/
https://tympanus.net/codrops/2013/10/15/animated-checkboxes-and-radio-buttons-with-svg/
更新:2019-04-09

收藏

38人已收藏

腾讯ISUX

It iS Ultramodern eXperience

  • 219

    作品

  • 1.9w

    粉丝

  • 4

    关注

  • 那些欲罢不能的实用工具
  • QQ亲密关系 | 从工具到情感再到认同
  • 与同为毕业生的你,说说我的故事
  • QQ红包 | 趣味新玩法是怎么设计的
相关标签

    猜你喜欢

      2019-04-09 原创文章 经验/观点 举报 3599 38 28 4

      玩转 SVG 让设计更出彩

      0.0°

      你确定要举报玩转 SVG 让设计更出彩

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2019年04月09日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      28
      38
      4

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录