原文:http://coolketang.com/staticDesign/5a9799d317d00900358f113c.html
1. SVG是指可缩放的矢量图形,可让您设计激动人心的、高分辨率的网页图形页面。首先依次点击[文件 > 存储为]命令,打开存储为窗口。
![Illustrator互动教程-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/15d207d73cdbca2b7018e25d7074f66c.png)
2. 点击[存储为]命令,弹出[存储为]窗口。
![Illustrator互动教程-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/27ad200685e4f047113cfbfdb0b8214f.png)
3. 接着点击[保存类型]下拉框,弹出系统预设保存类型列表。
![Illustrator互动教程-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/ecfd31fd19dca733ce943d54134292d5.png)
4. 在弹出的保存类型列表中,选择所需的存储类型。
![Illustrator互动教程-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/cda80f6886deeda475dcf609177c910a.png)
5. 接着在[文件名]输入框内,输入文件的名称。
![Illustrator互动教程-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/3f4d3f53ff27c90f87f388a3bb58fb61.png)
6. 然后点击[保存]按钮,进入选项设置窗口。
![Illustrator互动教程-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/cc3dd0d7f7df50f4c3fdc94fb8dae618.png)
7. 点击[代码]按钮,可以提前预览矢量图形代码。
![Illustrator互动教程-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/c3bec0e3fa22a37eee01357bf51913f3.png)
8. 从打开的代码文档中可以看出,可缩放的矢量图形,其实是由代码来描绘的。点击关闭按钮,关闭预览窗口。
![Illustrator互动教程-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/f4658656b3ee2714a3b19510fa895eae.png)
9. 最后点击[确定]按钮,完成可缩放的矢量图形文件的输出。
![Illustrator互动教程-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/34386f6de1c31b024e21b95f38cb4684.png)
10. 使用键盘上的快捷键,离开系统界面,并切换至文档导出后所在的文件夹。
![Illustrator互动教程-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/774d8b467e15b66b48487f04c4680bd6.png)
11. 在文档上双击,使用记事本打开该文档。当然您也可以使用其它的纯文本编辑器。
![Illustrator互动教程-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/c232bbb58f35078bbd34ea095c3eaa26.png)
12. 在左上角的圆点处按下鼠标,然后滑动到右下角的圆点处,从而选择两点之间的所有代码。
![Illustrator互动教程-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/ba42c564d8de4db66de7fdec96b9a8b8.png)
13. 然后依次点击[编辑 > 复制]命令,拷贝选择的代码。
![Illustrator互动教程-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/6d1194e8088c70a69d46d2d0d6cd41f5.png)
14.
![Illustrator互动教程-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/46f406527d5c0db573984112cd4f8419.png)
15. 点击键盘上的快捷键,离开记事本界面,并切换至网页设计软件。
![Illustrator互动教程-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/0721481f5b383344e7b9a50cf10df790.png)
16. 点击网页选项,创建一个空白的网页文档。
![Illustrator互动教程-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/34af10c83b268d7eac6e37f236bd3841.png)
17. 依次点击[编辑 > 粘贴]命令,将刚刚复制的代码粘贴在相应的标签内。
![Illustrator互动教程-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/e47c7ed3445a75982da1f18c03826157.png)
18.
![Illustrator互动教程-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/9ce6e784179c994cd5be97ec83c61243.png)
19. 接着依次点击[文件 > 保存]命令,保存新建的网页文档。
![Illustrator互动教程-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/11178a80cd5248414a0008a9ed7ccfb0.png)
20.
![Illustrator互动教程-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/ef23379fff592434ffe39a39885fc3b5.png)
21. 在[文件名]输入框内,输入网页的名称。
![Illustrator互动教程-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/f83d7d7aefb6ebdb4642f9c49423a4c1.png)
22. 然后点击保存按钮,保存网页文件。
![Illustrator互动教程-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/b900b17d207a6656cf2015fd7719b42d.png)
23. 使用键盘上的快捷键,离开网页编辑界面,并切换网页所在文件夹。
![Illustrator互动教程-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/db2e2a26091ad782b9160b55bbe58b3a.png)
24. 使用鼠标双击网页文件,使用浏览器打开该网页,查看网页显示的效果,并结束本节课程。
![Illustrator互动教程-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/9a98ad2404bc0255bf72b82151a16258.png)
![Illustrator互动教程-酷课堂](https://i-blog.csdnimg.cn/blog_migrate/017a45b80b376bc7a8a651f84207fc74.png)
本文整理自:《Illustrator CC互动教程》,真正的 [手把手]教学模式,用最快的速度上手Illustrator,苹果商店App Store免费下载: https://itunes.apple.com/cn/app/id1005557436 ,或扫描本页底部的二维码。课程配套素材下载地址: 资料下载