网页设计使用SVG向量格式的五个原因。

网页设计为什么需要SVG？

本文参考著名设计网站Creative Bloq (Roberts，2018)的博文，与中国读者分享网页设计的技术知识。Creative Bloq聚集了来自世界各地的顶级设计专家。原作者Steven Roberts是英国UX设计师。

SVG (Scalable Vector Graphics，中文:可缩放矢量图形)是用点、线、面来记录图案，而不是PNG、JPG等点阵。只要你用过Adobe Illustrator (AI)，你就会明白其中的区别。无论怎么放大，矢量图都不会出现格子或者模糊。随着SVG在桌面和移动浏览器中的全面支持，网页设计公司越来越多地使用这种矢量图格式。本文将列出五个主要原因:为什么网页设计要使用SVG。

延伸:2019年网站发展新趋势

目录

响应式网页设计支持计划修改网页风格和动画互动网页更快的网页摘要响应式网页设计

2019网页设计依然是手机优先，关注响应式网页设计，RWD)。因为SVG是以矢量格式存储图像的，所以不用担心图像分辨率是否合适，也就是说，同样的图像在手机或者32寸电视上不会是一颗狗牙。举个很简单的例子，所有的网页都是矢量格式，所以无论文字放大多少倍都不会变得模糊，这是百分之百符合RWD的网页设计原则的。

向量图完全支援RWD

返回页首

支持程序修改

SVG可以由浏览器的DOM(文档对象模型)来描述，因为它以编程方式处理图像。一个简单的说法就是浏览器理解什么是SVG，并且可以修改它。例如，SVG最初存储了一个红色的圆圈，当被指示时，它可以变成一个蓝色的正方形。类似的概念还包括:谷歌更容易理解网站上的文字，而不是网站上的照片；用Word改文字比Photoshop改海报容易，等等。在网站开发中，我们可以通过使用CSS和JavaScript轻松地与网页进行交互。总之，可编辑也。

浏览器会为SVG创造DOM

返回页首

网页样式和动画

只要按照w3c的指示，就可以简单的改变网页上SVG的样式，比如颜色、饱满度、透明度等。，高级的有边框格式，框架，阴影等。另外，很久以前网页设计师还在用Flash制作网页动画，但是苹果手机根本不支持Flash，GIF把文件做大了，效果也不理想。现在SVG动画是一个可行的解决方案，很多网页设计公司选择使用CSS动画。这里有更多的参考例子。

阅读:2019年现代网页设计七大趋势

动画较静态图片更吸引

返回页首

互动网页

如上所述，SVG可以被浏览器读取和修改，因此用户可以通过程序在网页上与SVG进行交互。例如，当光标在某个图案上时，它会启动动画，提示用户下一步该做什么。现代网页设计强调用户体验，UX)，交互可以明显提高UX，让用户方便易用。与之前的Flash不同，这些交互程序无需在桌面或手机浏览器中安装额外的插件或软件即可使用，可以减少交互的安全问题。这里有一个例子。

互动网站提升用户体验

返回页首

更快的网页

SVG最重要的优势就是文件小，这一点在交互式网站中更为明显。如果以MB为单位的PNG文件在SVG中处理，文件大小可能只有几十KB。文件小使得下载时间大大减少，浏览器在处理SVG时可能会比PNG使用更少的计算能力，这对于手机来说非常重要。我们常说的五秒规则，就是你在家里打开一个网页后，如果五秒内没有任何事情发生，你就会跳转到其他网站。想想吧。下载需要两秒钟，处理一个PNG需要半秒钟。正是这2.5秒让潜在客户白白流失，所以很多web公司越来越重视网速的问题。

阅读:关于SEO你必须知道的九件事

网页速度是SEO的关键因素

返回页首

摘要

网页的设计已经脱离平面很多年了，仅仅用Photoshop的概念去理解网页真的很欠缺。随着人们对UX的要求越来越高，静态网站已经不能满足今天的用户。作为一家网页设计公司，威自流地自然希望与时俱进，向行业和客户介绍更多世界范围内网页设计的新趋势和潮流，提升整体技术水平。

阅读:你应该创办网页设计公司的七个理由

返回页首