개발자 / SVG 색상
SVG 색상 변경기: SVG 색상 변경 및 복사
명시된 SVG 색상과 사용 횟수를 확인하고, 그라디언트 중지점과 간단한 CSS 색상 규칙을 편집한 다음 SVG를 다운로드하거나 코드를 복사합니다.
SVG 색상 변경기: SVG 색상 변경 및 복사: fill, stroke, stop-color, color, flood-color, lighting-color 속성, 인라인 스타일 및 간단한 style 규칙에서 명시적인 색상 토큰을 찾습니다. 색상 이름, 짧은 hex, rgb(), hsl()을 표준 형식으로 변환합니다. 정제 과정에서 변경이 필요하지 않은 다른 원본 바이트는 그대로 유지합니다. 서버에 파일을 전혀 업로드하지 않고 브라우저에서 100% 로컬로 실행됩니다.
- 카테고리
- 개발자 도구
- 실행 횟수
- 브라우저에서
- 비용
- 무료 · 가입 불필요
- 사용 가능 여부
- 사용 가능
브라우저에서 전부 실행됩니다
SVG 페인트
SVG의 채우기, 선 및 그레이디언트 정지는 색상 값과 페인트 서버 참조를 사용합니다. 사양: https://www.w3.org/TR/SVG2/painting.html
색상 구문
파서는 이름이 지정된 색상, hex, rgb(), hsl() 및 currentColor를 지원합니다. 알파 값이 제공되면 유지됩니다. CSS 변수와 고급 색 공간은 이 도구의 파서에서 지원하지 않습니다. 사양: https://www.w3.org/TR/css-color-4/
사용 방법
- SVG를 놓거나 마크업을 붙여넣습니다.
- 각 색상 선택기를 사용하거나 대체 색상을 입력합니다. 필요하면 모든 토큰의 색상을 한 번에 변경합니다.
- 변경 전후를 비교한 다음 정제된 SVG를 다운로드하거나 복사합니다.
개인정보 보호 및 제한사항
SVG 코드는 브라우저에 유지됩니다. 미리보기는 격리된 이미지로 처리하며, 안전하지 않은 콘텐츠와 외부 리소스를 제거합니다.
관련 도구
자주 묻는 질문
사용 횟수는 무엇을 계산하나요?
마크업에 있는 명시적인 색상 토큰을 계산합니다. 렌더링된 픽셀 수나 상속된 스타일이 적용된 요소 수는 계산하지 않습니다.
그라디언트를 지원하나요?
예. 그라디언트 ID나 참조를 변경하지 않고 그라디언트 중지점의 색상을 변경할 수 있습니다.
currentColor는 어떤 기능을 하나요?
SVG를 인라인으로 삽입하면 상속된 CSS color 값을 사용합니다. 이미지 미리보기에서는 SVG 자체에 색상이 정의되어 있지 않은 경우 일반적으로 검은색을 사용합니다.
모든 CSS 색상을 확인할 수 있나요?
아니요. CSS 변수, 고급 색상 공간, 상속된 기본값 및 계산된 선택기 결과는 확인하지 않습니다. 간단한 선언과 선택기를 지원합니다.
무료 도구 · 브라우저에서회 실행 · 계정 불필요