如何在網頁設計中使用SVG圖片
時間：2014-07-29
來源：星翼創想(www.ym248s.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%; }
