SVG 색 바꾸기
☞ 모든 처리가 브라우저 안에서 이루어집니다 — 아무것도 업로드되지 않습니다여기에 SVG를 놓으세요
또는 클릭해서 찾기 — SVG만 가능
미리보기
OneImageTool
무료 이미지 도구
SVG 색 바꾸기
파일 안의 모든 색을 하나의 팔레트로 모았습니다 — 아무 색이나 바꿔 결과를 바로 확인하거나, currentColor로 전부 CSS에 넘기세요.
또는 클릭해서 찾기 — SVG만 가능
미리보기
팔레트 하나에 모든 색
색은 fill이나 stroke 속성에 있을 수도, 인라인 style 안에 있을 수도, 파일에 삽입된 스타일시트 안에 있을 수도 있습니다. 그리고 Illustrator나 Figma 내보내기는 대개 마지막 방식을 씁니다. 텍스트 편집기에서 SVG를 손으로 고칠 때 몇몇 도형을 놓치는 이유가 바로 이것입니다.
이 도구는 그 세 곳에 더해 그러데이션 정지점과 필터 색까지 읽어 하나의 팔레트로 모읍니다. 견본 하나를 바꾸면 그 색이 어디에 쓰였든 모든 자리가 함께 바뀝니다.
세 단계
.svg 파일을 고르세요 — 파일은 기기에 남습니다.
파일 안의 색마다 견본이 하나씩, 사용 횟수와 함께 표시됩니다.
색만 바뀌고 도형은 그대로입니다.
간단한 답변
도형에게 자기가 속한 요소의 텍스트 색을 쓰라고 지시합니다. currentColor로 지정한 아이콘은 어두운 버튼 안에서는 하얗게, 흐린 텍스트 안에서는 회색으로 바뀝니다. 두 번째 파일도, 추가 CSS 규칙 한 줄도 필요 없습니다. 아이콘 라이브러리가 SVG를 배포하는 표준 방식이기도 합니다.
그러데이션은 색이 아니라 파일 다른 곳에 있는 정의에 대한 참조입니다. 그래서 그것을 교체하면 색이 바뀌는 게 아니라 그러데이션 자체가 사라집니다. 그러데이션 안의 개별 정지점 색은 팔레트에 나타나니 그것을 편집하세요.
그렇다면 파일 자체에 색이 없다는 뜻입니다. 보통은 그림이 이미 currentColor로 되어 있거나, 파일 바깥의 스타일시트에서 색을 물려받고 있다는 의미입니다. SVG 뷰어로 열어 소스를 확인해 보세요.
색은 실제로 해석되는 값을 기준으로 묶이기 때문에 #FFF, #ffffff, white는 한 항목입니다. 이를 편집하면 각각이 원래 쓰인 표기 그대로 모두 갱신됩니다.
아니요. 파일은 브라우저 안에서 해석되고 다시 쓰입니다.