html制作svg工具,使用Adobe Illustrator制作SVG的操作流程
上一篇文章中,我们一起研究了手动优化SVG文件的方法。然而大部分的前端设计者和开发者都是通过矢量图软件(如Adobe Illustrator)来制作制作和导出它们的SVG文件的。
在这篇文章中,我们将讲解如何设置和使用Adobe Illustrator来快速高效的压缩优化SVG图像。
设置配置参数和画板
第一部是要为你的工作选择正确的配置参数。大多数时候,我们都使用像素为单位,尤其是你想将位图合成到SVG矢量图中的时候。
如果是为了制作打印内容或某种现实生活中的需要精准尺寸的东西,你可能需要英寸、厘米或毫米为单位。在Illustrator的单位参数配置面板中设置你需要的尺寸单位。
如果你要制作响应式的SVG图像,最终的图像尺寸并不重要,重要的是你要知道你为画布选择什么尺寸,那里将成为默认的SVG视图区。如果你的SVG画板设置的太大,在显示图像的时候将会留出很大的空白区域。
如果留出的空白区域太大也有解决的方法,这里在文章的最后给出解决的方法。
SVG图像通常是用于屏幕显示的,还有CSS不支持CMYK模式,所以在选择颜色模式时要选择RGB模式。由于我们是使用XML来处理元素,所以识别对象的ID也是有意义的。
使用命名规范
记住:你在制作SVG的时候不仅仅是在制作图像,而且还是在创建数据。如果你想在以后通过CSS或javascript来操作这些数据的话,你需要某种方法来标识好你创建的数据。异常,给每一个相关的对象取一个名字是非常重要的。名称要小写,没有任何的空白符,这个名称在导出SVG文件的时候将成为元素的ID。如果你现在不为对象取名字,你也可以在后面来做这个动作,但是在编辑图像的时候取好名称是最好最不容易出错的方法。
简化
最为一个规则,我们应该使用最少的点来创建矢量图像,这将产生最佳的矢量图。可以使用 Smooth 或 Simplify 工具(对象/路径/简化)来减少矢量图的点数。
应该避免使用 filters,Adobe Illustrator 目前还没有能很好的将它们转换为SVG。同样的blending(混合)模式也没有被很好的支持。在后期你可以通过CSS来为SVG添加blend(混合)模式和 filters,
非不得已不要为元素或文本使用描边效果。一个描边效果(即使是合并背景)会绘制两次,因为它有两条边。如果你这么做了,也有补救的方法。(往下看:合并图像)
尽量保持多边形和圆形为几何对象,不要将他们转换为路径。一个多边形占用较少的文件空间,使渲染速度加快。
创建背景图像
SVG绘制的都是透明图像,它们没有一个body元素可以让你来填充颜色。如果你想在SVG文件中创建一个背景图像,你可以有三个选择:
如果SVG图像是被用来作为页面中的一张图片,你可以在CSS中为它提供一个background-color。
画一个和画板一样大小的矩形,为它填充一个颜色。然后把这一层放置到Illustrator文档的最底层,用它来作为背景层。
如果实在HTML页面直接使用SVG代码,你可以给根元素添加样式。例如下面的代码:
svg { border-radius: 50%; background: #999; }
合并图像
将图像合并到一个单一的图形同是一种非常好的做法。选择你需要合并的图像,然后在菜单中选择:对象/扩展...,参数勾选填充和描边。在图像仍然被选择的时候,打开路径选择器,选择“联集”。该操作会将旋转的图像合并为一个单一的图像,并且没有描边。
文本处理
如果你需要文本是可搜索、定制和编辑的,那么你就需要在网页中书写文字,然后通过CSS来渲染它们。
如果你需要的是可修改外形的文本,例如logo文字,你可以将你的文字修改为轮廓,(文字/创建轮廓),将文字转换为纯矢量图形。你也可以在导出SVG文件的时候选择文本转换选项。
剪裁画板
如果你发现你的画板尺寸不正确,你需要裁减掉多余的空白部分来减少SVG文件的大小。Illustrator很容易做到这一点:
1、选择所有你需要保留在SVG文件中的元素。
2、选择 对象/画板/适合图稿边界 ,即可完成画板的处理。
另外,你还可以通过画板工具来调整画板尺寸。
通过这篇文章,你将可以使用Adobe Illustrator 制作出最好的经过优化的SVG文件。
html制作svg工具,使用Adobe Illustrator制作SVG的操作流程相关推荐
- SVG基础知识 Adobe Illustrator绘制SVG
SVG svg在线编辑器 https://editor.method.ac/ 多边形 使用的是polygon标签 该标签能创建含有不少于三个边的图形. 如下 <svg xmlns="h ...
- ai 如何导出html格式,Adobe Illustrator导出SVG的设置方法
在上一篇文章中我们介绍了使用Adobe Illustrator制作SVG的操作流程,如果你按上面的步骤来创建SVG图像,现在你应该需要一种方法来将它导出为SVG文件. Adobe Illustrato ...
- 用Ai(adobe illustrator)制作文字放射效果
用Ai(adobe illustrator)制作文字放射效果 *模仿秀米编辑器公众号封面效果 只需十步! 第一步 1.首先打开AI(Adobe illustrator) *没有Ai的上网去搜,资源很多 ...
- Adobe Illustrator导出SVG的设置方法
Adobe Illustrator对SVG有着非常好的支持.不论你使用的是什么版本的Illustrator,你只需要安装下面三个简单的步骤就可以导出为SVG文件. 步骤1:保存文件 将你的文件保存为. ...
- 【矢量绘图工具】Adobe Illustrator (AI) CC 2019 for Mac 23.0
以上图片来源于互联网分享,如涉及版权问题请联系作者删除. 文章素材来源:风云社区(www.scoee.com) 下载地址:风云社区(www.scoee.com) [简介] Adobe illustra ...
- python制作小工具_利用Python制作翻译小工具
话不多说,直接上代码. Component文件: # coding:utf-8 from tkinter import * from tkinter import ttk from tkinter i ...
- 制定交叉编译工具_制作交叉编译工具链的方法总结(详细)
网上这类文章比较多,但是都不是很具体,刚好有门课结课论文要写这个,所以就总结了一下.以下的过程都是在ubuntu7.10上实际运行过的. 手工制作交叉编译工具 在制作工具开始前先要选好所需要的Binu ...
- 非常专业的图形图像处理工具-Adobe Illustrator CS5提供下载
Adobe Illustrator CS5是一款非常专业的图形图像处理工具.Adobe Illustrator CS5功能强大,应用范围广,如出版社.建筑工业等,使用它可以绘制出高精度的矢量图,是图像 ...
- SVG开发包, 20 个有用的 SVG 工具,提供更好的图像处理
20 个有用的 SVG 工具,提供更好的图像处理 SVG 现正在 Web 设计领域变得越发流行, 你可以使用 Illustrator 或者 Inkscape 来创建 SVG 图像. 但当进行 Web ...
最新文章
- python树莓派系统_树莓派系统 Raspbian Buster 发布
- 对前端Jenkins自动化部署的研究
- python开发基本流程_第一阶段:Python开发基础 day06 Python基础语法入门--流程控制(二)...
- hadoop fs命令无法使用_Hadoop从入门到入土(三)HDFS集群简单维护及JAVA客户端连接HDFS...
- 吴恩达机器学习总结二:单变量线性回归
- Mysql 脚本兼容性测试_MySQL 测试小脚本〔案例〕
- 《移动浪潮》读书笔记
- 孙鑫-MFC笔记七--文件与注册表
- mysql中kill掉所有锁表的进程
- 从SynchronizedCollection说起
- 华为ac配置radius认证服务器_华为AAA结合Radius服务器认证学习
- java快捷复制_java - Eclipse复制/粘贴整行键盘快捷键
- Flash:任意变形工具的使用
- 【Centos】查询命令
- linux网络本地发送lo性能,LINUX网络性能之管理工具三剑客
- eureka相同服务名注册多个不同服务
- R语言柯西(cauchy)分布
- 核电站问题 动态规划
- 计算机在中药材的应用,计算机在中医药中的应用
- linux怎么设置自动缩进,配置Linux下vim自动缩进等功能