SVG 색상 변경과 흔한 문제 해결 방법

SVG 파일 색상을 바꾸는 실제 방법은 세 가지이며 모두 무료입니다. 온라인 SVG 색상 변경 도구에 업로드해 교체할 견본을 클릭하세요. Inkscape 같은 벡터 앱에서 도형을 선택하고 새 채우기 색상을 고르세요. 또는 SVG는 텍스트이므로 텍스트 편집기에서 파일을 열고 16진수 색상 코드를 바꾸세요. 벡터 색상 변경은 무손실입니다. 픽셀을 다시 칠하는 것이 아니라 명령을 다시 쓰므로 흐려지거나 품질이 떨어지지 않습니다.

어떤 방법을 쓸지는 파일 내부에 따라 다릅니다. SVG 색상이 바뀌지 않는 이유도 거의 항상 사용 중인 도구가 아니라 파일 내부에 있습니다. 먼저 세 방법을 설명하고, 이후 색상 변경이 적용되지 않는 흔한 원인 여섯 가지를 진단합니다. 어떤 색상 도구로도 해결할 수 없는 원인도 포함됩니다.

SVG는 색상을 어디에 저장하나요?

SVG 파일은 텍스트로 작성된 도형 목록입니다. MDN의 SVG 채우기와 스트로크 안내에서 설명하듯 각 도형에는 내부의 fill과 윤곽의 stroke가 있을 수 있습니다. 한 곳에서 바꿀 수 있는 단일 ‘이미지 색상’은 없습니다. 화면에서 단색으로 보이는 디자인은 깔끔한 경로 하나일 수도, 같은 채우기를 공유하는 별도 경로 40개일 수도 있습니다.

핵심은 이것입니다. 아래 색상 변경 방법은 모두 도형을 찾고 fill이나 stroke를 다시 쓰는 서로 다른 방법입니다. 파일별 결과 차이가 큰 이유도 같습니다. 도형이 적고 깔끔할수록 색상 변경이 쉽습니다.

방법 선택하기

방법 1: 온라인 SVG 색상 변경 도구

1. 브라우저에서 무료 SVG 색상 도구를 열고 파일을 업로드하세요. 좋은 도구는 붙여 넣은 SVG 코드도 받습니다.
2. 도구가 찾은 색상을 보여 줍니다. 유용한 도구는 같은 채우기를 묶으므로 수십 개 도형에 쓰인 ‘파랑’도 견본 하나로 표시됩니다.
3. 견본을 클릭하고 대체 색상을 선택한 뒤 미리보기를 보세요.
4. 결과를 다운로드하고 브라우저 탭에서 한 번 열어 확인하세요.

대부분의 경우 대부분의 사용자에게 적합한 방법입니다. 실제 작업에 쓰기 전에 스트로크 색상도 표시하는지, 그라디언트를 어떻게 처리하는지 확인하세요. 화면에 보이는 것보다 색상 수가 적게 표시된다면 일부가 그라디언트나 내장 이미지이며, 단순한 견본 교체로는 바꿀 수 없습니다.

방법 2: 벡터 디자인 앱

Inkscape는 무료이며 이 작업에 필요한 모든 기능을 제공합니다. Illustrator와 Figma도 같은 방식입니다.

1. SVG를 열고 바꿀 부분을 클릭하세요. 디자인 전체가 한 덩어리로 선택되면 그룹입니다. 두 번 클릭해 그룹 안으로 들어가거나 그룹을 해제하세요.
2. Inkscape의 Fill & Stroke 패널 또는 Illustrator와 Figma의 채우기 견본에서 채우기를 바꾸세요.
3. 눈에 보이는 한 색상이 여러 도형으로 나뉘어 있다면 하나씩 클릭하지 마세요. Inkscape에서 도형을 오른쪽 클릭하고 Select Same → Fill Color를 사용하거나, Illustrator의 Select → Same → Fill Color를 사용하세요. 같은 채우기를 공유하는 모든 도형이 선택되므로 한 번에 색상을 바꿀 수 있습니다.
4. Plain SVG(일반 SVG) 형식으로 내보내거나 저장하세요.

디자인 앱에서는 색상 변경을 넘어 도형 이동과 곡선 수정도 할 수 있습니다. 더 넓은 도구 사용법은 SVG 편집 안내를 보세요.

방법 3: 텍스트 편집기

SVG는 텍스트이므로 메모장, TextEdit, VS Code 등 어떤 편집기도 됩니다.

1. .svg 파일을 열고 fill=를 검색하세요.
2. 예를 들어 fill="#1e3a5f"를 fill="#c2410c"로 바꾸고 저장하세요.
3. 브라우저 탭에서 파일을 새로 고쳐 결과를 확인하세요.

주의할 점은 세 가지입니다. 색상은 16진수뿐 아니라 fill="black"처럼 이름으로도 작성됩니다. 윤곽선은 fill=가 아니라 stroke=에 있습니다. 또 많은 내보낸 파일은 도형에 직접 색상을 두지 않고 클래스를 사용합니다. 실제 16진수 값은 위쪽의 <style> 블록에 .st0{fill:#1e3a5f;}처럼 있습니다. 스타일 블록의 값을 수정하면 해당 클래스의 모든 도형에 적용됩니다.

단색 아이콘에서는 찾기와 바꾸기 한 번으로 끝나므로 특히 유용하며, 폴더 전체 일괄 작업에도 좋습니다. 40색 일러스트에는 느린 방법입니다.

웹사이트의 SVG인 경우

CSS로 SVG 색상을 바꿀 수 있나요? 가장 직접적인 방법은 HTML에 인라인 SVG 마크업을 넣는 것입니다. 그러면 fill이 CSS 속성으로 작동하고, 채우기를 currentColor로 설정하면 아이콘이 주변 텍스트 색상을 상속합니다. 외부 <img>로 불러온 SVG는 이미지로 처리됩니다. MDN은 이 방식에서 JavaScript로 SVG 구조를 조작할 수 없다고 설명하며, 페이지 스타일도 내부 경로를 직접 선택하지 못합니다.

인라인으로 넣을 수 없다면 위 파일 편집 방법으로 돌아가 SVG 내부 색상을 바꾸고 다시 불러오세요. 전달 방식을 선택할 때는 같은 이미지와 페이지 CSS 시험으로 인라인 SVG와 외부 이미지를 비교하세요.

단색 인터페이스 실루엣에는 SVG CSS 마스크와 투명 아이콘 도형이라는 다른 방법도 있습니다. 원본 이미지의 경로 색상은 유지하면서 CSS로 아이콘 요소를 칠합니다.

되돌릴 수 있는 색상 효과가 필요하다면 feColorMatrix와 직접 채우기 편집을 비교하세요. 필터는 원본 색상 설정을 유지한 채 표시되는 색상만 바꾸므로 편집 가능한 이미지 전달에서 중요합니다.

SVG 색상이 바뀌지 않는 이유

튜토리얼에서 생략하지만 실제 색상 변경이 가장 많이 실패하는 부분입니다. 표를 순서대로 확인하세요.

두 경우는 자세히 살펴볼 필요가 있습니다.

예상하지 못한 배경 상자

일부 SVG에는 흰 페이지에서 보이지 않는 전체 크기의 배경 사각형이 있습니다. ‘전체’ 색상을 바꾸면 디자인 뒤에 색상 덩어리가 나타납니다. 일부 앱은 클릭할 때 이 상자도 선택합니다. 일반 도형이므로 선택해 삭제하거나 원하는 색상을 지정하세요. 다른 소프트웨어에서 흰 상자가 나타나는 문제는 관련은 있지만 다르며, 투명 배경 유지 안내에서 설명합니다.

벡터가 아닌 SVG

해결하기 어려운 경우는 이렇습니다. 도형을 선택할 수 없고, 어떤 채우기 편집도 효과가 없으며, 확대하면 가장자리가 픽셀화됩니다. 텍스트 편집기에서 열면 <path> 요소 대신 긴 base64 텍스트를 담은 <image> 태그 하나가 보입니다. .svg 껍데기로 감싼 래스터 이미지입니다. 실제 추적을 하지 않는 변환기가 이런 파일을 만들며, 다시 칠할 도형이 없으므로 색상 도구로 해결할 수 없습니다. ‘색상화’ 필터는 픽셀에 색조를 입힐 뿐이며 보통 결과도 좋지 않습니다. 두 파일은 화면에서는 같아 보이지만 코드에서는 차이가 분명합니다.

<!-- A real vector: a shape with a fill you can change -->
<path fill="#1e3a5f" d="M12 2 L22 20 H2 Z" />
 
<!-- A raster in an .svg shell: one sealed picture, no shapes -->
<image href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUg..." />

해결하려면 가능하면 원본 PNG나 JPG로 돌아가 실제 경로가 있는 벡터로 변환하세요. 여전히 픽셀처럼 보이는 SVG 안내는 이런 가짜 벡터가 생기는 이유와 사용 전에 발견하는 방법을 설명합니다. 실제 도형이 생기면 이 글의 모든 방법이 작동합니다.

절단 파일 색상 변경: 색상마다 레이어입니다

Cricut이나 Silhouette는 SVG의 각 색상을 레이어로 처리하며, 레이어 하나마다 추가 작업, 재료 시트, 불필요한 비닐 제거가 필요합니다. 따라서 절단 파일의 색상 변경은 레이어 계획입니다. 두 요소에 같은 채우기를 주면 한 절단으로 묶이고, 색상을 나누면 새 레이어가 생깁니다.

제작자에게 특히 유용한 편집은 거의 같은 색상을 합치는 일입니다. 추적 이미지에는 눈에 띄는 차이를 만들지 않으면서 레이어만 늘리는 비슷한 파랑 세 가지가 있을 수 있습니다. 하나로 합치면 절단이 빨라지고 불필요한 비닐 제거도 훨씬 쉬워집니다. SVG 팔레트 줄이기 작업 흐름은 대비나 작업상의 의미를 없애지 않고 시각적 역할별로 합치는 방법을 보여 줍니다. 의도적으로 다층 디자인을 만든다면 레이어 SVG 안내를, 커팅 장비용 이미지 준비 전체 과정은 Cricut SVG 페이지를 보세요.

색상 변경 후 별도 다운로드가 필요하다면 각 정확한 색상을 정렬된 SVG 파일로 저장하세요.

PerfectVector에서는 어떻게 진행하나요?

먼저 한계를 분명히 말씀드립니다. PerfectVector는 기존 SVG를 편집하지 않습니다. PNG, JPG, WebP 이미지를 SVG로 변환합니다. 하지만 ‘이 SVG의 색상을 어떻게 바꾸나’라는 어려움 중 상당수는 변환 단계에서 비롯됩니다. 다루기 어려운 파일은 보통 지저분한 추적이거나 실제 벡터가 아닙니다.

따라서 SVG가 이미지에서 왔거나 원본이 남아 있다면 원본에서 처리하는 것이 가장 깔끔합니다. 깨끗한 경로, 적은 노드, 색상별 편집 가능한 도형을 갖춘 편집용 SVG로 이미지를 변환하세요. 다운로드 전에 내장 색상 편집기로 색상을 교체하거나 비슷한 색상을 합치세요. 경로를 찾아다니지 않고 색상별로 처리합니다. 한 번에 원하는 팔레트와 더 단순한 파일을 얻을 수 있으며, 첫 변환은 신용카드 없이 무료로 이용할 수 있습니다.

색상 변경으로 해결할 수 없는 것

• 그라디언트는 견본 하나가 아닙니다. 색상 지점 사이를 이어 주는 변화입니다. 지점을 편집할 수는 있지만 단순한 ‘이 색상 교체’는 일부만 바꿀 수 있어 그라디언트 이미지가 어색해집니다.
• 화면 색상과 인쇄 색상은 다릅니다. SVG는 화면 중심의 색상 명령을 저장하지만 인쇄에는 정확한 브랜드 색상, 별색, 검정 조합이 필요할 수 있습니다. 내보낸 뒤 색상이 달라 보이면 팔레트를 교체하기 전에 SVG 색상 변화 원인을 진단하세요. 최종 색상 기준은 인쇄소가 요청한 제작 형식입니다.
• 색상 변경은 도형을 정리하지 않습니다. 새 채우기로 얇은 조각을 합치거나 틈을 닫거나 노드를 줄일 수 없습니다. 색상만 바꾼 지저분한 추적은 여전히 지저분합니다.

저장하기 전에

• 색상을 바꾼 파일을 새 브라우저 탭에서 열어 원본과 비교하세요.
• 윤곽선을 확인하세요. 필요한 곳에서 채우기와 함께 스트로크도 바뀌었나요?
• 실수로 색상을 바꾼 불필요한 배경 사각형이 있는지 보세요.
• 절단 파일은 색상을 합친 뒤 레이어 수를 세세요. 거의 항상 적을수록 좋습니다.
• 손대지 않은 원본 사본을 유지하세요.

FAQ

Illustrator나 Photoshop 없이 SVG 색상을 어떻게 바꾸나요? 무료 온라인 SVG 색상 도구에서 업로드, 견본 클릭, 다운로드를 하거나 무료 데스크톱 벡터 편집기 Inkscape를 쓰세요. 단색 아이콘은 텍스트 편집기에서 파일을 열어 fill= 뒤의 16진수 값을 바꿔도 됩니다. 모두 무료입니다.

무엇을 해도 SVG가 검정색인 이유는 무엇인가요? 웹사이트라면 CSS로 img 태그의 SVG를 다시 스타일링할 수 없으므로 인라인으로 넣거나 파일을 편집하세요. 편집기라면 그룹, 색상을 표현하는 스트로크, 스타일 블록의 색상 정의를 확인하세요. 아무것도 선택되지 않고 확대하면 픽셀이 보인다면 .svg로 감싼 래스터이며 색상을 바꿀 도형이 없습니다.

Canva에서 SVG 색상을 바꿀 수 있나요? Canva의 전용 SVG 편집기는 무료로 업로드, 색상 변경, 워터마크 없는 다운로드가 가능하다고 설명합니다. 복잡한 SVG 기능은 편집기마다 다르게 표시될 수 있으므로 원본을 교체하기 전에 다운로드 파일을 검사하세요.

SVG 하나에 여러 색상을 쓸 수 있나요? 네. 각 도형에 자체 채우기와 스트로크가 있으므로 도형 수만큼 색상을 담을 수 있고 그라디언트도 쓸 수 있습니다. 따라서 다색 이미지의 색상 변경은 전역 설정 하나가 아니라 여러 채우기를 바꾸는 작업입니다.

Cricut 프로젝트의 SVG 색상은 어떻게 바꾸나요? Cricut Design Space에서 레이어 색상을 바꿀 수 있지만 도형별이 아니라 레이어별입니다. 어떤 부분이 색상을 공유해 함께 절단될지 재구성하려면 업로드 전에 SVG를 편집하세요. 한 레이어로 묶을 색상을 합치고 별도로 절단할 부분에는 다른 채우기를 지정하세요.

SVG 색상을 바꾸면 품질이 떨어지나요? 아닙니다. 벡터 색상은 텍스트 명령이므로 도형에 손대지 않고 명령만 다시 씁니다. PNG 편집과 달리 SVG는 원하는 만큼 색상을 바꿔도 품질 손실이 없습니다.

Sources

1. MDN: SVG 채우기와 스트로크 — fill, stroke, 불투명도와 관련 SVG 색상 속성을 설명합니다.
2. MDN: 웹에 벡터 그래픽 추가 — 인라인 SVG와 <img>로 불러온 SVG를 비교합니다.
3. Adobe Illustrator: 같은 채우기와 스트로크의 객체 선택 — 공유 색상 속성으로 이미지를 선택하는 방법을 설명합니다.
4. W3C: SVG 2 내장 콘텐츠 — SVG 문서 내부의 래스터 <image> 콘텐츠를 정의합니다.
5. Canva: SVG 편집기 — Canva의 SVG 업로드, 색상 변경, 다운로드 주장에 관한 현재 출처입니다.

파일이 정상적이면 SVG 색상 변경은 빠릅니다. 가진 파일에 맞는 방법을 고르고 도구와 씨름하기 전에 진단하세요. 파일 자체가 문제라면 원본 이미지를 깔끔하고 편집 가능한 SVG로 변환하고 쉬운 단계에서 색상을 선택하세요.