为什么要改 SVG 的颜色,而不是改 PNG?
在 PNG 中,颜色分布在成千上万个像素上,抗锯齿的边缘也包括在内,所以改色就意味着重新涂。而在由填充路径构成的 SVG 中,颜色只是每个形状上的一个值:改掉这个值,每条边缘都会原封不动地留在原位。所以品牌的第二套配色、深色模式版本或单色印刷版本,都应该用 SVG 来制作。

怎样给某一部分改色?
在 SVG 编辑器中打开文件。描摹得到的图片打开后,每个对象都是一个独立的图层;在对象内部,形状按包含关系层层嵌套(比如脸里面的眼睛)。
- 在图层标签页中,每一行都会以小色块显示它的颜色:单色形状显示一个色块,组则并排显示多个。
- 点击一个色块。旁边会打开一个取色器,里面有固定颜色、画作本身的颜色、Hex 输入框和吸管。
- 指向一种颜色,就能在画布上预览效果。点击即可把它应用到这一行中的所有填充(整个图层、整个组或单个形状),并算作一步撤销。按 Esc 可恢复原来的颜色。
包含多种颜色的一行,可以统一改成一种颜色,也可以只改其中一种。如果想直接在画布上选择:单击选中整个对象,双击进入对象内部,画布上方的上下文栏会显示你当前所在的位置(“绘图 › 对象 2 › 形状”)。在那里单击一下即可返回上一级。
怎样一次替换所有地方的同一种颜色?
使用颜色标签页,这里列出了画作的调色板。点击一个色块,会选中使用这种颜色的所有形状,让你看清它用在了哪里;全部改为则会在整幅画作中一次替换这种颜色,并算作一步撤销。

我们的一个示例标志,通过全局替换两种颜色完成改色。每个形状和每条边缘都没有变化,只有两个填充值不同。
同一个标签页中还有所选对象的填充和描边(带吸管,可以从画布上吸取颜色),对于矩形,还有它的圆角。位置、大小、排列、对齐和网格都在更多里。
怎样制作单色版本?
依次对每种颜色使用“全部改为”,把它们都设成同一种墨色。或者全选,然后使用所选对象的填充。之后,留意那些只靠颜色才显现出来的形状:深色脸上的白色眼睛,在两者都变成黑色后就看不见了。删除这些形状,或者给它们保留第二种颜色(比如纸张的颜色),让画面依然能看懂。
怎样检查结果?
- 对比度。文字和小细节与其所在的背景之间需要有足够的对比度。WCAG 要求普通文字的对比度至少为 4.5:1。
- 小尺寸。在编辑器中导出 32 px 和 64 px 的 PNG,并以实际尺寸查看,不要放大。
- 深色背景。为白色背景设计的标志,放在深色页面上时,通常需要把最深的颜色换成更浅的版本。
保存与导出
保存会在你的账户中保留一个新的 SVG 版本,之前的版本仍然可用。导出 PNG 会按你选择的宽度(16 到 4096 px)渲染画作。未保存的更改会作为草稿保存在你的浏览器中,下次打开同一个文件时会提示你恢复。编辑器需要账户。其中的文件(包括编辑版本)会在你账户的存储期限内保留,每个文件上都会显示具体期限。