前言

最近觉得这种流畅简洁的线型的SVG矢量图标很好看 ,

在前端里面用的比较多的是font-face,但SVG有更多的适用性

SVG矢量图标

想弄一个大白熊的Icon出来作为一个网站的Logo,那么开始吧

这是我们的主角 , 一只北极熊 .
也是等下要用来转为Icon的底稿

we bare bears

接下来,如何把它转为一枚矢量高清的Icon呢?

先来看看最终效果图吧

最终效果图.png

开始

先打开AI,然后置入底稿:

image.png image.png

为了方便,这里可以锁定置入的图像,

bears_教程.jpg

还可以在Web网页中使用 ,
1.通过设置 background-image属性来嵌入

image.png

2.直接把svg代码放置于<svg>标签块内再插入到HTML中
可以很方便地控制 stroke \ fill等属性进行更改颜色

image.png

3. 通过设置 img标签的 src属性 来引入

image.png

参考资料
SVG系列教程：SVG简介与嵌入HTML页面的方式
SVG图标颜色文字般继承与填充

最后的最后,奉上这枚白熊的SVG代码吧~

<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 283.5 283.5" style="enable-background:new 0 0 283.5 283.5;" xml:space="preserve">
<style type="text/css">
    .st0{fill:none;stroke:#ED1C24;stroke-miterlimit:10;}
    .st1{fill:#ED1C24;}
</style>
<path class="st0" d="M43.8,283.5c-3.2-9.2-2.7-14.8-1.9-17.9c0.3-1.1,1.1-4,1.2-4.3c1.3-4.4,2.2-7.1,3.3-10.3
    c1.5-4.6,2.7-8.3,4-12.9c0.4-1.3,1.5-5.5,2.6-11c0.6-3.2,1.2-6.1,2.2-13.6c1-6.9,1.4-10.4,2.7-20.1c1.2-9.1,1.8-13.6,2.2-15.5
    c0.5-2.3,2.1-9.4,5.5-18.2c1.7-4.4,2.7-6.9,4.6-10.3c0,0,1.2-2.1,7.2-10.7c-0.7-3.7-0.6-6.7-0.3-8.8c0.4-3.3,0.7-6.8,3.1-10.1
    c1.2-1.7,3.8-4.5,3.8-4.5c-1-1.5-2.6-3.9-4.6-6.9c-6.2-9.1-7.3-10.4-8.9-13.4c-1.4-2.7-3.9-7.3-4.8-13.7
    c-1.6-10.7,2.1-18.9,2.9-20.6c2.3-4.9,3.5-8.5,6.7-9.6c1.3-0.5,3.3-0.7,4-2.2c0.4-1-0.1-1.6-0.2-3.4c0-0.7,0-1.5,0.9-5
    c0.7-2.9,1.1-4.4,1.9-6.5c0,0,1.5-4.2,5.3-9.8c0.4-0.5,0.9-1.4,1.9-1.5c0.9-0.2,1.4,0.4,2.9,0.7c0.8,0.2,1.4,0.2,2.7,0.2
    c0.7,0,3,0,5.5-0.5c1.3-0.3,3.6-0.9,7.7-3.1c5.7-3.1,6-4.4,11.3-7c2.5-1.3,4.6-2,6-2.6c1.4-0.5,3.8-1.4,10-2.9
    c1.2-0.3,6-1.5,9.6-2.2c17.7-3.5,36.1-1.5,36.1-1.5c10.9,1.2,18.2,2.7,18.2,2.7c4.3,0.9,7.2,1.8,12,1.9c2.9,0.1,7.2-0.1,8.7-0.1
    c0.3,0,0.6,0.2,0.6,0.5c0.1,1,0.3,3.2-0.1,4.9c-0.2,1-0.6,1.9-4.5,6c-1,1.1-2.4,2.6-4.1,4.2c-0.2,0.2-0.6,0.3-0.9,0.2
    c-2.2-1-3-0.9-3.3-0.6c-0.7,0.8,2,3.7,5,8.6c1.1,1.8,2.2,4,4.3,8.2c6.4,13,9.6,19.5,10.8,25.6c0.5,2.8-0.1,0.8,1.2,14.6
    c0.8,8.7,1.2,11,1,15.6c-0.1,2.5-0.4,7-1.7,12.5c-0.9,3.6-2.9,12.4-5.3,14.8c-0.2,0.2-0.9,0.9-0.9,1.7c0,1.1,1.2,1.8,1.5,2.1
    c1.2,0.8,2.5,3.4,5.2,8.4c4.9,9.4,9.4,25.9,9.4,25.9c3.4,12.3,5.1,18.4,6.4,26.3c0.6,3.8,0.8,5.8,2.2,27.8
    c2.4,36.6,1.8,29.9,2.1,32.8c0.3,3.6,1.6,18.7,1.2,27.3c0,0.6-0.4,7.8-0.3,7.8l0,0C249.7,283.5,178.5,283.5,43.8,283.5z"/>
<path class="st0" d="M92.1,123.8c-0.2,2.6-0.3,7.8,0.3,12.2c0.7,5.5,2.1,9.3,3.9,14.2c0,0,2.7,7.4,6.2,13.3c0.1,0.3-0.1-0.2,0.5,0.8
    l0.2,0.4c2.7-0.2,3.8,0.1,4.6-0.1c1.2-0.3,1.6-0.8,3-2.7c1-1.3,2.2-2.5,3.2-3.8c2.7-3.4,4.3-5.1,6.8-8.1c6-7.2,10.5-13.9,11.1-14.8
    c2.9-4.4,4.3-6.9,7.1-12.1c0.8-1.4,2-3.7,2.9-6.8c0.3-0.8,0.7-2.4,1-4.5c0.4-3.1,0.2-4.8-0.1-9c-0.2-3.6,0-2.2-0.3-8.7
    c-0.2-5.2-0.3-7.9-0.6-10.3c-0.2-2.2-0.7-5.6-1.8-10c-1.3-5-2.9-8.5-3.9-10.7c-1.3-2.9-2.6-5.9-5.1-9.5c-3.5-5.3-7.1-8.5-10.4-11.3
    c-4.7-4.1-7-6.1-9.4-6c-4,0.2-8.6,4.2-10,8.4c-0.3,0.9-0.4,1.6-1,2.4c-1.4,1.6-3.5,1.7-7.7,1.9c-4,0.2-8,0.6-12,0.7
    c-2.8,0.1-3.9,0.1-5.3,0.9c-1,0.6-2,1.5-4.1,5.3c-1.7,3-2.6,4.6-3.4,7c-0.4,1.2-2.3,6.5-2.1,14.1C66,87.3,70,94.9,72.1,98.9
    c2.7,5.1,5.5,8.4,11.2,15.1c4.9,5.9,9.4,10.4,12.5,13.6"/>
<path class="st0" d="M147.8,128.2c-0.2,2.8-0.7,6.3-2.1,10.1c-3,8.4-8.4,13.7-11.5,16.3"/>
<path class="st0" d="M88.4,159.8c-1.3,1.8-4.5,6.7-5.9,9.9c-2.4,5.3-3,9.7-3.4,12.6c-0.9,6.5-0.2,12.8,0.3,16.5
    c0.1,0.9,0.3,3.3,0.4,4.8c0.3,2.5,0.1,2,0.5,3.7c0.4,1.9,1.9,4,3.2,3.9c1.8-0.2,2.7-4.9,2.7-5.5c0.1-2.3-0.2-4-0.7-7.8
    c-0.6-4.6-0.5-8.3-0.5-10.3c0.1-4.1,0.5-3.2,0.9-8.7c0.4-6.2,0-8.4,1.8-10.5c1.1-1.3,2.1-1.4,2.5-2.7
    C90.8,163.7,89.7,161.9,88.4,159.8c-2.8-4.3-5.3-7.3-5.9-8.1c-1.9-2.5-4.1-6.5-4.8-13.1"/>
<path class="st0" d="M173.3,168.3c-0.8,0.6-2.1,1.7-3.1,3.4c-2,3.3-1.8,6.3-2.1,14.1c-0.1,2.4-0.3,4.8-0.3,7.2
    c-0.3,15.7-0.5,6.9-1,39.5c-0.2,9.8-0.3,17.5-0.3,28.2c0,8.4-0.1,16.7,0,22.4"/>
<path class="st0" d="M231.9,188.4c0.4,16.2,0.3,29.2,0,38.5c-0.2,7.2-0.3,11.1-0.7,16.8c-0.7,11.1-1.4,12.3-1.4,19.8
    c0,3.2,0.1,5.6-0.3,9.4c-0.5,4.5-1.5,8.1-2.2,10.5"/>
<path class="st0" d="M103.2,164.7c-2.2,0.5-4,2.6-5.8,6c-1.4,2.6-1.2,2.5-2.2,6.5c-0.1,0.5-0.6,1.5-0.2,2.1c0.2,0.3,0.8,0.3,1.9,0.3
    c3.4,0.1,3.8,0,4.5,0c1-0.1,1.5,0.2,1.9-0.2c0.5-0.5,0.4-1.4,0.3-1.7c-0.5-4.9,4.8-13.1,5-13.2c0,0,0,0,0,0
    C108.5,164.4,106,164.1,103.2,164.7z"/>
<path class="st0" d="M93.4,283.5c-0.8-13.8,0.3-25,1.4-31.8c0.5-2.6,1.1-6,1.6-11.2c0.4-4.4,0.7-11.1,0-19.2
    c-0.3-3.5-0.6-5.4-0.9-7.6c-0.3-2.1-0.7-8.4,0-26.1c0.1-3.1,0.3-5.6,0.3-7.3"/>
<path class="st0" d="M101.2,180.2c-1.3,20.2-0.7,28.9,0.3,32.6c0.1,0.5,0.8,2.7,1.1,5.7c0.4,3.2,0.2,5.5,0,8.5
    c-0.7,9.7-1.1,14.6-1.4,17.9c-0.4,4.5-0.5,4.7-0.7,7.1c-0.4,5.4-0.5,9.5-0.5,11.2c0,4.1,0.2,4.7,0.2,8.9c0.1,4.5-0.1,9-0.2,11.4"/>
<g>
    <path class="st1" d="M84.6,98.4c0.6-0.5,1.3-0.8,2-1.1c0.8-0.2,1.5-0.4,2.3-0.5c0.8-0.1,1.6-0.2,2.3-0.1c0.7,0.1,1.6,0.3,2.2,0.8
        l0,0.1c-0.8,0-1.5,0.1-2.2,0.1c-0.7,0-1.5-0.1-2.2-0.1c-0.7,0-1.5,0.1-2.2,0.2C86,97.9,85.3,98.1,84.6,98.4L84.6,98.4z"/>
</g>
</svg>