[{"data":1,"prerenderedAt":141},["ShallowReactive",2],{"blog-post-/blog/ko-kr/how-to-view-recolor-and-optimize-svg-online":3,"related-posts-/blog/ko-kr/how-to-view-recolor-and-optimize-svg-online":129},{"id":4,"title":5,"author":6,"body":7,"category":110,"date":111,"description":112,"extension":113,"featured":114,"image":115,"meta":116,"navigation":117,"path":118,"readingTime":119,"seo":120,"stem":121,"tags":122,"tools":127,"__hash__":128},"content/blog/ko-KR/how-to-view-recolor-and-optimize-svg-online.md","온라인에서 SVG 코드 미리보기, 실시간 색상 변경 및 최적화 방법","Anything Tools Editorial",{"type":8,"value":9,"toc":103},"minimark",[10,14,23,28,44,48,55,75,79],[11,12,5],"h1",{"id":13},"온라인에서-svg-코드-미리보기-실시간-색상-변경-및-최적화-방법",[15,16,17,18,22],"p",{},"ChatGPT나 Claude가 생성한 ",[19,20,21],"code",{},"\u003Csvg>"," 코드 또는 SVGRepo·Figma에서 받은 아이콘 파일을 다룰 때, 코드만 보고 실제 형태나 여백을 파악하기는 어렵습니다. 브라우저에서 미리보기, 색상 교체, 코드 압축 및 고해상도 이미지 변환을 한 번에 처리해 보세요.",[24,25,27],"h2",{"id":26},"투명-격자-및-밝은어두운-배경에서-실시간-확인","투명 격자 및 밝은·어두운 배경에서 실시간 확인",[15,29,30,35,36,39,40,43],{},[31,32,34],"a",{"href":33},"/dev/svg-viewer","SVG 뷰어 및 최적화 도구","에 코드를 붙여넣거나 ",[19,37,38],{},".svg"," 파일을 드롭하면 ",[19,41,42],{},"viewBox"," 크기를 자동 인식해 화면에 렌더링합니다. 격자, 라이트, 다크 배경을 전환하며 투명도와 대비를 즉시 점검할 수 있습니다.",[24,45,47],{"id":46},"컬러-피커-드래그로-실시간-색상-일괄-변경","컬러 피커 드래그로 실시간 색상 일괄 변경",[15,49,50,51,54],{},"여러 ",[19,52,53],{},"\u003Cpath>"," 태그에 흩어진 색상 코드를 일일이 찾아 수정할 필요가 없습니다.",[56,57,58,64,67],"ol",{},[59,60,61,63],"li",{},[31,62,34],{"href":33}," 미리보기 하단에 감지된 모든 HEX 색상이 표시됩니다.",[59,65,66],{},"색상 칩을 클릭하고 마우스를 움직이면 캔버스의 그래픽 색상이 실시간으로 함께 바뀝니다.",[59,68,69,70,74],{},"브랜드 색상 조합을 먼저 찾고 싶다면 ",[31,71,73],{"href":72},"/design/color-picker","컬러 피커","를 함께 활용하세요.",[24,76,78],{"id":77},"xml-용량-압축-및-2x-4x-고해상도-png-내보내기","XML 용량 압축 및 2x / 4x 고해상도 PNG 내보내기",[15,80,81,85,86,89,90,93,94,97,98,102],{},[82,83,84],"strong",{},"압축 최적화"," 버튼을 누르면 불필요한 주석과 공백이 제거되며, CSS에 바로 붙여넣을 수 있는 ",[19,87,88],{},"Data URI"," 복사도 지원합니다. 발표 자료나 문서에 넣을 이미지가 필요할 때는 ",[19,91,92],{},"2x"," 또는 ",[19,95,96],{},"4x"," 배율을 선택해 선명한 PNG나 WebP로 내보내고, 추가 포맷 변환은 ",[31,99,101],{"href":100},"/image/converter","이미지 변환기","를 사용하세요.",{"title":104,"searchDepth":105,"depth":105,"links":106},"",2,[107,108,109],{"id":26,"depth":105,"text":27},{"id":46,"depth":105,"text":47},{"id":77,"depth":105,"text":78},"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/ko-kr/how-to-view-recolor-and-optimize-svg-online",5,{"title":5,"description":112},"blog/ko-KR/how-to-view-recolor-and-optimize-svg-online",[123,124,125,126],"SVG viewer","SVG optimizer","SVG to PNG","developer tools",[33,100,72],"vYORDENWylOyGH6J5i0w-xvjA2E_H1f7y_lJ6LJ9z8I",[130,136],{"path":131,"title":132,"description":133,"date":134,"image":135,"category":110,"readingTime":119},"/blog/ko-kr/convert-image-to-base64-guide","이미지를 Base64로 변환하기: 장점과 단점 가이드","프로토타입, 이메일, 작은 아이콘에서 Base64 이미지 문자열이 유용한 경우와 일반 이미지 파일이 더 나은 경우를 알아봅니다.","2026-08-14T00:00:00.000Z","/blog/convert-image-to-base64-guide.png",{"path":137,"title":138,"description":139,"date":111,"image":140,"category":110,"readingTime":119},"/blog/ko-kr/how-to-convert-chatgpt-session-json-safely","브라우저에서 ChatGPT 세션 JSON을 안전하게 변환하는 방법","토큰 유출 걱정 없이 브라우저 로컬 환경에서 ChatGPT auth session JSON을 Sub2API, CPA, Cockpit, 9Router, Codex, AxonHub 형식으로 일괄 변환하세요.","/blog/how-to-convert-chatgpt-session-json-safely.png",1793175939017]