为什么你的logo图模糊不清，移动端图片虚化的解决方案

在传统pc时代的时候，几乎99%的网站都在使用图片格式作为logo，而大部分网站都使用了png透明底的图片来做网站的logo。但是进入移动时代之后，这种习惯还是被很多web前端人员保留了下来。

众所周知，移动端的屏幕大小各异，如果使用图片来作为logo，那么是很难找准一个合适的大小来界定图片尺寸的。当图片被放大或缩小时几乎都会出现边缘模糊不清，出现锯齿等问题。那么该如何解决这一问题呢？

答案是：使用矢量图形来替代传统的图像，如SVG格式

矢量图形在放大或缩小N倍的时候也不会出现边缘模糊不清的问题，事实上这个事实几乎大部分web前端从业者都知道，但是很多人似乎是没有想到这一点，或是可能心存其他顾忌。这种矢量素材如SVG格式在移动端的效果尤为明显，可以很直观的发现LOGO比之前使用图片素材要清晰很多。

而且从体积上来讲，在大多数情况下，矢量图形（如svg）素材的体积都小于图片素材的体积。更有利于提升网页的加载速度，尤其在移动端有可能使用到移动网络的情况下，更能体现优势。

事实上，本篇所讲的内容，已经这样操作的人不屑一顾，很多知道矢量概念但未使用这种解决方案的人在看完之后，一定会有种恍然大悟的感觉，也因此，我们一直提倡，不要为了切图而切图，web前端在很多时候，还是要发散自己的思维，摆脱固有思维的束缚。