如何使用 SVG 图片格式文件
发布在SVG开发与应用2016年9月8日view:1179svg
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

SVG 意为可缩放矢量图形(Scalable Vector Graphics)。是使用XML格式定义的图像。SVG主要支持三种图形对象,为矢量图形(路径)、图片、文字这三种对象。

最近做了一个关于SVG的应用的技术分享网站svgtrick.com,会同步一些文章到这里来,更多的可以去网站看看。

在实际开发中,如何来使用SVG呢?主要有以下几种方法:

在img标签里应用SVG图片

当然你也可以直接在img标签里,导入你的SVG文件。

<img src="kiwi.svg" alt="Kiwi standing on oval">

浏览器的支持情况

当然我们在用一种技术的时候,必须要考虑浏览器的支持情况,针对不支持SVG的浏览器要有一个备选方案。这里有几篇文章里提到了关于SVG图片降级处理的一些方案,可以去看看different,workshop以及I’ve done

一种处理方法是,我们可以用Modernizr来检测浏览器是否支持SVG,从而采取降级处理,如下:

if (!Modernizr.svg) {
  $(".logo img").attr("src", "images/logo.png");
}

David Bushell有一个更简单的方法,如果你对在HTML中混入javascript代码不抵触的话,可以这样做,确实很简单。

<img src="image.svg" onerror="this.onerror=null; this.src='image.png'">

SVGeezy这个库非常有用,专门用于SVG的降级处理。

使用SVG作为背景图片

定义SVG图片为背景图片也很简单,直接在CSS里定义背景图片就可以了。

<a href="/" class="logo">
  Kiwi Corp
</a>

.logo {
  display: block;
  text-indent: -9999px;
  width: 100px;
  height: 82px;
  background: url(kiwi.svg);
  background-size: 100px 82px;
}

这里的CSS我们用了一个很常见的CSS技巧,以图换字,用图片来代替文字。你如果不知道实际SVG图片的大小,你可以使用background-size来定义背景图片的大小。

浏览器支持度

使用CSS背景图技术来定义SVG为背景图片,可以去这里看看支持度,IE8以上才支持,安卓2.3以上才支持。

对于检测浏览器是否支持一些特性,Modernizr就可以帮到我们啦。例如对于SVG,如果浏览器不支持,那么Modernizr就会生成一个no-svg的类,这样我们就可以很容易处理不支持SVG的情况了,如下:

.main-header {
  background: url(logo.svg) no-repeat top left;
  background-size: contain;
}

.no-svg .main-header {
  background-image: url(logo.png);
}

另外一些对SVG采用渐进增强也非常不错,例如浏览器对SVG和多重背景的支持非常相似,所以,如果一个浏览器支持多重背景,那么它也支持SVG图片,那么如果浏览器支持SVG,SVG图片就会代替上一个背景图片。如下:

body {
  background: url(fallback.png);
  background-image: url(image.svg), none;
}

不过用img标签和背景图片有一个缺陷就是,你不能控制图片内容的表现形式。不过这对于SVG来说不是问题。继续往下读。

使用SVG节点来插入SVG

还有一种方法就是直接把svg代码插入到html文件中,使用你喜欢的编辑器打开svg文件,就可以得到SVG图片的代码如下所示,然后把它插入到html文件中就可以了。

如:

<body>

    <svg>
        <ellipse cx="100" cy="50" rx="100" ry="50" fill="rgb(234,234,234)" stroke-width="1" stroke="rgb(0,0,0)"/>
    </svg>

</body>

这种插入图片的方法还是不错的,因为它是文本节点存在的,并没有外链图片。所以可以节省HTTP请求,就像使用Data URL的优点一样。当然用这种方式来插入SVG图片,也有一个缺点,就是会使HTML文档的代码变得非常庞大,难以缓存。

评论
发表评论
2个月前

从css trick里扒出来一篇文章说原创 :)

10个月前
赞了此文章!
WRITTEN BY
聆木听风
前端攻城师~~~!
TA的新浪微博
PUBLISHED IN
SVG开发与应用

专注于分享 svg 使用经验、技巧、以及教程的网站。

当然,这里不止于SVG,对于SVG动效设计的最佳搭档的GreenSock、Snapsvg、Mojs等动效js也会进行涉猎。

投资在学习上的时间总有一天会回赠给你自己 !

我的收藏