SVG 색상 추출·편집기 사용법
- SVG 파일을 고르거나 끌어다 놓거나, SVG 코드를 입력칸에 붙여 넣습니다.
- 찾아 준 색 목록에서 바꾸고 싶은 색의 오른쪽 색 칸을 눌러 새 색을 고릅니다. 색 반전, 흑백, 한 가지 색으로 바꾸기, 색조 돌리기로 전체를 한 번에 바꿀 수도 있습니다.
- 미리보기를 확인하고 SVG 코드 복사, SVG 저장, 원하는 가로 크기의 PNG 저장 중에서 고릅니다.
SVG의 색은 어디에 적혀 있을까
SVG는 그림을 점과 선, 도형의 설명으로 적은 글자 파일이라서, 색도 글자로 들어 있습니다. 도형에 직접 적힌 fill과 stroke 속성, style 속성, 파일 위쪽의 style 태그 안 규칙이 대표적입니다. 이 무료 도구는 그런 자리를 모두 훑어 색을 찾아내고, 같은 색이 여러 번 나오면 한 줄로 묶어 몇 번 쓰였는지 알려 줍니다.
찾은 색을 바꾸면 원래 적힌 자리의 글자만 새 색으로 바꾸고 나머지 코드는 건드리지 않습니다. 그래서 그라디언트의 중간 색이나 선 색까지 한꺼번에 바뀌고, 도형의 모양과 위치는 그대로 남습니다. 투명도가 들어 있는 색은 새 색의 RGB 값만 쓰고 원래 투명도를 유지합니다.
아이콘 SVG는 색을 적지 않아 검정으로 그려지거나 현재 글자색을 뜻하는 currentColor를 쓰는 경우가 많습니다. 이런 파일은 색 목록이 비어 있을 수 있어서, 루트 svg에 기본 채움색을 지정하는 옵션을 마련했습니다. 한 가지 색 아이콘의 색을 바꿀 때 가장 빠른 방법입니다.
활용 아이디어와 한계
브랜드 색이 바뀌었을 때 로고 SVG의 색만 새 색으로 바꾸어 저장하면 디자인 프로그램을 열지 않고도 새 버전을 만들 수 있습니다. 색 목록을 복사해 두면 어떤 색을 어떤 색으로 바꿨는지 기록도 남습니다.
다운로드한 무료 아이콘의 색이 사이트 분위기와 맞지 않을 때 한 가지 색으로 통일해 보세요. 모두 한 색으로 버튼을 쓰면 여러 색이 섞인 아이콘도 단색 아이콘으로 바뀝니다. 흑백 버튼은 인쇄용 시안을 만들 때 쓸 수 있습니다.
색 반전은 어두운 배경용 로고를 빠르게 만들어 볼 때 편합니다. 다만 단순히 뒤집은 결과가 항상 보기 좋지는 않으므로 미리보기 배경을 어두운색으로 바꿔 확인하고, 필요하면 색 칸에서 한두 색만 다시 고르세요.
색조 돌리기는 같은 일러스트로 계절이나 행사에 맞는 여러 색 버전을 만들 때 유용합니다. 밝기와 채도는 유지하므로 도형 사이의 대비가 크게 무너지지 않습니다. 슬라이더를 움직이며 마음에 드는 위치에서 저장하세요.
이 도구는 SVG 안의 글자로 적힌 색만 바꿉니다. SVG 안에 PNG나 JPG 같은 사진이 포함된 경우 그 사진의 색은 바꾸지 못하고, CSS 변수로 색을 지정한 파일은 변수 자리를 인식하지 못합니다. 또 복잡한 필터 효과로 만든 색은 목록에 나오지 않을 수 있습니다.
PNG로 저장할 때는 가로 크기를 정하면 세로는 원본 비율에 맞춰 계산됩니다. 큰 크기로 저장해도 벡터 그림이라 깨지지 않으니 인쇄용이나 고해상도 화면용으로 넉넉하게 만들어 두세요.
여러 파일의 색을 같은 규칙으로 맞춰야 한다면 첫 파일에서 정한 색 목록을 복사해 두고 다음 파일에서 같은 색을 골라 주세요. 색 목록 복사 기능은 어떤 색을 어떻게 바꿨는지 남기는 용도로 쓰기 좋습니다. 무료로 반복해서 써도 파일이 서버에 남지 않으니 부담 없이 시험해 보세요.
색을 안전하게 바꾸는 요령
- 처음에는 원본 SVG를 다른 이름으로 보관해 둡니다.
- 색 목록에서 개수가 많은 색이 대부분 배경이나 본체 색입니다.
- 색 반전이나 색조 돌리기 후에는 어두운 배경과 밝은 배경 모두에서 확인합니다.
- 아이콘이 검정 한 색이면 기본 채움색 옵션이 가장 간단합니다.
- 출처를 모르는 SVG는 스크립트가 들어 있는지 안내 문구를 확인합니다.
자주 묻는 질문
SVG 파일은 서버로 올라가나요?
아니요. 파일은 브라우저 안에서만 읽고 처리하며 서버로 전송되지 않습니다. 미리보기는 이미지로만 그려서 SVG 안에 스크립트가 있어도 실행되지 않습니다.
어떤 색을 찾아 주나요?
fill, stroke, stop-color 같은 색 속성과 style, style 태그 안의 같은 속성을 찾습니다. #RGB, #RRGGBB, rgb(), 색 이름(red 등)이 모두 대상이고, 같은 색이 다른 표기로 여러 번 나와도 하나로 묶어 개수를 알려 줍니다.
색이 하나도 안 나옵니다.
아이콘 SVG는 색을 따로 적지 않고 기본값인 검정으로 그려지는 경우가 많습니다. 이때는 "기본 채움색 입히기"를 켜고 원하는 색을 고르면 루트 svg에 색이 지정됩니다. currentColor로 쓰인 부분도 같은 색으로 바뀝니다.
투명도가 있는 색은 어떻게 되나요?
rgba()나 8자리 hex처럼 투명도가 있는 색은 바꿀 색의 RGB만 적용하고 원래 투명도는 그대로 유지합니다. 그라디언트의 stop-color도 같은 방식으로 바뀝니다.
색조 돌리기와 색 반전은 무엇이 다른가요?
색조 돌리기는 밝기와 채도는 두고 색상만 돌려 전체 분위기를 한꺼번에 바꿉니다. 색 반전은 각 색을 반대 색으로 뒤집어 어두운 배경용 버전을 만들 때 편합니다. 어느 쪽이든 마음에 들지 않으면 원래대로 버튼으로 되돌릴 수 있습니다.
주의사항
SVG는 글자로 된 파일이라 출처를 알 수 없는 파일에는 스크립트가 들어 있을 수 있습니다. 이 도구의 미리보기는 스크립트를 실행하지 않지만, 수정한 SVG를 다른 곳에 직접 열 때는 출처를 확인하세요. 파일은 서버로 보내지 않고 브라우저에서만 처리합니다.