在web网页中使用SVG图片详细方法

在web响应式网页设计中，使用SVG图像格式来代替GIF或者PNG图片，可以获得更好的显示效果，更适合在Apple iPad Retina中显示。它是一种矢量图片格式，不受分辨率、放大缩小等因素的影响。

通常在html中插入图片的方法是如下：

<img src="logo.gif" />

插入SVG图片我们则需要使用\<object>，如以下方法，需要注意的是，如果是IE 8浏览器，并不能很好的支持svg格式，因此我们还需要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，因为：

1. SVG本身有宽度和高度的设定，这是你在AI中制作原始矢量文件是的尺寸，这时我们需要用文本编辑器打开SVG图片，你会看到很多代码，不用管，只需要找到width和height，然删除即可。
2. SVG文件并不在img标签里

   解决方法
   增加定义object的max-width
   img, object { max-width: 100%; }