多个SVG图形集成到一个SVG图形上

SVG:使用XML格式定义图像的可缩放矢量图形(Scalable Vector Graphics)。

优点就不多说了,下面看看怎么将多个svg图形集成到一个svg图形上。

如果使用bootstrap框架来开发前端页面的话,会发现字体图标glyphicon很好用,可以用的格式来随时调用icon,但是bootstrap的图标很少,往往很多常见图标里面没有。那么我们就想到了专门和bootstrap搭配使用的图标库Font Awesome ,这个图标库里面有很多图标,能满足基本需求,但是如果我们想个性化定制图标呢?比如说到目前为止(2016/07/28)最新的Font Awesome 4.6.3,我想找个QQ空间的图标,里面没有,想找新浪微博的图标,里面只有一个很丑的图标,怎么办呢?

  最简单的方法,首先到阿里巴巴矢量图标库 http://www.iconfont.cn/ 去下载svg格式的图形。搜qzone,选择其中一个,点击SVG下载:

多个SVG图形集成到一个SVG图形上_第1张图片

同样下载一个新浪微博的svg图形。

然后用编辑器打开图形,本文采用的是brackets编辑器,会看到如下代码:

多个SVG图形集成到一个SVG图形上_第2张图片

我们新建一个名为 weidulove.svg 的图形文件,打开,在里面添加这样的代码:

   

 

  

然后将红线内的代码粘到中间,或者你也可以仅粘贴绿线里的代码:

多个SVG图形集成到一个SVG图形上_第3张图片

微博图标是同样的做法,把id改成di="lyf-weibo"就行了,注意viewBox里面的大小是根据你下载的图形大小决定的。最终的结果是这样:

多个SVG图形集成到一个SVG图形上_第4张图片

在HTML页面的引用是这样的:

注意,如果你想自定义icon的颜色,就需要将最初的 fill="#272636" 删除,然后才能在css里运用 fill:red;进行颜色填充。

 效果图如下:

多个SVG图形集成到一个SVG图形上_第5张图片

 

          --------------------------------------------------------------  傻不拉几分割线 ----------------------------------------------------------

 

如果我们想要的图标,在网上下不到svg格式的怎么办呢?可以这么办,首先下一个叫做 Inkscape 的软件,打开软件,文件》打开,选择一个图形,然后什么都别做,直接保存为svg格式。接着,文件》导入,导入刚才保存的svg格式文件,然后路径》提取位图轮廓:

多个SVG图形集成到一个SVG图形上_第6张图片

然后保存。

用编辑器打开最后保存的文件,看到一大串代码,这时候我们只需要将代码粘到一个新的中间就行了,记得要在里写上id和viewBox:

例如:

到这里,一个最简单的集成svg就做好了。

 

转载于:https://www.cnblogs.com/Man-Dream-Necessary/p/5715843.html

你可能感兴趣的:(多个SVG图形集成到一个SVG图形上)