[{"data":1,"prerenderedAt":136},["ShallowReactive",2],{"blog-post-/blog/zh-tw/how-to-view-recolor-and-optimize-svg-online":3,"related-posts-/blog/zh-tw/how-to-view-recolor-and-optimize-svg-online":124},{"id":4,"title":5,"author":6,"body":7,"category":105,"date":106,"description":107,"extension":108,"featured":109,"image":110,"meta":111,"navigation":112,"path":113,"readingTime":114,"seo":115,"stem":116,"tags":117,"tools":122,"__hash__":123},"content/blog/zh-TW/how-to-view-recolor-and-optimize-svg-online.md","如何線上預覽、即時改色與壓縮最佳化 SVG 程式碼","Anything Tools Editorial",{"type":8,"value":9,"toc":98},"minimark",[10,14,23,27,44,47,50,70,74],[11,12,5],"h1",{"id":13},"如何線上預覽即時改色與壓縮最佳化-svg-程式碼",[15,16,17,18,22],"p",{},"無論是讓 Claude、ChatGPT 產生 ",[19,20,21],"code",{},"\u003Csvg>"," 圖示程式碼，或是從 SVGRepo、Figma 匯出向量圖，單看原始 XML 標籤很難確認最終視覺效果。透過瀏覽器端的預覽與最佳化工具，可以一次完成檢視、改色、壓縮與高解析度匯出。",[24,25,26],"h2",{"id":26},"在透明網格與深淺背景中即時檢視",[15,28,29,30,33,34,39,40,43],{},"將程式碼貼入或拖曳 ",[19,31,32],{},".svg"," 檔案至 ",[35,36,38],"a",{"href":37},"/dev/svg-viewer","SVG 線上預覽與最佳化工具","，畫布會自動解析 ",[19,41,42],{},"viewBox"," 尺寸並即時顯示圖形。切換透明網格、亮色與暗色背景，能快速檢查線條對比度與透明區域是否正常。",[24,45,46],{"id":46},"拖曳取色器即時批次改色",[15,48,49],{},"不必在長篇 XML 中手動搜尋替換色碼：",[51,52,53,59,62],"ol",{},[54,55,56,58],"li",{},[35,57,38],{"href":37}," 會在預覽區下方自動列出所有偵測到的 HEX 顏色；",[54,60,61],{},"點擊色票並移動取色器游標，圖形中的對應色彩會即時同步更新；",[54,63,64,65,69],{},"若需事先挑選品牌配色，可搭配",[35,66,68],{"href":67},"/design/color-picker","顏色選擇器","。",[24,71,73],{"id":72},"壓縮-xml-體積與-2x4x-高畫質匯出","壓縮 XML 體積與 2x/4x 高畫質匯出",[15,75,76,77,81,82,85,86,89,90,93,94,69],{},"點擊",[78,79,80],"strong",{},"壓縮精簡","即可移除多餘註解、元數據與空白字元，並可直接複製為 CSS ",[19,83,84],{},"Data URI","。需要將圖示放入簡報或文件時，選擇 ",[19,87,88],{},"2x"," 或 ",[19,91,92],{},"4x"," 倍率即可匯出清晰的 PNG 或 WebP；若需更多格式轉換可搭配",[35,95,97],{"href":96},"/image/converter","圖片格式轉換器",{"title":99,"searchDepth":100,"depth":100,"links":101},"",2,[102,103,104],{"id":26,"depth":100,"text":26},{"id":46,"depth":100,"text":46},{"id":72,"depth":100,"text":73},"Developer Tools","2026-10-27T00:00:00.000Z","在瀏覽器中即時渲染 SVG 程式碼，互動式拖曳替換配色、精簡 XML 體積並匯出 2x/4x 高畫質 PNG 與 WebP。","md",false,"/blog/how-to-view-recolor-and-optimize-svg-online.png",{},true,"/blog/zh-tw/how-to-view-recolor-and-optimize-svg-online",5,{"title":5,"description":107},"blog/zh-TW/how-to-view-recolor-and-optimize-svg-online",[118,119,120,121],"SVG viewer","SVG optimizer","SVG to PNG","developer tools",[37,96,67],"gKy4GMJOageiTPf4JJo06zhcRWwt2Q1cmzga23jbSIM",[125,131],{"path":126,"title":127,"description":128,"date":129,"image":130,"category":105,"readingTime":114},"/blog/zh-tw/convert-image-to-base64-guide","圖片轉 Base64 指南：適用場景與效能取捨","了解何時適合在原型、郵件與小圖示中使用 Base64 圖片字串，以及何時應保留一般圖片檔案。","2026-08-14T00:00:00.000Z","/blog/convert-image-to-base64-guide.png",{"path":132,"title":133,"description":134,"date":106,"image":135,"category":105,"readingTime":114},"/blog/zh-tw/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",1793175848233]