给 SVG 换色

SVG 换色工具

把文件里的每一种颜色汇成一张调色板 —— 改任意一个都能立刻看到效果,也可以用 currentColor 把整件事交给 CSS。

给 SVG 换色

☞ 全程在你的浏览器中运行 —— 不会上传任何图片

将 SVG 拖放到此处

或点击浏览 —— 仅限 SVG

一张调色板,收齐所有颜色

SVG 里的颜色都藏在哪

一种颜色可能写在 fill 或 stroke 属性上,可能在内联 style 里,也可能在文件内嵌的样式表中 —— 而 Illustrator 或 Figma 导出的文件通常选最后一种。这正是在文本编辑器里手改 SVG 时,总会漏掉几个图形的原因。

这个工具把这三处,外加渐变节点和滤镜颜色,全部读出来汇成一张调色板。改动一个色块,那种颜色的每一处出现都会跟着变,不管它当初写在哪里。

三步完成

如何修改 SVG 里的颜色

01

拖入 SVG

选择一个 .svg 文件 —— 它始终留在您的设备上。

02

编辑色块

文件里的每种颜色各有一个色块,并标出使用次数。

03

下载

只有颜色被改动,图形分毫未动。

快速解答

SVG 换色常见问题

currentColor 到底做了什么?

它让图形使用所在元素的文字颜色。设成 currentColor 的图标,放进深色按钮里会变白,放进弱化文字里会变灰,既不用第二个文件,也不用多写一条 CSS。这正是图标库分发 SVG 的标准做法。

为什么渐变不能编辑?

渐变是对文件中别处某个定义的引用,本身不是颜色,直接替换等于把渐变删掉而不是换色。渐变内部各个节点的颜色是会出现在调色板里的 —— 请改那些。

调色板是空的

那说明文件本身没有自带颜色。通常意味着图稿已经设成了 currentColor,或者从文件之外的样式表继承颜色。可以用 SVG 查看器打开看看源码。

两个看起来一样的色号共用了一个色块

颜色是按实际解析结果归组的,所以 #FFF、#ffffff 和 white 算同一条。改动它会把它们全部更新,并各自保持原来的书写形式。

我的文件会被上传吗?

不会。文件的解析和重写都在您的浏览器里完成。