如何在網(wǎng)頁設(shè)計(jì)中使用SVG圖片責(zé)任編輯 :李飛    文章來源 :星翼創(chuàng)想(16qt59sf.cn)    發(fā)布時(shí)間 :2014-07-29    閱讀次數(shù):5080

一、首先我們要說一下為什么要使用SVG圖片。

一般在響應(yīng)式網(wǎng)頁設(shè)計(jì)中，用SVG來代替GIF或者PNG圖片，可以獲得更好的顯示效果，更適合在iPad Retina中顯示。它是一種矢量圖片，不受分辨率的影響。

二、其次怎么在網(wǎng)站設(shè)計(jì)中使用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文件中設(shè)置了讓圖片自動(dòng)響應(yīng)寬度

img { max-width: 100%; }

你使用的SVG圖片則無法實(shí)現(xiàn)以上的CSS，因?yàn)椋?/p>

1. SVG本身有寬度和高度的設(shè)定，這是你在AI中制作原始矢量文件是的尺寸，這時(shí)我們需要用文本編輯器打開SVG圖片，你會(huì)看到很多代碼，不用管，只需要找到width和height，然刪除即可。

2. SVG文件并不在img標(biāo)簽里
   
   三、怎么在網(wǎng)站設(shè)計(jì)中使用SVG圖片出現(xiàn)問題的解決方案

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

文章轉(zhuǎn)載請(qǐng)保留網(wǎng)址：http://16qt59sf.cn/news/solutions/999.html