投稿
  1. 谷达鸭首页
  2. 游戏攻略

Illustrator 绘制网站图标，导出SVG档案时，要如何防止破图问题

育碧 • • 游戏攻略
梅问题-Illustrator 绘制网站图标，当导出SVG档时要如何防止破图问题

虽然说现在免费网页用的图标资源相当的多，也可涵盖目前网页常会使用到的图标，但有时遇到一些特殊需求，还是得自行绘制，而一般在绘制网页图标时，为了让图标能缩放自如，同时在任何屏幕解析下，都能保有高画质。

但有使用Illustrator绘制图标的朋友们，应该会发现到当把绘制好的图标导出SVG档，再嵌入网页中时，就会发现图标似乎破图了，为何会造成这问题，最主要的原因就在于，SVG是矢量格式，所以是采用数学的方式去记录一个节点，因此所有的区块都要是一个封闭曲线，所以未转外框时，就会造成类似破图的状况，其实那只是它把线条封闭起来了， 至于要在Illustrator要如何把绘制好的图标，导出SVG又能正常在网页中显示，现在就一块来看看啰！

Step1
首先在绘制好图标后，选择对象/路径/外框笔画。

梅问题-Illustrator 绘制网站图标，当导出SVG档时要如何防止破图问题

Step2
在转完外框笔画后，开启路径管理员，将转换的曲线交集。

梅问题-Illustrator 绘制网站图标，当导出SVG档时要如何防止破图问题

Step3
接着就可将它导出SVG图档。

梅问题-Illustrator 绘制网站图标，当导出SVG档时要如何防止破图问题

Step4
导出后，再把SVG中的码贴到HTML中，立即就可看到刚刚所绘制的图标效果啦！ 而左边是未转外框笔画，就会看到图标好像破图的感觉，因此下回当要转出SVG时，也记得转外框喔！

梅问题-Illustrator 绘制网站图标，当导出SVG档时要如何防止破图问题
赞 (0)
打赏 微信扫一扫 微信扫一扫
育碧育碧认证作者
0 0

相关推荐

发表评论

登录后才能评论