想像一下，透过程式如CSS与JS的技术就能够改变图形的样貌，外观与色彩，即时的呈现于你的网站上，而且维持一贯的高品质，这样的梦想其实已经逐渐在网页设计产业上发酵，因为SVG图形格式已经成为当今网页的图形标準之一。

SVG是一个相当新的图形标準，目前最大的使用族群为网页设计族群，所以一般的用户没有听过是很正常的。一般传统常见的图片格式，例如GIF、JPG与PNG格式，是以点阵为呈现的基础，然而SVG却是以向量的方式呈现。

点阵与向量图形格式的差异，在于点阵格式是以座标为呈现视觉的基础，透过无数的座标与色彩资讯，可以呈现出非常丰富的视觉色彩图片，像是数位相机就是点阵图形格式的主要族群。然而点阵的图片经过放大或是缩小，都会损失部份座标的色彩资讯，导致图片看起来会「劣化」。向量图形格式的基础并非座标而是曲线，虽然能够呈现的色彩不若点阵丰富，但是却能自由放大缩小且不影响品质。

那么，为什么SVG向量图片格式是网页设计的新希望？主因在于点阵图片的问题在智慧手机网页呈现上，出现了很大的问题。由于智慧手机的显示品质不断提昇，用户能够看到比电脑更多的图形细节，若为了呈现完美的图片效果，势必得使用高解析度的图片却会致使网站速度变差，若是为了提昇手机效率降低图片品质，网站的视觉效果就会变差，这样的问题困扰了很多前端设计师，所幸SVG的问世解决了这样的问题。

SVG六大优点

任意缩放

向量图形的优势就是变形与缩放的条件下，皆不会影响视觉品质，这一点是点阵图片格式无法做到的优势。有些设计师透过不同解析度的点阵图片，透过CSS判断萤幕解析度选择呈现的图片，但製作较为费时，SVG的优势在此就能彻底发挥。

弹性运用 

SVG是可以透过编码的方式呈现，因此可以任意崁在HTML文件内。由于这样的特性，开启网站时会将图形视为DOM（Document Object Model）元件的一部分，浏览器会优先处理，对于网页的速度提昇帮助很大。

取用元件

SVG的外观可以透过程式控制，控制的方式千变万化，让前端设计师挥洒更多创意。举例来说：你可以透过CSS重複利用SVG的图片元素于不同的地方，而且你可以只取用一部分的资源。这样的效益，可以让你的用户以为你使用了好几种设计元素，但其实只用了一种，如此网站有更丰富的呈现方式，使用的资源却比过去更少。

效能提昇

先前提过SVG的格式为向量，所佔用的资料量远比JPG与PNG点阵图片来得小，这对于运算力比较弱智慧手机来说是更有利的。此外SVG能够跨平台使用，于多种标準浏览器呈现，点阵与向量格式至今跨平台都做得很好，当然选择效能高的格式是优先考量的。

网站动画

过去使用Flash的动画受到了平台的限制，网站的动画发展受到了打击。SVG的出现让网站动画出现了一线曙光，透过程式控制，设计师可以轻易做出基本的旋转、缩放、变形、变色效果的SVG动画，随着技术日渐成熟，设计师也能製作出複杂的动画在网页设计上。

资源丰富

目前越来越多的技术论坛分享SVG的相关图像成形技术，而商用软体Illustrator以及免费软体Inkscape都能设计出绝美的SVG向量图片，让向量图片的品质不输给点阵图片。只有极为少数的老旧浏览器读取SVG有问题，绝大多数的新平台都能正确的观看SVG格式的内容。