SVG 색 바꾸기

SVG의 색을 바꾼다는 것

SVG는 텍스트입니다. 그 안 어딘가에서 도형 하나가 fill="#1f2937"이라고 적혀 있고, 아이콘이 짙은 회색인 이유는 오직 그것뿐입니다. 그 일곱 글자를 바꾸면 아이콘은 원하는 색이 됩니다.

문제는 그것을 찾는 일입니다. 일러스트레이터나 피그마에서 실제로 내보낸 파일은 색을 한군데에 모아 두지 않습니다. fill 속성, style 속성, 클래스 규칙으로 가득한 <style> 블록, 그러데이션 안의 스톱에 흩어 놓습니다. 텍스트 편집기로 열면 천 줄 가운데 중요한 열한 줄을 뒤지게 됩니다.

이 도구는 파일 전체를 읽어 쓰인 색을 모두 모아 표로 보여 줍니다. 한 행의 오른쪽 색을 바꾸면 그 색을 쓰던 도형이 모두 함께 바뀌고, 고르는 즉시 「수정 후」 그림에 반영됩니다. 돌아오는 것은 색 값만 새로워진 여러분의 파일입니다.

색을 바꾸는 두 가지 방법

• 색 단위로 — 두 그림 아래의 표가 파일에 있는 서로 다른 색 전부를 보여 줍니다. 왼쪽은 원래 색, 오른쪽은 바뀔 색입니다. 각 행은 처음에 원래 색 그대로라, 여러분이 바꾸기 전에는 아무것도 달라지지 않습니다. 하나를 바꾸면 그 색이 쓰인 곳이 한꺼번에 바뀝니다. 「파란 부분을 초록으로」나, 아이콘을 브랜드 색에 맞추는 작업에 알맞습니다.
• 도형 단위로 — 그림에서 아무 도형이나 누르면, 스무 개와 색을 공유하고 있어도 그 하나만 칠할 수 있습니다. 그 도형의 채우기와 선이 각자의 값을 갖고, 다른 것은 움직이지 않습니다.

둘은 함께 씁니다. 먼저 전체 색을 맞추고, 그다음 달라야 하는 도형 하나를 고치면 됩니다.

전부 한 가지 색으로

가장 흔한 작업입니다. 아이콘이 다섯 단계 회색으로 왔는데, 어두운 머리글에 쓸 단색 흰색이 필요하거나, 인쇄용 단색 검정이 필요하거나, 버튼들에 쓸 브랜드 색 하나가 필요한 경우입니다.

색을 고르고 적용을 누르면 파일 안의 모든 색이 그 하나가 됩니다. 채우기가 없던 도형은 그대로 채우기 없이 남으므로, 선은 선으로, 뚫린 곳은 뚫린 채로 유지됩니다.

어디에서 색을 찾는가

• 속성으로 적힌 fill과 stroke
• style 속성 안의 같은 속성들
• <style> 블록 — .cls-1 { fill: #231f20; } 같은 클래스 규칙. 일러스트레이터는 거의 모든 내보내기를 이렇게 씁니다
• 그러데이션 안의 stop-color. 그래서 그러데이션을 스톱 단위로 바꿀 수 있습니다
• 필터의 flood-color와 lighting-color

CSS가 허용하는 어떤 표기든 알아봅니다. #f00, #ff0000, rgb(255,0,0), rgba(255,0,0,.5), 그리고 red나 darkslategray 같은 이름도 마찬가지입니다. 투명도는 유지되므로, 반투명한 도형은 새 색에서도 반투명하게 남습니다.

건드리지 않는 것

• 그러데이션과 패턴 자체. 그러데이션 안의 스톱은 바꿀 수 있지만, 그러데이션 자체를 단색으로 만들지는 않습니다. url(#pattern)으로 채운 도형도 그대로 둡니다.
• 끼워 넣은 비트맵. SVG 안에 붙여 넣은 PNG는 사진이지 도형이 아니며, 바꿀 채우기가 없습니다. 그런 경우에는 이미지 색 추출이나 이미지 편집 프로그램을 쓰세요.
• 색이 아닌 모든 것. 불투명도, 선 두께, 변형, 텍스트는 들어간 그대로 나옵니다.

업로드는 없습니다

파일은 여러분의 브라우저 안에서 읽히고, 색이 바뀌고, 다시 쓰입니다. 서버에 닿는 일이 없습니다. 아직 공개하지 않은 로고, 고객의 브랜드 마크, 비밀 유지 계약이 걸린 작업물이라면 바로 이 점이 중요합니다.

업로드 대기도 용량 제한도 없고, 페이지만 열렸다면 오프라인에서도 계속 동작합니다.

「아무것도 바꾸지 않는다」에 일부러 둔 예외가 하나 있습니다. 파일에 <script> 블록이 있으면 제거하고, 화면에서 그 사실을 알려 드립니다. 그림이 실행 가능한 코드를 지니고 다닐 이유가 없고, 이 도구는 보여 드리려면 파일을 그려야 하기 때문입니다.

이럴 때 씁니다

• 디자인 프로그램을 열지 않고 아이콘 세트를 브랜드 색으로 바꿀 때
• 로고를 어두운 머리글용 단색 흰색이나 인쇄용 단색 검정으로 만들 때
• 색이 잘못 나온 그 도형 하나를 고칠 때
• 같은 그림의 밝은 버전과 어두운 버전을 만들 때
• 그러데이션을 다시 만들지 않고 스톱 색만 바꿀 때
• 고르는 대로 그림이 바뀌니, 색을 빠르게 시험해 볼 때

알아두면 좋은 점

• 두 미리보기는 같은 배율로 그린 수정 전과 수정 후입니다. 오른쪽은 실제 문서이므로, 보이는 그대로가 내려받아집니다
• 도형 하나에 대한 변경은, 그것으로 충분하면 평범한 fill·stroke 속성으로 적고, 파일 안의 <style> 규칙이 이를 눌러 버릴 때만 인라인 style로 적습니다. 짐작하지 않고 실제로 어떻게 됐는지 확인합니다
• 색은 값으로 묶이므로 #FFF, #ffffff, white는 한 행입니다
• 행마다 개별 되돌리기가 있고, 모든 색 되돌리기를 누르면 파일 전체가 처음 상태로 돌아갑니다
• 색이 수백 가지인 파일은 거의 틀림없이 사진을 따라 그린 것입니다. 많이 쓰인 것만 나열합니다
• 결과 주위의 빈 공간을 잘라내려면 SVG 여백 자르기를 쓰세요
• 결과를 PNG로 만들려면 SVG를 PNG로를 쓰세요

사용 방법

• 클릭해서 올리기를 누르거나, SVG를 상자에 끌어다 놓으세요
• 파일 안의 모든 색이 표의 행으로 나타나며, 왼쪽이 원래 색입니다
• 오른쪽 색을 정하면(고르거나 16진수를 입력하면) 그 색이 쓰인 모든 곳이 바뀝니다
• 아니면 「수정 후」 그림 속 도형을 눌러 그것만 칠하세요
• 단색 버전이 필요하면 전부 한 가지 색으로를 쓰세요
• SVG 내려받기를 누르거나, SVG 코드 복사로 페이지에 바로 붙여 넣으세요

관련 도구

• SVG 여백 자르기 — 결과 주위의 빈 공간 잘라내기
• SVG를 PNG로 — 색을 바꾼 SVG를 비트맵으로
• SVG를 JPG로 — SVG를 평범한 이미지로
• 이미지를 SVG로 — 로고를 먼저 벡터 패스로 따라 그리기
• 이미지에서 색 팔레트 뽑기 — 사진에서 팔레트 추출
• 색 대비 검사 — 고른 색이 읽기 쉬운지 확인