使用 SVG 打造一个高质量的 ICON 系统

时间:2021-1-8 作者:admin

Add to Cart

或者是直接在服务端插入SVG,也是一个不错的选择:

Add to Cart

那使用这种方法有哪些优势呢?

### 优点1、不需要做额外的工作

直接导出SVG,然后放入到html中就可以了,就是这么简单。仅仅需要在使用之前[优化](/go/?target=https%3A%2F%2Fwww.sarasoueidan.com%2Fblog%2Fsvgo-tools%2F)一下SVG文件的就可以了。

### 优点2、没有Shadow DOM的干扰

如果使用**use**的方法来使用SVG,它会有一个**shadow boundary**

![](https://example.com/9bc1c25d54550f348ec6e2f5788dd139)

这样就会导致一些额外的问题,比如:

var playButton = document.querySelector(“#play-button-shape”);

playButton.addEventListener(“click”, function() {
alert(“test”);
});

你会发现,点击事件没有生效。那是因为shadow boundary,保证主 DOM 写的 CSS 选择器和 JavaScript 代码都不会影响到Shadow DOM,当然也保护主文档不受 shadow DOM 样式的侵袭。所以直接给**use**方式引用的SVG绑定点击事件不会生效。为了使点击事件生效,不得不把事件绑定在引用SVG元素的父级元素上,比如**#play-button**。

同样CSS也要做相应的一些修改:

.button #play-button-shape {

}

如果是直接把SVG代码插入到DOM元素中,则没有 Shadow DOM 这个问题。

### 优点3、按需所取

如果使用**SVG sprite**的方法来使用SVG,则不得不在每一个页面都包含一整个的icon,不管它们有没有在页面中使用到。而使用**inline**方法,则只需要在需要的地方引入对应的SVG就行了。

当然,这个优点也许过于牵强。你也可以说使用**SVG sprite**的文件可以被缓存起来,比如[这里](/go/?target=https%3A%2F%2Fcss-tricks.com%2Fajaxing-svg-sprite%2F)就是一种不错的方法。而**use**因为没有做任何的事情,只是引用一下SVG而已,所以不能被缓存。当**SVG sprite**是使用Ajax方式来引入的话,可以被缓存起来。即使**SVG sprite**是直接插入到html中,也可以被缓存。或者当**use**引用的是外部文件,也可以被缓存。

### 优点4、不用考虑浏览器兼容问题

现代浏览器几乎都支持SVG,就算是IE或者是Edge也可以通过下面的方法来引用SVG:
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。