CSS 조작

SVG의 가장 큰 장점은 CSS 사용해 스타일을 변경할 수 있다는 것입니다. 일부 페이지에서 파란색 아이콘을 주황색으로 바꾸고 싶을 때, 새 파란색 아이콘을 다시 만들지 않아도 됩니다.

SVG 스타일 변경 방법은 두 가지로, SVG 코드 내부에서 변경하는 방법inline style과 외부 스타일 시트external style로 변경하는 방법이 있습니다. 인라인 스타일에서는 <style> 태그와 <![CDATA [...]]>태그로 스타일을 묶습니다. 간혹 XML 파서가 특정 문자(예 : >)와 충돌할 수 있기 때문에 이 방법을 사용하는 것이 가장 좋습니다. 현재 특별한 문자가 없는 경우에도 나중에 CDATA를 사용하여 추가 코드를 작성할 수 있습니다.

인라인 스타일에서는 대부분 모든 것이 구현 가능합니다. 그러나 <img> 및 background-image는 CSS3 애니메이션을 지원하지 않습니다 (애니메이션 섹션 참고) background-image는 인라인 미디어 쿼리를 지원하지 않습니다. (자세한 내용은 미디어 쿼리 섹션 참고)


인라인 스타일

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 65">
  <style type="text/css">
    <![CDATA[
    .firstb { fill: yellow; }
    .secondb { fill: red; }
    ]]>
  </style>
  <path class="secondb" d="M42 27v-20c0-3.7-3.3-7-7-7s-7 3.3-7 7v21l12 15-7 15.7c14.5 13.9 35 2.8 35-13.7 0-13.3-13.4-21.8-26-18zm6 25c-3.9 0-7-3.1-7-7s3.1-7 7-7 7 3.1 7 7-3.1 7-7 7z"/>
  <path class="firstb" d="M14 27v-20c0-3.7-3.3-7-7-7s-7 3.3-7 7v41c0 8.2 9.2 17 20 17s20-9.2 20-20c0-13.3-13.4-21.8-26-18zm6 25c-3.9 0-7-3.1-7-7s3.1-7 7-7 7 3.1 7 7-3.1 7-7 7z"/>
</svg>

작업 및 유지 관리 편이를 위해 외부 스타일을 사용한다면, <img> 또는 background-image를 사용하면 안됩니다. <object>를 사용하는 경우 SVG 파일에서 내부적으로 스타일 시트를 참조해야 합니다. (다음 코드를 보세요)


SVG는 부모 클래스가 무엇인지 (예 : <object>) 알 수 없으므로 스타일을 사용하지 마세요. 인라인 SVG에서는 불필요하기 때문에 더 쉽게 작업할 수 있다는 장점이 있습니다.



외부 스타일

// <svg>태그 전에 선언
<?xml-stylesheet type="text/css" href="style.css"?>

// style.css 파일 내
.firstb { fill: yellow; }
.secondb { fill: red; }






 [ 한빛미디어 HTML+CSS 도서 보러가기]