도구 소개
SVG 색상 변경은 아이콘, 로고와 일러스트의 색을 바꾸기에 좋습니다. 자주 쓰이는 색상 선언과 사용 횟수를 보여 주며, 바꿀 색상을 선택하고 정적 미리보기를 확인한 뒤 새 SVG를 다운로드할 수 있습니다.
사용 방법
- SVG 파일을 선택하거나 소스를 붙여 넣고 색상 읽기를 누르세요.
- 원래 색상, 색상표와 사용 횟수를 확인하고 바꾸려는 색상의 새 값을 지정하세요.
- 색상 변경을 적용하고 채우기, 윤곽선과 그라디언트를 확인하세요.
- 색상을 확인한 뒤 복사하거나 edited-colors.svg로 다운로드하세요.
주요 기능
- fill, stroke, stop-color, flood-color와 lighting-color에 지정된 일반적인 색상을 인식합니다.
- 16진수, rgb, rgba와 일반적인 색상 이름을 지원하며 속성과 일반적인 스타일 선언을 읽습니다.
- 색상 선언만 바꾸며 본문, 요소 ID나 링크에 등장하는 같은 텍스트를 색상으로 바꾸지 않습니다.
일반 색상처럼 바꾸지 않는 값
- none은 색을 칠하지 않음을, currentColor는 현재 텍스트 색상을 사용함을 뜻합니다. url(#gradient)는 내부 그라디언트나 패턴을 참조합니다. 이러한 값은 일반 색상으로 취급해 바꾸지 않습니다.
- 그라디언트는 각 색상 지점의 값을 바꿔야 합니다. 복잡한 상속이나 지원되지 않는 스타일로 지정된 색상은 목록에 모두 반영되지 않을 수 있습니다.
- 기본 다운로드는 주석, 메타데이터 등 원본에서 수정하지 않은 내용을 유지하므로 스크립트나 외부 참조도 남을 수 있습니다. 미리보기에서는 이를 제거하며 안전 처리된 SVG를 별도로 다운로드할 수도 있습니다.
SVG 안전 안내
미리보기에는 안전하게 처리한 정적 사본을 사용합니다. 스크립트, 클릭 이벤트와 애니메이션을 실행하지 않으며 외부 이미지, 글꼴과 스타일도 불러오지 않습니다. 외부 참조, 삽입된 웹페이지와 지원되지 않는 내용은 제거되므로 원본과 다르게 보일 수 있습니다. DOCTYPE이나 사용자 정의 엔티티가 포함된 문서는 지원하지 않습니다.
SVG 파일 또는 UTF-8 소스는 최대 2 MiB, 노드는 요소와 텍스트를 포함해 최대 20,000개, 중첩 깊이는 최대 96단계까지 허용됩니다. 내용이 너무 크거나 구조가 복잡하면 파일을 단순하게 정리한 뒤 사용하세요.
개인정보 보호
SVG 내용은 사용자의 브라우저에서만 처리되며 서버에 업로드되지 않습니다.
입력과 결과는 자동으로 저장되지 않습니다. 지우거나 페이지를 떠나기 전에 필요한 파일을 다운로드하고 원본 사본도 보관하세요.
자주 묻는 질문
일부 SVG 색상을 바로 바꿀 수 없는 이유는 무엇인가요?
일부 모양은 상속, 현재 텍스트 색상, 그라디언트나 복잡한 스타일로 결정되므로 직접 바꿀 고정 색상이 없을 수 있습니다. 먼저 색상 목록과 미리보기를 확인하세요.
currentColor란 무엇인가요?
특정한 16진수 색상이 아니라 현재 텍스트 색상을 그대로 사용한다는 뜻입니다. 따라서 일반 색상값으로 바꾸지 않습니다.
url(#gradient)는 왜 일반 색상이 아닌가요?
SVG 내부에 정의된 그라디언트나 패턴을 가리키기 때문입니다. 색을 바꾸려면 그라디언트의 개별 색상 지점을 조정하세요.
색상을 바꾸면 SVG 구조도 바뀌나요?
실제 색상 선언을 바꾸며 경로를 픽셀 이미지로 변환하지 않습니다. 기본 다운로드는 수정하지 않은 내용을 유지합니다. 안전 처리된 버전을 선택하면 지원하지 않는 실행 가능한 내용과 외부 참조가 제거됩니다.