一、首先我们要说一下为什么要使用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://www.iswweb.com/news/solutions/999.html