SVG의 currentColor는 고정 색이 아니라 계산된 color 값을 따릅니다. 외부 페이지나 상속된 CSS가 없는 변환 환경에서는 기본값이 달라질 수 있으므로, 필요한 스타일을 SVG 안에서 명시하고 실제 PNG 결과를 확인하세요.
SVG → PNG
currentColor가 실제 색 이름이 아님을 이해하기
SVG의 fill이나 stroke에 currentColor를 사용하면 해당 값은 요소에 계산된 color 속성에서 가져옵니다. color는 상속될 수 있으므로 SVG 내부의 부모 요소, 문서의 CSS, 인라인 스타일과 호스트 페이지의 규칙이 결과에 영향을 줄 수 있습니다. 소스에 빨강이나 파랑 같은 값이 직접 없더라도 화면에서는 주변 스타일을 받아 색이 보입니다. 따라서 코드만 보고 최종 색을 단정하면 안 됩니다.
먼저 SVG를 단독 파일로 연 경우와 실제 웹페이지 안에 삽입한 경우를 비교하세요. img 요소로 불러오기, 인라인 SVG, object 삽입은 스타일 접근 범위가 같지 않습니다. PNG 변환기는 대개 독립 문서처럼 렌더링하므로 페이지의 클래스나 상위 color 값을 받지 못할 수 있습니다. 목표가 재사용 가능한 테마 아이콘인지 고정 색 자산인지 정하면 필요한 스타일 포함 범위를 결정하기 쉽습니다.
- color의 계산값과 상속 경로 확인
- 인라인·img·독립 파일 비교
- 테마용인지 고정 자산인지 결정
currentColor는 주변 스타일이 제공하는 color 값에 의존합니다.
fill·stroke·CSS 우선순위를 추적하기
SVG 색은 프레젠테이션 속성, style 속성, 내부 style 요소와 외부 CSS가 서로 경쟁해 결정될 수 있습니다. 클래스 선택자의 우선순위와 선언 순서, important 사용 여부에 따라 fill이나 stroke가 덮어써집니다. 개발자 도구에서 최종 계산값을 확인하고, 문제가 있는 요소가 어떤 규칙에서 색을 받는지 기록하세요. 부모의 color는 상속돼도 fill에 직접 지정된 색이 있으면 currentColor 경로가 사용되지 않을 수 있습니다.
CSS 사용자 정의 속성 var도 함께 살펴야 합니다. var에 대체값이 없고 변환 환경이 변수를 제공하지 않으면 선언이 유효하지 않아 예상과 다른 기본값이 적용될 수 있습니다. use 요소가 symbol이나 외부 정의를 참조할 때는 참조 트리의 스타일도 확인합니다. 눈에 보이는 한 요소만 수정하기보다 아이콘의 상태별 클래스, hover 규칙과 숨은 복제까지 검색해 PNG에 필요한 최종 상태를 명확히 만드세요.
- 계산된 fill·stroke·color 확인
- CSS 변수의 대체값 점검
- use·symbol 참조의 스타일 추적
외부 의존성을 변환 전에 정리하기
외부 스타일시트나 페이지 전역 클래스에 의존하는 SVG는 변환기가 같은 리소스를 불러오지 못하면 색이 바뀝니다. 네트워크 접근이 제한된 환경에서는 CSS 파일을 가져오지 못할 수 있고, 보안 정책이나 상대 URL 기준도 달라집니다. PNG로 내보낼 복사본에는 필요한 규칙을 내부 style 또는 명시적 속성으로 포함하세요. 사용하지 않는 규칙까지 모두 복사하면 충돌이 생기므로 실제 요소에 필요한 값만 정리합니다.
고정 색 PNG가 목적이라면 currentColor와 변수를 최종 계산된 색으로 바꾸는 방법이 안정적입니다. 반대로 여러 테마용 SVG를 유지해야 한다면 각 테마별 color 값을 지정해 별도 출력합니다. 원본 디자인 시스템 파일은 보존하고 내보내기 전용 복사본에서 평탄화하세요. 외부 글꼴, 필터와 마스크도 변환기에 따라 결과가 달라질 수 있으므로 색 문제를 해결한 뒤 별도 항목으로 검증합니다.
- 필요한 CSS만 SVG 내부에 포함
- 고정 PNG는 계산된 색으로 평탄화
- 테마별 출력 설정 분리
변환 환경이 제공하지 않는 CSS를 전제로 한 색은 안정적으로 재현되지 않습니다.
배경·투명도·크기별 결과 비교하기
색이 맞아도 투명 배경 위의 선이나 반투명 도형은 밝은 배경과 어두운 배경에서 다르게 보일 수 있습니다. PNG를 투명, 흰색, 검정 배경에 각각 놓고 currentColor가 적용된 선과 채움, 가장자리 안티앨리어싱을 확인하세요. CSS opacity와 fill-opacity, stroke-opacity가 중첩되면 예상보다 연해질 수 있으므로 계산값과 실제 픽셀을 함께 비교합니다.
SVG의 viewBox와 출력 너비·높이도 결과에 영향을 줍니다. 얇은 선은 작은 PNG에서 픽셀 격자에 맞지 않아 흐릿해지거나 일부가 사라질 수 있습니다. 1배와 2배 또는 실제 사용 크기로 내보내 선 두께, 잘림과 여백을 검사하세요. 색 오류처럼 보이는 문제가 사실은 작은 크기의 안티앨리어싱이나 배경 혼합 때문인지 구분해야 올바른 수정을 선택할 수 있습니다.
- 밝고 어두운 배경에서 비교
- opacity 중첩 확인
- 실제 사용 크기와 고해상도 출력 시험
독립 렌더링 경로로 최종 검증하기
정리한 SVG를 브라우저 단독 탭, 다른 브라우저와 실제 SVG→PNG 변환기에서 각각 렌더링하세요. 최종 색을 샘플링해 디자인 기준값과 비교하고, fill과 stroke가 빠진 요소가 없는지 확인합니다. 페이지 안에서만 정상이고 단독 파일에서 실패한다면 외부 상속 의존성이 남아 있을 가능성이 큽니다. 변환본의 픽셀 크기와 투명 배경도 함께 기록합니다.
승인 절차에는 원본 SVG, 내보내기용 SVG, 필요한 CSS, 테마 값, 출력 크기와 변환기 버전을 남깁니다. 문제가 생기면 PNG를 다시 편집하지 말고 SVG 스타일 원인을 수정한 뒤 새로 변환하세요. 마지막으로 밝은 배경과 어두운 배경의 실제 UI에 PNG를 배치해 색, 선, 여백과 가장자리를 확인합니다. 여러 아이콘 표본이 통과한 뒤에만 일괄 내보내기를 진행하세요.
- 단독 SVG와 변환기 결과 비교
- 디자인 기준 색상 샘플링
- 실제 UI 배경에서 최종 확인
외부 페이지 없이도 같은 색이 나와야 PNG 변환 조건이 고정된 것입니다.
핵심만 정리했어요
- currentColor는 요소의 계산된 color 속성을 참조하므로 주변 CSS와 상속 조건에 따라 결과가 달라집니다.
- 브라우저 페이지에서는 정상이어도 독립 변환기는 외부 스타일시트·클래스·사용자 환경을 불러오지 못할 수 있습니다.
- fill·stroke·color의 우선순위와 CSS 변수, use 참조를 실제 렌더링 트리 기준으로 확인해야 합니다.
- 필요한 스타일을 자체 포함한 복사본으로 만들고 배경과 크기가 다른 PNG를 비교한 뒤 승인하세요.
자주 묻는 질문
currentColor는 어떤 색인가요?
고정된 색이 아니라 해당 요소에 계산된 color 속성 값이며 부모나 CSS에서 상속될 수 있습니다.
브라우저에서는 맞는데 PNG가 검정색인 이유는 무엇인가요?
변환기가 페이지의 color나 외부 CSS를 받지 못해 기본 계산값을 사용했을 가능성이 있습니다.
모든 스타일을 인라인으로 바꿔야 하나요?
반드시 그렇지는 않지만 독립 변환에 필요한 규칙은 SVG 내부에서 접근 가능해야 하며 고정 출력은 계산값 평탄화가 안전합니다.
색은 맞는데 작은 PNG가 흐린 이유는 무엇인가요?
얇은 선이 픽셀 격자와 맞지 않거나 투명도와 안티앨리어싱이 배경과 혼합됐을 수 있습니다.
최종 검사는 어떻게 하나요?
단독 SVG와 여러 렌더러를 비교하고 실제 크기의 PNG를 밝고 어두운 UI 배경에 배치해 확인하세요.