如何在网页设计中使用SVG图片
时间：2014-07-29
来源：星翼创想(www.iswweb.com)
作者：李飞
一、首先我们要说一下为什么要使用SVG图片。
一般在响应式网页设计中，用SVG来代替GIF或者PNG图片，可以获得更好的显示效果，更适合在iPad Retina中显示。它是一种矢量图片，不受分辨率的影响。
二、其次怎么在网站设计中使用SVG图片
通常在html中插入图片的方法是如下：
<img src="logo.gif" />插入SVG图片则使用\<object>，如下面的例子，需要注意的是，如果是IE 8浏览器，我们还是需要fallback原本的GIF或PNG图片。
<object data="img/logo.svg" type="image/svg+xml"> <a href="img/logo.svg"> <!-- [ if lte IE 8 ] --> <img src="img/logo.gif"> <!-- [endif] --> </a> </object>另外，如果你原先在CSS文件中设置了让图片自动响应宽度
img { max-width: 100%; }你使用的SVG图片则无法实现以上的CSS，因为：
- SVG本身有宽度和高度的设定，这是你在AI中制作原始矢量文件是的尺寸，这时我们需要用文本编辑器打开SVG图片，你会看到很多代码，不用管，只需要找到width和height，然删除即可。
-
SVG文件并不在img标签里
三、怎么在网站设计中使用SVG图片出现问题的解决方案解决方法
增加定义object的max-width
img, object { max-width: 100%; }
