SVG 단색 채우기(Fill) 일괄 색상 변경기
SVG 아이콘 코드의 fill 및 stroke 색상 어트리뷰트들을 지정한 색으로 한꺼번에 일괄 치환
도구를 불러오는 중…
🔒 이 도구는 100% 브라우저에서 처리됩니다. 업로드한 파일과 입력한 내용은 서버로 전송되지 않습니다.
외부에서 다운로드한 흑백이나 단색 SVG 아이콘 이미지 소스를 자신이 만들고 있는 프로젝트 테마 컬러(브랜드 컬러)에 맞춰 fill 및 stroke 속성 색상을 마우스 클릭 한 번으로 일괄 교체해 주는 디자이너 및 퍼블리셔용 도구입니다.
사용 방법
- 변경하고자 하는 원본 SVG 파일의 소스 코드를 복사하여 입력란에 붙여넣습니다.
- 색상 피커를 이용해 변경하고 싶은 새로운 채우기(Fill) 색상과 테두리(Stroke) 색상을 고릅니다.
- 색상 변경하기 실행 후, 실시간 적용된 이미지 미리보기와 수정된 SVG 코드를 추출하여 다운로드합니다.
자주 묻는 질문
- fill 속성이 아예 기재되어 있지 않은 도형도 있나요?
- 일부 SVG는 경로 내에 fill 속성이 아예 생략되어 있는 경우가 있습니다. 이 도구는 태그 내에 fill 속성이 명시적으로 작성된 엘리먼트를 추적하여 색상을 치환하는 안전한 구조로 동작하므로, 만약 속성이 생략되어 적용되지 않는다면 수동으로 `<path>`에 `fill="#000"` 등을 한 번 적어주신 뒤 변환을 진행하시면 완벽하게 동작합니다.