2022-03-21  点击量: 94

AI制作SVG图标注意事项

背景:新手小白制作svg图标的经验。高手请绕行,感谢。

1.AI新建文档

配置文件web

宽度和高度建议相同,图标我们来创建正方形的。

2.在画板中制作图标

图形:建立复合路径

文字:创建轮廓

3.保存为svg格式

勾选使用画板,全部

4.设置输出参数

配置文件:svg 1.1

文字:svg

子集化:仅使用的字形

图像位置:嵌入

更多选项:

CSS属性:演示文稿属性

输出较少<tspan>元素

5.编辑保存的svg文件源码

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<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"
width="160px" height="160px" viewBox="0 0 160 160" enable-background="new 0 0 160 160" xml:space="preserve">

修改为

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 160 160">

 

6.浏览器打开图标查看效果

 

 

至此结束。

评论已关闭!