[{"data":1,"prerenderedAt":162},["ShallowReactive",2],{"blog-post-/blog/zh-cn/how-to-view-recolor-and-optimize-svg-online":3,"related-posts-/blog/zh-cn/how-to-view-recolor-and-optimize-svg-online":150},{"id":4,"title":5,"author":6,"body":7,"category":131,"date":132,"description":133,"extension":134,"featured":135,"image":136,"meta":137,"navigation":138,"path":139,"readingTime":140,"seo":141,"stem":142,"tags":143,"tools":148,"__hash__":149},"content/blog/zh-CN/how-to-view-recolor-and-optimize-svg-online.md","如何在线预览、一键改色与压缩优化 SVG 代码","Anything Tools Editorial",{"type":8,"value":9,"toc":124},"minimark",[10,14,43,47,59,63,69,95,99],[11,12,5],"h1",{"id":13},"如何在线预览一键改色与压缩优化-svg-代码",[15,16,17,18,22,23,26,27,30,31,34,35,38,39,42],"p",{},"无论是让 Claude、ChatGPT 直接编写 ",[19,20,21],"code",{},"\u003Csvg>"," 图标代码，还是从 SVGRepo、Iconfont、Figma 下载矢量素材，只看 XML 源码很难直观判断实际渲染效果。很多图标只写了 ",[19,24,25],{},"viewBox"," 而省略了 ",[19,28,29],{},"width","/",[19,32,33],{},"height","，或者把颜色散落在几十个 ",[19,36,37],{},"\u003Cpath>"," 的 ",[19,40,41],{},"style"," 属性里。使用在线预览与优化工作台，可以在几秒钟内完成检视、改色与高清导出。",[44,45,46],"h2",{"id":46},"在透明网格与深浅背景中实时预览",[15,48,49,50,55,56,58],{},"将 SVG 代码粘贴或拖入 ",[51,52,54],"a",{"href":53},"/dev/svg-viewer","SVG 在线预览与优化器","，右侧画布会立即解析 ",[19,57,25],{}," 并渲染图形。通过切换“透明网格”、“亮色”与“暗色”背景，可以一眼发现白色线条在白底上隐形、或透明通道未生效等常见问题。",[44,60,62],{"id":61},"无需手动查找代码拖拽色盘实时改色","无需手动查找代码，拖拽色盘实时改色",[15,64,65,66,68],{},"复杂插画往往在十几个节点中重复使用了同一个十六进制色值。在 ",[51,67,54],{"href":53}," 中：",[70,71,72,76,87],"ol",{},[73,74,75],"li",{},"预览窗底部会自动提取并列出当前图形包含的所有 HEX 颜色；",[73,77,78,79,82,83,86],{},"点击任意色块并按住移动取色器光标，画布中的对应填充（",[19,80,81],{},"fill","）与描边（",[19,84,85],{},"stroke","）会以 60 帧实时同步变色；",[73,88,89,90,94],{},"如果想先调配无障碍对比度达标的品牌色，可搭配",[51,91,93],{"href":92},"/design/color-picker","颜色选择器","使用。",[44,96,98],{"id":97},"一键精简-xml-体积与多倍率-png-导出","一键精简 XML 体积与多倍率 PNG 导出",[15,100,101,102,106,107,110,111,114,115,118,119,123],{},"将图标嵌入前端项目前，点击顶部工具栏的",[103,104,105],"strong",{},"压缩精简","即可剥离多余的 XML 注释、编辑器元数据与空白符，也可一键复制为可直接写进 CSS 的 ",[19,108,109],{},"Data URI","。若需要将矢量图放入 PPT 或飞书文档，选择 ",[19,112,113],{},"2x"," 或 ",[19,116,117],{},"4x"," 超采样倍率即可导出边缘锐利的高清 PNG 或 WebP；多图批量转格式则可配合",[51,120,122],{"href":121},"/image/converter","图片格式转换器","。",{"title":125,"searchDepth":126,"depth":126,"links":127},"",2,[128,129,130],{"id":46,"depth":126,"text":46},{"id":61,"depth":126,"text":62},{"id":97,"depth":126,"text":98},"Developer Tools","2026-10-27T00:00:00.000Z","在浏览器中实时渲染 SVG 代码，解决无宽高属性不显示问题，交互式拖拽替换配色、精简 XML 体积并导出 2x/4x 高清 PNG。","md",false,"/blog/how-to-view-recolor-and-optimize-svg-online.png",{},true,"/blog/zh-cn/how-to-view-recolor-and-optimize-svg-online",5,{"title":5,"description":133},"blog/zh-CN/how-to-view-recolor-and-optimize-svg-online",[144,145,146,147],"SVG viewer","SVG optimizer","SVG to PNG","developer tools",[53,121,92],"ca67UjS5fpNX32Y8tHvBs2uR52A_3FZIHF9xKMnCqlA",[151,157],{"path":152,"title":153,"description":154,"date":155,"image":156,"category":131,"readingTime":140},"/blog/zh-cn/convert-image-to-base64-guide","图片转 Base64 指南：适用场景与性能取舍","了解何时适合在原型、邮件和小图标中使用 Base64 图片字符串，以及何时应该保留普通图片文件。","2026-08-14T00:00:00.000Z","/blog/convert-image-to-base64-guide.png",{"path":158,"title":159,"description":160,"date":132,"image":161,"category":131,"readingTime":140},"/blog/zh-cn/how-to-convert-chatgpt-session-json-safely","如何在浏览器中安全转换 ChatGPT Session JSON 格式","纯前端本地将 ChatGPT auth session JSON 批量转换为 Sub2API、CPA、Cockpit、9Router、Codex 与 AxonHub 格式，保护 Token 隐私安全。","/blog/how-to-convert-chatgpt-session-json-safely.png",1793175816150]