SVG 색상 치환기

언제 사용하나요?

디자인 시스템 아이콘이나 인라인 SVG의 브랜드 색상을 빠르게 바꿔야 할 때 사용합니다.

사용 방법

• SVG 코드를 붙여넣습니다.
• 찾을 색상과 바꿀 색상을 입력합니다.
• 치환 결과를 복사하고 미리보기를 확인합니다.

입력값 안내

원본 SVG 코드, 찾을 색상 문자열, 바꿀 색상 문자열을 입력합니다. HEX, named color, CSS 변수 문자열 등 SVG 안에 실제로 들어 있는 값을 기준으로 치환합니다.

계산·변환 기준

입력한 색상 문자열을 대소문자 구분 없이 찾아 동일한 문자열을 새 색상 값으로 치환합니다.

사용 예시

• 아이콘 색상 교체 - SVG 코드 안의 색상 값을 빠르게 바꿉니다.
• 업로드 전 이미지 준비 - 작업 결과를 미리 확인한 뒤 블로그, 쇼핑몰, SNS에 올릴 이미지 파일을 정리합니다.
• 작업 결과 비교 - 원본과 결과 이미지를 나란히 확인하며 품질과 용량, 표시 상태를 점검합니다.

예시

• fill="#14b8a6" 값을 fill="#f97316"으로 일괄 변경
• 검정 아이콘의 #000000을 브랜드 색으로 일괄 변경

주의사항

• 브라우저 캔버스를 이용해 이미지를 처리하므로 원본 메타데이터(EXIF)가 손실되거나 투명 영역 색상이 변할 수 있습니다.
• 브라우저 환경의 이미지 디코딩 용량 한계로 인해, 지나치게 해상도가 높은 대용량 원본 파일의 변환은 실패할 수 있습니다.

자주 묻는 질문

모든 색상을 자동으로 감지하나요?

현재는 사용자가 입력한 색상 문자열을 찾아 바꾸는 방식입니다.

SVG 코드가 서버로 전송되나요?

아니요. 색상 치환은 브라우저 안에서 처리되어 코드가 외부로 전송되지 않습니다.

여러 색을 한 번에 바꿀 수 있나요?

한 번에 한 색상 값을 치환하므로, 색이 여러 개면 치환을 반복해 순서대로 바꾸면 됩니다.

그라디언트 색상도 바뀌나요?

fill과 stroke 속성에 직접 지정된 색상 값을 치환합니다. gradient 정의 안의 stop 색상도 같은 값이면 함께 바뀝니다.

관련 도구

• SVG 미리보기 - SVG 코드를 브라우저에서 이미지로 렌더링해 미리봅니다.
• SVG 압축기 - SVG 문자열의 주석과 불필요한 공백을 정리합니다.
• SVG → PNG 변환기 - SVG 코드를 Canvas에 렌더링해 PNG 이미지로 저장합니다.
• SVG 배경 패턴 생성기 - 점, 줄무늬, 격자 등 반복 배경 패턴을 SVG 코드로 생성해 웹페이지 배경에 바로 사용합니다.
• 이미지 리사이즈 - 여러 이미지를 서버 업로드 없이 브라우저에서 비율을 유지하며 리사이즈합니다. JPEG·PNG·WebP 등을 지원하며 최대 가로·세로 픽셀을 지정하면 해상도가 일괄 축소됩니다.
• 이미지 크롭 - 픽셀 좌표를 입력해 이미지의 필요한 영역만 브라우저에서 잘라냅니다.