CSS를 사용하여 HTML에서 SVG 요소의 색상 변경

  2. 어떻게
  3. CSS 하우투
  4. CSS를 사용하여 HTML에서 SVG 요소의 색상 변경
Naila Saad Siddiqui 2023년6월20일
CSS CSS Element
  1. SVG 소개
  2. SVG 방법
CSS를 사용하여 HTML에서 SVG 요소의 색상 변경

이 간단한 가이드는 HTML 문서에서 SVG를 사용하는 방법과 CSS 속성을 사용하여 SVG를 사용자 지정하여 색상을 변경하는 방법에 관한 것입니다. 먼저 HTML의 SVG를 간략하게 소개하겠습니다.

SVG 소개

XHTML과 마찬가지로 SVG는 아래와 같은 벡터 그래픽을 만드는 데 사용할 수 있는 XML 언어입니다. 필요한 모든 선과 도형을 그리거나 기존 래스터 이미지를 편집하거나 두 가지를 동시에 수행하여 이미지를 만드는 데 사용할 수 있습니다.

이미지와 해당 요소는 필터링, 합성 또는 기타 기술을 통해 완전히 변경할 수 있습니다.

샘플 SVG 이미지

여러 경쟁 형식이 W3C에 제출되었지만 완전히 비준되지 않은 후 SVG가 1999년에 만들어졌습니다. 널리 사용되는 모든 브라우저는 SVG를 지원합니다.

SVG의 느린 로딩은 단점입니다. SVG에는 DOM 인터페이스의 가용성과 타사 확장이 필요하지 않다는 장점이 있습니다.

SVG 사용의 이점

  • 모든 텍스트 편집기를 사용하여 SVG 이미지를 만들고 편집할 수 있습니다.
  • SVG 이미지는 스크립팅, 압축, 인덱싱 및 검색할 수 있습니다.
  • SVG의 이미지 크기를 조정할 수 있습니다.
  • 모든 해상도는 SVG 이미지의 고품질 인쇄를 생성할 수 있습니다.
  • SVG 이미지를 확대할 수 있습니다.
  • SVG 그래픽을 확대하거나 축소해도 모든 품질을 유지합니다.
  • SVG 파일은 순수 XML이며 개방형 표준입니다.

SVG 방법

SVG는 다양한 그래픽을 담는 컨테이너 역할을 합니다. 따라서 HTML 문서에 직접 그림을 생성할 수 있는 다양한 메소드나 태그를 제공합니다. 이 문서에서는 일부 요소와 사용 가능한 다양한 옵션에 대해 설명합니다.

SVG를 사용하여 원 그리기

<circle> 태그를 사용하여 SVG에서 간단한 원을 그립니다. 원의 속성을 설정하는 데 사용되는 다양한 속성이 있습니다.

첫 번째 예로서 HTML에서 SVG를 사용하여 원을 그리는 것으로 시작합니다. 다음 HTML 코드는 SVG에서 원을 그립니다.

<!DOCTYPE html>
<html>
<body>

<h1>First SVG Demo</h1>

<svg width="150" height="150">
   <circle cx="60" cy="60" r="50" stroke="red" stroke-width="5" fill="yellow" />
   Sorry, SVG is not supported for your browser.
</svg>
</body>
</html>

코드는 다음과 같이 렌더링됩니다.

  • <svg> 요소는 SVG 이미지를 소개합니다.
  • <svg> 요소의 너비 및 높이 속성은 SVG 이미지의 크기를 지정합니다.
  • <circle> 요소를 사용하여 원을 그릴 수 있습니다.
  • 원 중심의 x 및 y 좌표는 cx 및 cy 속성으로 지정됩니다.
  • cx와 cy가 설정되지 않은 경우 원의 중심은 (0,0)으로 설정됩니다.
  • r 속성은 원의 반지름을 지정합니다.
  • 도형의 외곽선 모양은 획 및 획 너비 속성으로 제어됩니다. 우리는 원의 외곽선에 5 px 빨간색 “테두리"를 갖도록 했습니다.
  • 채우기 속성은 원의 내부 색상을 나타냅니다.
  • 마지막에 </svg> 태그를 닫으면 SVG 이미지가 닫힙니다.

브라우저가 SVG를 지원하지 않는 경우 “죄송합니다. 귀하의 브라우저는 SVG를 지원하지 않습니다"라는 메시지가 표시됩니다.

SVG를 사용하여 사각형 그리기

SVG의 <rect> 요소는 사각형 모양을 그리는 데 사용됩니다. <circle> 요소와 유사하게 사각형의 속성을 설정하는 데 사용할 수 있는 여러 속성이 있습니다.

다음 코드 세그먼트는 SVG를 사용하여 사각형을 그립니다.

<!DOCTYPE html>
<html>
<body>

<h1>SVG Rectangle</h1>

<svg width="200" height="200">
   <rect width="200" height="100" style="fill:red;stroke-width:5;stroke:black" />
   Sorry, SVG is not supported for your browser.
</svg>
</body>
</html>
  • 사각형의 너비와 높이는 rect 요소의 width 및 height 속성에 의해 결정됩니다.
  • style 속성은 사각형의 CSS 속성을 정의합니다.
  • CSS 채우기 속성은 사각형의 채우기 색상을 결정합니다.
  • CSS stroke-width 속성은 사각형 테두리의 너비를 결정합니다.
  • CSS stroke 속성은 사각형의 테두리 색상을 지정합니다.

SVG <이미지> 태그

SVG 문서에 포함된 이미지는 <image> SVG 요소로 표시됩니다. SVG 파일 또는 래스터 이미지 파일을 표시할 수 있습니다.

JPEG, PNG 및 기타 SVG 파일은 SVG 소프트웨어가 지원해야 하는 유일한 이미지 형식입니다. 애니메이션 GIF의 동작은 정의되지 않습니다.

다음은 <image> 태그에 대해 설정해야 하는 특정 속성입니다.

  • x: 원점에서 이미지의 수평 위치를 정의합니다.
  • y: 원점에서 이미지의 수직 위치를 정의합니다.
  • 폭: 이미지가 렌더링되는 크기입니다. 이 속성은 HTML의 <img> 태그와 달리 필수입니다.
  • 높이: 이미지의 렌더링된 높이입니다. 이 속성은 HTML의 <img> 태그와 달리 필수입니다.
  • xlink 및 href: 이미지 파일의 URL을 정의합니다.
  • preserveAspectRatio: 이미지의 배율을 관리합니다.

다음 코드 스니펫은 SVG에서 image 태그를 사용하여 SVG 파일을 표시합니다.

<!DOCTYPE html>
<html>
<body>

<svg width="96" height="96">
  <image xlink:href="/img/DelftStack/logo.svg" width="96" height="96" />
</svg>
</body>
</html>

CSS를 사용하여 SVG 이미지의 색상 변경

SVG 이미지의 색상을 변경해야 하는 경우 CSS 필터 속성을 사용하여 사진에 다른 필터를 적용하고 색조와 색상을 변경할 수 있습니다. 필터 CSS 속성은 요소에 흐림 또는 색상 이동과 같은 시각 효과를 제공합니다.

필터를 사용하여 테두리, 배경 및 이미지가 렌더링되는 방식을 변경하는 것이 일반적입니다.

예를 들어 이전 예제에서 이미지의 색상을 변경해야 하는 경우 다음 필터 속성을 사용할 수 있습니다.

.filter-green{
        filter: invert(58%) sepia(69%) saturate(1276%) hue-rotate(76deg) brightness(110%) contrast(109%);
    }

<!DOCTYPE html>
<html>
<body>

<svg class="filter-green" width="96" height="96">
  <image xlink:href="/img/DelftStack/logo.svg" width="96" height="96" />
</svg>
</body>
</html>

이렇게 하면 이미지에 오버레이 효과가 생성되고 색상이 변경됩니다. 위의 CSS 코드에서 이미지에 다음 필터를 적용했습니다.

  • 반전: 이미지의 색상을 반전시킵니다. 0%에서 100%까지 시작하며 100%는 이미지를 완전히 반전시킵니다.
  • 세피아: 이미지에 빈티지 효과를 추가하여 금속성 측면으로 색상을 변경합니다.
  • saturate: 이미지의 색상 강도를 설정합니다. 값이 높을수록 이미지의 색상이 더 강렬하고 선명해집니다.
  • hue-rotate: 이미지의 컬러 서클을 중심으로 이미지의 색조 회전을 변경합니다.
  • 밝기: 이미지의 밝기를 설정합니다. 값이 0이면 완전히 어둡고 100%는 이미지의 원래 밝기를 나타냅니다. 100보다 큰 값은 더 밝게 만듭니다.
  • 대비: 이미지의 대비를 설정합니다. 값이 0이면 완전히 어둡고 100%는 이미지의 원래 대비를 나타내며 값이 100보다 크면 대비가 더 강해집니다.

관련 문장 - CSS Element