教你用AI制作一枚SVG格式的大白熊 ice bears Icon

前言

最近觉得这种流畅简洁的线型的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代码放置于标签块内再插入到HTML中
可以很方便地控制 stroke \ fill等属性进行更改颜色

image.png

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

image.png

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

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