同桌上课脱我小内内的在线观看_日本欧美一区二区三区视频_久久亚洲精品成人777大小说_最新版本68app安卓版

如何在網頁設計中使用SVG圖片責任編輯 :李飛    文章來源 :星翼創想(cctvsc.cn)    發布時間 :2014-07-29    閱讀次數:5181

一、首先我們要說一下為什么要使用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，因為：

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

2. SVG文件并不在img標簽里
   
   三、怎么在網站設計中使用SVG圖片出現問題的解決方案

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

文章轉載請保留網址：http://cctvsc.cn/news/solutions/999.html