내보내기 후 SVG 색상이 바뀌는 이유와 원인 진단

내보내기 후 SVG의 색상이 달라지는 것은 원본의 모습과 전달된 파일이 서로 다르게 해석되기 때문입니다. 내보내기 도구가 색상 값을 변환할 수 있습니다. 웹사이트가 CSS로 fill을 덮어쓰거나 부모에서 currentColor를 가져올 수 있습니다. 그라디언트, 불투명도, 혼합 모드, 필터가 대상에서 다르게 처리하는 기능에 의존할 수 있습니다. 내보낸 마크업은 정상이고 특정 가져오기 도구만 다른 경우도 있습니다.

모든 16진수 값을 바꾸는 것으로 시작하지 마세요. 먼저 모습이 바뀌는 지점을 찾으세요. 그래야 SVG 수정, 내보내기 변경, 전달용 사본 단순화, 다른 형식 유지 중 무엇이 필요한지 알 수 있습니다.

증상에 맞는 첫 점검을 선택하세요

먼저 살펴볼 곳

5분 안에 문제를 분리하세요

1. 편집 가능한 마스터에 손대지 마세요

테스트용 복사본을 저장하세요. 유일한 편집용 사본에서 효과를 평면화하거나 모든 객체를 윤곽선으로 바꾸거나 색을 교체하지 마세요. 원인을 숨기고 나중에 수정하기 어렵게 만들 수 있습니다.

2. 내보낸 SVG를 두 곳에서 여세요

최신 브라우저를 중립적인 비교 대상으로 사용하고 같은 파일을 실제 대상에서 열거나 가져오세요. 같은 배경에서 둘 다 원본 그림과 비교하세요.

• 두 내보내기 화면 모두 잘못 보이면 내보내기 도구나 기록된 SVG를 조사하세요.
• 단독 브라우저에서는 맞고 대상에서는 다르면 삽입, CSS, 가져오기 지원을 조사하세요.
• 투명하거나 혼합된 영역만 다르면 단색 채우기를 건드리기 전에 배경과 효과를 확인하세요.

브라우저는 유용한 비교 대상이며 모든 디자인·제작 앱이 같은 기능을 가져온다는 증거는 아닙니다.

3. 페인트 지시를 검사하세요

텍스트 편집기에서 SVG를 열고 다음을 검색하세요.

fill=
stroke=
currentColor
url(#
opacity=
fill-opacity=
mix-blend-mode
filter=

아직 다시 쓰지 말고 구조를 찾으세요. 직접 지정된 fill="#2F6BFF"는 fill="currentColor" 또는 fill="url(#paint0)"와 다른 진단으로 이어집니다.

SVG 마크업을 처음 연다면 SVG 편집 가이드가 코드와 시각적 편집기 방법을 설명합니다.

4. 문제가 있는 객체 하나로 줄이세요

색이 여전히 바뀌는 가장 작은 객체를 새 문서로 복사하고 내보내세요. 필터, 혼합 모드, 그라디언트, 그룹 불투명도 순으로 기능을 하나씩 제거하세요. 결과를 처음 정상으로 되돌리는 제거 단계가 지원되지 않거나 문맥에 의존하는 기능을 알려 줍니다.

이 축소 테스트는 구체적인 전달 제약을 알려 주므로 전체 일러스트를 평면화하는 것보다 안전합니다.

원인 1: 내보내기 도구가 색 공간을 변환했습니다

16진수 색상과 익숙한 rgb() 문법은 sRGB 색상을 나타냅니다. 최신 CSS는 CSS Color Module Level 4에서 정의한 color()를 통해 Display P3 같은 더 넓은 색역도 표현합니다. 따라서 디자인 앱의 원본 색상을 sRGB 16진수 값으로 만들려면 변환이 필요할 수 있고, 그 과정에서 숫자가 바뀌거나 색역 밖의 색상이 잘릴 수 있습니다.

다음 순서로 확인하세요.

1. 원본 문서의 색 공간과 선택한 객체의 숫자 값을 기록하세요.
2. 불투명도나 효과가 없는 평면 객체 하나를 내보내세요.
3. SVG를 텍스트로 열고 기록된 fill 또는 stroke를 읽으세요.
4. 내보낸 숫자와 원본을 비교하세요.
5. 같은 파일을 대상에서 확인하세요.

파일 안의 값이 바뀌었다면 내보내기 중 변환된 것입니다. 대상 색 공간을 의도적으로 선택하고 다시 내보내세요. 값은 같지만 모습이 다르다면 CSS, 효과, 배경, 가져오기 동작을 살펴보세요.

CMYK 분판, 별색, 특정 검정 조합이 필요한 인쇄 작업에서는 인쇄 기준 마스터를 디자인 앱의 고유 파일 형식으로 유지하고 인쇄 업체가 요청하는 형식, 흔히 PDF로 전달하세요. SVG는 화면용으로 유용할 수 있지만 안정적으로 표현할 수 없는 작업의 색상 기준으로 조용히 바뀌어서는 안 됩니다.

원인 2: currentColor 또는 CSS가 페인트를 바꿨습니다

SVG에는 CSS 스타일을 적용할 수 있습니다. SVG 2 스타일 명세는 fill 같은 표현 속성이 명시도 0으로 CSS 캐스케이드에 참여하므로 작성자 CSS가 덮어쓸 수 있다고 설명합니다. 인라인 SVG는 주변 페이지와 문서를 공유하므로 일반적인 클래스 이름이 사이트 스타일과 충돌할 수 있습니다.

currentColor는 의도한 간접 참조입니다. MDN SVG color 참고 자료는 fill, stroke, 그라디언트 스톱, 기타 페인트 속성에 값을 제공한다고 설명합니다. 주변 텍스트를 따라야 하는 아이콘에는 유용하지만 해당 지점에 고정 색이 없다는 뜻이기도 합니다.

다음 두 전달 전략 중 하나를 사용하세요.

• 테마를 따르는 웹 아이콘에는 currentColor를 유지하고 SVG 또는 의도한 부모에 명시적인 color를 설정하세요.
• 자체 팔레트를 유지해야 하는 독립 자산에는 채우기와 스트로크를 명시하고 내부 클래스 이름이 충돌하지 않도록 범위를 지정하세요.

여러 인라인 SVG에 paint0, clip0, gradient1 같은 ID가 있으면 고유하게 만들고 참조도 함께 갱신하세요. id만 바꾸지 마세요. 모든 url(#id)가 여전히 연결되어야 합니다.

내보내기 색상 변화 복구가 아니라 의도적인 색 변경이 목적이라면 SVG 색상을 안전하게 바꾸는 가이드를 사용하세요.

원인 3: 그라디언트 또는 페인트 참조가 깨졌습니다

SVG 그라디언트와 패턴은 페인트 서버입니다. 도형은 fill="url(#brandGradient)" 같은 참조로 연결하며 그라디언트 정의는 보통 <defs>에 있습니다. SVG 2 페인트 서버 명세는 그라디언트 좌표와 변환이 결과에 미치는 영향도 정의합니다.

다음 세 가지로 대부분의 구조적 실패를 찾을 수 있습니다.

1. 모든 url(#id)에 일치하는 정의가 있습니다.
2. 여러 SVG를 페이지나 문서 하나에 합쳐도 ID가 고유합니다.
3. 대상이 파일의 페인트 유형, 단위, 변환, 그라디언트 스톱을 보존합니다.

단색 채우기는 정상으로 가져오는데 그라디언트는 그렇지 않다면 마스터의 그라디언트를 유지하고 대상용 전달 사본을 만드세요. 먼저 더 단순한 선형 또는 방사형 그라디언트를 시도하세요. 대상이 여전히 재현하지 못하고 편집 가능한 페인트보다 정확한 모습이 중요하다면 수신 과정이 지원하는 형식이나 평면화한 자산을 사용하세요. 편집 가능한 원본을 대체하지 않도록 사본에 명확한 이름을 붙이세요.

원인 4: 불투명도와 혼합이 보이는 결과를 바꿨습니다

눈에 보이는 픽셀이 항상 저장된 채우기와 같지는 않습니다. fill-opacity는 도형의 채우기에 영향을 주고, 그룹 opacity는 그룹의 자식들이 합쳐진 뒤 적용되며, 혼합 모드는 원본과 배경을 혼합합니다. W3C 합성 및 혼합 명세는 렌더링 순서와 배경에 의존하는 혼합 공식을 정의합니다.

이는 두 가지 실용적인 결과로 이어집니다.

• 색상 값이 전혀 바뀌지 않아도 같은 SVG가 흰색, 검정, 유색 페이지에서 다르게 보일 수 있습니다.
• 그룹의 불투명도를 각 자식으로 옮기면 합성 순서가 달라져 겹친 부분이 바뀔 수 있습니다.

실제 배경에서 확인하세요. 그다음 사본에서 mix-blend-mode, 필터, 마스크, 그룹 불투명도를 하나씩 제거하세요. 대상이 필수 효과를 보존하지 못한다면 단순화한 벡터 표현과 평면화한 전달 자산 중 선택하세요. 관련 없는 디자인 부분은 평면화하지 마세요.

그림 뒤의 흰색이나 유색 사각형은 별도 문제입니다. 투명 배경 SVG 가이드는 실제 배경 도형과 빈 캔버스를 구별하는 방법을 보여 줍니다.

원인 5: 대상이 SVG 일부만 가져왔습니다

SVG는 웹 표준이지만 많은 데스크톱, 인쇄, 절단, 프레젠테이션, 사이트 제작 도구가 자체 객체 모델로 변환합니다. 지원은 프로그램과 버전마다 다를 수 있습니다. 최신 공식 문서가 설명하고 정확히 해당 버전과 일치하지 않는 한 “이 앱은 그라디언트를 전혀 지원하지 않는다” 같은 규칙을 피하세요.

대신 통제된 가져오기 테스트를 사용하세요.

1. 단색으로 채운 경로 하나를 가져오세요.
2. 원래 그라디언트를 추가하세요.
3. 불투명도를 추가하세요.
4. 혼합이나 필터를 추가하세요.
5. 처음 달라지는 버전에서 멈추세요.

이제 대상의 한계를 알 수 있습니다. 전체 마스터를 유지하고 확인한 범위 안에 머무는 전달 사본을 내보내세요. 사라지는 부분이 스트로크라면 모든 선을 채우기로 바꾸지 말고 스트로크 전용 내보내기 진단을 따르세요.

가장 작은 안전한 수정을 선택하세요

PerfectVector의 역할

벡터 원본을 잃어버렸거나 사용할 수 없고 남은 가장 좋은 그림이 래스터일 때 PerfectVector가 유용합니다. 이미지를 편집 가능한 벡터 도형으로 바꾼 뒤 팔레트, 투명도, 경로를 확인하고 대상에서 여세요.

상속 CSS 수정, 누락된 그라디언트 정의 복원, 디자인 앱 색 프로필 복구, 지원되지 않는 혼합 모드 보존, 가져오기 파서 변경은 하지 않습니다. SVG에 좋은 경로와 페인트 지시가 남아 있다면 스크린샷을 다시 추적하지 말고 파일을 수정하세요. 원래 구조를 더 많이 보존할 수 있습니다.

전달 체크리스트

• 편집용 마스터를 유지하고 사본에서 수정하세요.
• 같은 배경에서 브라우저와 실제 대상의 내보낸 파일을 비교하세요.
• 기록된 fill과 stroke 값이 바뀌었는지 확인하세요.
• currentColor, 일반적인 클래스, 반복 ID를 검색하세요.
• 모든 url(#id) 참조를 정의와 대조하세요.
• 그룹 불투명도, 혼합 모드, 필터, 마스크를 따로 테스트하세요.
• 대상이 재현하지 못하는 기능만 단순화하세요.
• 이전 버전을 교체하기 전에 최종 전달 파일을 다시 열거나 가져오세요.

FAQ

SVG가 브라우저에서는 맞고 가져온 뒤에는 왜 다르게 보이나요? 대상이 다르게 변환하는 기능이나 스타일 문맥을 사용했을 가능성이 높습니다. 단색 경로 하나를 가져온 뒤 그라디언트, 불투명도, 혼합, 필터를 하나씩 다시 추가하세요. 처음 실패한 단계가 마스터를 훼손하지 않고 대상의 한계를 알려 줍니다.

SVG 파일은 항상 RGB인가요? 일반적인 16진수와 rgb() 색상은 sRGB이며 최신 CSS는 Display P3 같은 공간도 표현합니다. 디자인 및 인쇄 앱은 내보내기나 가져오기 중 색을 변환할 수 있습니다. 기록된 색을 검사하고 CMYK나 별색 작업에는 인쇄 업체가 요청한 제작 형식을 사용하세요.

내보내기 후 SVG가 왜 검정으로 바뀌었나요? currentColor 사용, CSS 규칙 누락, 누락된 그라디언트 또는 페인트 ID 참조를 확인하세요. 검정은 원래 채우기가 교체된 것이 아니라 상속 색이나 대체 처리의 증상일 수 있습니다. 단독 파일과 삽입하거나 가져온 버전을 비교하세요.

색이 잘못 보이면 모든 16진수 값을 바꿔야 하나요? 아닙니다. 먼저 내보내기 중 값이 바뀌었는지 판단하세요. 숫자가 그대로라면 교체가 CSS, 페인트 참조, 혼합, 배경, 가져오기 문제를 숨기고 다른 환경에서 정확성을 떨어뜨릴 수 있습니다.

PerfectVector가 내보내기 후 색이 바뀐 SVG를 고칠 수 있나요? CSS, 그라디언트, 불투명도, 프로필, 가져오기 동작만 수정해야 하는 SVG에는 해당하지 않습니다. PerfectVector는 원래 벡터를 잃어버려 적합한 평면 래스터 그림을 편집 가능한 벡터 도형으로 재구성할 때 적합합니다.

Sources

1. W3C — SVG 2 스타일 — SVG의 CSS 스타일, 클래스 및 스타일 속성, 표현 속성, 캐스케이드 동작, 상속을 정의합니다.
2. MDN — SVG color 속성 — currentColor가 채우기, 스트로크, 그라디언트 스톱, 관련 속성에 페인트 값을 제공하는 방법을 설명합니다.
3. W3C — SVG 2 페인트 서버 — 선형 및 방사형 그라디언트, 페인트 참조, 좌표계, 변환, 색 보간을 정의합니다.
4. W3C — CSS Color Module Level 4 — sRGB 색상 문법과 Display P3를 포함한 더 넓은 사전 정의 색 공간을 정의합니다.
5. W3C — 합성 및 혼합 Level 1 — SVG와 CSS의 불투명도 그룹, 합성 순서, 배경, 혼합 모드를 정의합니다.

남은 가장 좋은 원본이 PNG나 JPG라면 PerfectVector로 SVG를 재구성한 뒤, 기존 파일을 교체하기 전에 단독 브라우저와 최종 대상에서 결과를 비교하세요.