给 SVG 换色
☞ 全程在你的浏览器中运行 —— 不会上传任何图片将 SVG 拖放到此处
或点击浏览 —— 仅限 SVG
预览
给 SVG 换色
把文件里的每一种颜色汇成一张调色板 —— 改任意一个都能立刻看到效果,也可以用 currentColor 把整件事交给 CSS。
或点击浏览 —— 仅限 SVG
预览
一张调色板,收齐所有颜色
一种颜色可能写在 fill 或 stroke 属性上,可能在内联 style 里,也可能在文件内嵌的样式表中 —— 而 Illustrator 或 Figma 导出的文件通常选最后一种。这正是在文本编辑器里手改 SVG 时,总会漏掉几个图形的原因。
这个工具把这三处,外加渐变节点和滤镜颜色,全部读出来汇成一张调色板。改动一个色块,那种颜色的每一处出现都会跟着变,不管它当初写在哪里。
三步完成
选择一个 .svg 文件 —— 它始终留在您的设备上。
文件里的每种颜色各有一个色块,并标出使用次数。
只有颜色被改动,图形分毫未动。
快速解答
它让图形使用所在元素的文字颜色。设成 currentColor 的图标,放进深色按钮里会变白,放进弱化文字里会变灰,既不用第二个文件,也不用多写一条 CSS。这正是图标库分发 SVG 的标准做法。
渐变是对文件中别处某个定义的引用,本身不是颜色,直接替换等于把渐变删掉而不是换色。渐变内部各个节点的颜色是会出现在调色板里的 —— 请改那些。
那说明文件本身没有自带颜色。通常意味着图稿已经设成了 currentColor,或者从文件之外的样式表继承颜色。可以用 SVG 查看器打开看看源码。
颜色是按实际解析结果归组的,所以 #FFF、#ffffff 和 white 算同一条。改动它会把它们全部更新,并各自保持原来的书写形式。
不会。文件的解析和重写都在您的浏览器里完成。