온라인에서 SVG 코드 미리보기, 실시간 색상 변경 및 최적화 방법

ChatGPT나 Claude가 생성한 <svg> 코드 또는 SVGRepo·Figma에서 받은 아이콘 파일을 다룰 때, 코드만 보고 실제 형태나 여백을 파악하기는 어렵습니다. 브라우저에서 미리보기, 색상 교체, 코드 압축 및 고해상도 이미지 변환을 한 번에 처리해 보세요.

투명 격자 및 밝은·어두운 배경에서 실시간 확인

SVG 뷰어 및 최적화 도구에 코드를 붙여넣거나 .svg 파일을 드롭하면 viewBox 크기를 자동 인식해 화면에 렌더링합니다. 격자, 라이트, 다크 배경을 전환하며 투명도와 대비를 즉시 점검할 수 있습니다.

컬러 피커 드래그로 실시간 색상 일괄 변경

여러 <path> 태그에 흩어진 색상 코드를 일일이 찾아 수정할 필요가 없습니다.

1. SVG 뷰어 및 최적화 도구 미리보기 하단에 감지된 모든 HEX 색상이 표시됩니다.
2. 색상 칩을 클릭하고 마우스를 움직이면 캔버스의 그래픽 색상이 실시간으로 함께 바뀝니다.
3. 브랜드 색상 조합을 먼저 찾고 싶다면 컬러 피커를 함께 활용하세요.

XML 용량 압축 및 2x / 4x 고해상도 PNG 내보내기

압축 최적화 버튼을 누르면 불필요한 주석과 공백이 제거되며, CSS에 바로 붙여넣을 수 있는 Data URI 복사도 지원합니다. 발표 자료나 문서에 넣을 이미지가 필요할 때는 2x 또는 4x 배율을 선택해 선명한 PNG나 WebP로 내보내고, 추가 포맷 변환은 이미지 변환기를 사용하세요.