一、首先我們要說一下為什么要使用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文件并不在img標簽里
三、怎么在網站設計中使用SVG圖片出現問題的解決方案
解決方法
增加定義object的max-width
img, object { max-width: 100%; }
文章轉載請保留網址:http://aberdeenanguscattle.com/news/solutions/999.html