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

为何网页设计需要SVG?

本文参考着名设计网站Creative Bloq 博客文章 (Roberts, 2018)，和中文读者分享网页设计的技术知识。Creative Bloq 云集世界各地的顶尖设计高手，原文作者 Steven Roberts是英国UX设计师。

SVG (Scalable Vector Graphics, 中文：可缩放向量图形)以点、线、面去纪录图案，而不是如PNG、JPG等点阵的方法，大家只要用过Adobe Illustrator (AI)，就会明白个中的分别。无论如何放大，向量图都不会出现格仔或模糊。随着桌面和手机的浏览器 (Web browser)全面支援SVG，南宁网页设计公司越来越多使用这种向量图格式。本文将会列出五个主要原因：为何网页设计应该使用SVG。

延伸阅读：2019网站开发新趋势

目录

响应式网页设计支援程式修改网页风格及动画互动式网页更快的网页总结响应式网页设计

2019网页设计仍然是手机优先，讲究响应式网页设计 (Responsive Web Design, RWD)。因为SVG以向量格式储存图像，所以不用担心解像度 (Image resolution)是否合适，即是同一个影像在手机还是32寸大电视都不会起狗牙。举一个很简单的例子，网页文字全部都是向量格式，所以无论字放大几多倍都不会变得模糊，而这是百份百符合RWD的网页设计原则。

Back to Top

支援程式修改

由於SVG以程式方法处图象，它是可被浏览器的DOM (Document Object Model)描述。一个浅白的说法就是浏览器明白SVG是甚麽的图像，从而可修改它。举个例，本来SVG储存了一个红色的圆形，只要收到指示，就可以将它变成为蓝色的正方形。类似的概念还有：Google理解网站上的文字较网站上的相片容易；用 Word更改文字会较Photoshop更改海报容易，等等。网站程式开发上，我们只要利用CSS及JavaScript就可以轻松做到网页互动。一言之，editable也。

Back to Top

网页风格及动画

只要跟足w3c的指示，我们可以简单改变网页上SVG的风格，例如颜色、填满度、透明度等等，进阶的还有边界格式、框架、暗影等。另外很久以前，网页设计师仍有使用Flash去作网页动画，可是苹果手机根本不支援Flash，而GIF又令档案较大而且效果不理想。现在SVG动画就是一个可行的方案，同时亦有很多网页设计公司选择使用CSS Animation，这里有更多的参考例子。

延伸阅读：2019七个现代网页设计的趋势

Back to Top

互动式网页

上文已提到SVG是可被浏览器阅读，从而进行修改，所以只要透过程式，用家就可以和网页上的SVG互动。例如Cursor在某图案上时就会启动动画，提示用家下一步应该要做甚麽。现代网页设计强调用户体验 (User experience, UX)，而互动性就能明显提升UX，令用家方便和容易使用。和从前的Flash不同，这些互动程式不用在桌面或手机浏览器另装插件或软件才能使用，这可减少互动的安全性问题。这里有个例子。

Back to Top

更快的网页

SVG最重要的优势就是细小的档案，这在互动式网站中更明显。以MB计的PNG档案，如果以SVG方式处理，File Size可能低以数十KB。细小的档案令到下载时间大幅减少，而且浏览器在处理SVG时，可能较PNG使用更少的运算能力，这对手机来说是十分重要的。我们经常说五秒法则，指用家打开网页後五秒都没事发生，就会跳到其他网站。试想想，一张PNG多花两秒下载和半秒处理，正是这2.5秒，就让潜在顾客白白流失了，所以很多南宁网页公司都越来越重视网速问题。

延伸阅读：关於SEO一定要知的九件事

Back to Top

总结

网页设计已经跳离了平面多年，单以Photoshop概念去理解网页实在乏善足陈，随着人们对UX的要求日益提高，静态网站已不能满足今天的用家。航家建站作为南宁网页设计公司，自然希望与时并进，为业界及客户介绍更多世界性的网页设计新潮流和趋势，提升整体技术水平。

延伸阅读：七个你应该搵南宁网页设计公司的原因

Back to Top