CSS로 SVG 제어하기

장점

벡터와 비트맵의 차이에서 설명한 것처럼 벡터는 장점이 많은 이미지 형식이다. 여기에 덧붙이자면 간단한 이미지의 경우 비트맵보다 훨씬 가볍고, CSS로 디자인 속성을 제어할 수 있으며, 이미지를 구성하는 전체 코드를 자바스크립트 객체로 만들어 사용할 수 있다.

SVG는 확장 가능한 벡터 그래픽(Scalable Vector Graphics)이라는 뜻으로, 2차원 그래픽을 표현하기 위한 파일형식이다. svg 확장자로 저장하고 사용할 수 있다. SVG는 그 자체로 이미지파일이자 소스파일로 Illustrator와 같은 이미지툴 또는 코드 에디터에서 바로 편집할 수 있다. SVG를 브라우저에 불러와 보여주는 방법에는 여러가지가 있는데 자세한 구현방법은 웹에서 SVG 사용하기의 구현옵션에 잘 정리되어 있다.

구조

Illustrator에서 로고 이미지를 만들고 SVG로 저장했다.

이 파일을 코드 에디터에서 열어보면 아래와 같은 코드로 구성되어 있는 것을 볼 수 있다. XML 문서의 구조와 동일하며, svg 요소 내부에는 도형을 그리는 그래픽 요소와 이를 감싸는 컨테이너 요소로 채워져 있다. 자세히

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="645.698px" height="136.753px" viewBox="0 0 645.698 136.753" enable-background="new 0 0 645.698 136.753" xml:space="preserve">
  <g>
    <rect x="0" y="0" fill="#2A3D4E" width="27.438" height="106.395"/>
    <polygon fill="#2A3D4E" points="57.224,0 81.454,0 81.454,20.31 65.277,45.395 50.096,45.395 57.224,20.31 	"/>
    <path fill="#2A3D4E" d="M182.575,39.834c3.23-4.941,7.065-8.702,11.508-11.294c4.439-2.589,9.322-3.883,14.642-3.883 c9.171,0,16.155,2.829,20.952,8.481c4.797,5.653,7.198,13.872,7.198,24.657v48.6h-25.653V64.779c0.044-0.62,0.08-1.261,0.107-1.925 c0.022-0.664,0.034-1.615,0.034-2.851c0-5.652-0.831-9.752-2.494-12.293c-1.662-2.54-4.347-3.813-8.052-3.813 c-4.845,0-8.588,1.995-11.225,5.984c-2.636,3.994-4.001,9.764-4.096,17.32v39.193h-25.653V64.779 c0-8.839-0.764-14.528-2.283-17.069c-1.518-2.54-4.229-3.813-8.123-3.813c-4.893,0-8.672,2.006-11.331,6.022 c-2.662,4.015-3.989,9.752-3.989,17.208v39.267H108.46V26.582h25.656v11.685c3.134-4.513,6.733-7.909,10.796-10.189 c4.06-2.282,8.54-3.421,13.433-3.421c5.509,0,10.379,1.331,14.609,3.99C177.18,31.309,180.388,35.037,182.575,39.834"/>
    <path fill="#2A3D4E" d="M286.189,94.85v41.903h-25.513V26.582h25.513v11.685c3.518-4.654,7.412-8.086,11.689-10.295 c4.277-2.212,9.189-3.315,14.75-3.315c9.837,0,17.905,3.909,24.232,11.722c6.313,7.814,9.47,17.877,9.47,30.181 c0,12.305-3.157,22.364-9.47,30.178c-6.327,7.816-14.395,11.722-24.232,11.722c-5.56,0-10.472-1.103-14.75-3.312 C293.601,102.939,289.707,99.507,286.189,94.85 M303.151,43.186c-5.465,0-9.654,2.006-12.581,6.022 c-2.92,4.015-4.381,9.797-4.381,17.353c0,7.552,1.461,13.337,4.381,17.353c2.927,4.016,7.116,6.021,12.581,6.021 c5.465,0,9.631-1.994,12.5-5.988c2.876-3.99,4.314-9.787,4.314-17.386c0-7.603-1.439-13.4-4.314-17.389 C312.782,45.182,308.616,43.186,303.151,43.186"/>
    <path fill="#2A3D4E" d="M403.129,24.657c13.732,0,24.455,3.706,32.176,11.118c7.722,7.411,11.578,17.673,11.578,30.785 s-3.857,23.374-11.578,30.785c-7.721,7.412-18.444,11.115-32.176,11.115c-13.776,0-24.55-3.703-32.316-11.115 c-7.772-7.411-11.651-17.673-11.651-30.785s3.878-23.374,11.651-30.785C378.58,28.363,389.354,24.657,403.129,24.657  M403.129,42.898c-5.649,0-9.971,2.032-12.935,6.095c-2.965,4.06-4.455,9.916-4.455,17.566c0,7.647,1.49,13.503,4.455,17.566 c2.964,4.06,7.286,6.091,12.935,6.091c5.56,0,9.809-2.031,12.758-6.091c2.942-4.063,4.418-9.919,4.418-17.566 c0-7.651-1.475-13.506-4.418-17.566C412.938,44.93,408.689,42.898,403.129,42.898"/>
    <path fill="#2A3D4E" d="M524.701,48.315c-2.233-1.043-4.453-1.818-6.659-2.316c-2.211-0.498-4.433-0.749-6.667-0.749 c-6.55,0-11.608,2.103-15.139,6.309c-3.541,4.204-5.311,10.226-5.311,18.064v36.771h-25.51V26.582h25.51v13.112 c3.282-5.225,7.042-9.038,11.29-11.438c4.255-2.4,9.352-3.599,15.295-3.599c0.856,0,1.777,0.037,2.772,0.107 c1.003,0.07,2.45,0.225,4.351,0.461L524.701,48.315z"/>
    <path fill="#2A3D4E" d="M574.008,3.92v22.662h26.289v18.241h-26.289v33.85c0,3.705,0.736,6.213,2.205,7.519 c1.474,1.309,4.396,1.961,8.769,1.961h13.112v18.241h-21.881c-10.074,0-17.205-2.102-21.41-6.305 c-4.21-4.204-6.304-11.343-6.304-21.416v-33.85h-12.685V26.582H548.5V3.92H574.008z"/>
    <path fill="#2A3D4E" d="M619.975,78.817h25.723v21.733l-17.671,26.582h-15.178l7.126-26.582V78.817z M619.975,26.582h25.723V54.16 h-25.723V26.582z"/>
  </g>
</svg>

CSS 추가하기

로고의 색깔을 바꿔보자. 만약 SVG 파일의 내부에서 색상을 직접 변경한다면 svg 요소 하위에 스타일을 추가해야 한다. 그렇지 않고 SVG 파일 외부에서 CSS를 적용한다면 svg 요소를 만들기 전 외부 스타일시트의 경로를 넣어주어야 한다. XML 파서가 코드를 잘못 해석하지 않도록 스타일시트는 아래와 같이 입력해야 한다.

1) SVG 파일에 직접 스타일시트 추가

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <style type="text/css">
    <![CDATA[
    .white { fill: #FFFFFF; }
    ]]>
  </style>
  .... <!-- 그래픽 요소에 white 클래스를 추가합니다 -->
</svg>

2) SVG 파일 외부의 스타일시트 불러오기

<?xml-stylesheet type="text/css" href="style.css"?>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
.... <!-- 그래픽 요소에 white 클래스를 추가합니다 -->
</svg>
.white { fill: #FFFFFF; }

흰색으로 바뀐 로고가 잘 보이도록 바깥 영역을 어둡게 하면 아래와 같은 결과를 볼 수 있다. 참고로 CSS 선택자를 적절히 활용하면 위에서 진행한 것처럼 그래픽 요소마다 클래스명을 주지 않고도 다양한 효과를 줄 수 있다.

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="645.698px" height="136.753px" viewBox="0 0 645.698 136.753" enable-background="new 0 0 645.698 136.753" xml:space="preserve">
  <style type="text/css">
  <![CDATA[
  svg * { fill: #FFFFFF!important; }
  ]]>
  </style>
  <g>
    <rect x="0" y="0" fill="#2A3D4E" width="27.438" height="106.395"/>
    <polygon fill="#2A3D4E" points="57.224,0 81.454,0 81.454,20.31 65.277,45.395 50.096,45.395 57.224,20.31 	"/>
    <path fill="#2A3D4E" d="M182.575,39.834c3.23-4.941,7.065-8.702,11.508-11.294c4.439-2.589,9.322-3.883,14.642-3.883 c9.171,0,16.155,2.829,20.952,8.481c4.797,5.653,7.198,13.872,7.198,24.657v48.6h-25.653V64.779c0.044-0.62,0.08-1.261,0.107-1.925 c0.022-0.664,0.034-1.615,0.034-2.851c0-5.652-0.831-9.752-2.494-12.293c-1.662-2.54-4.347-3.813-8.052-3.813 c-4.845,0-8.588,1.995-11.225,5.984c-2.636,3.994-4.001,9.764-4.096,17.32v39.193h-25.653V64.779 c0-8.839-0.764-14.528-2.283-17.069c-1.518-2.54-4.229-3.813-8.123-3.813c-4.893,0-8.672,2.006-11.331,6.022 c-2.662,4.015-3.989,9.752-3.989,17.208v39.267H108.46V26.582h25.656v11.685c3.134-4.513,6.733-7.909,10.796-10.189 c4.06-2.282,8.54-3.421,13.433-3.421c5.509,0,10.379,1.331,14.609,3.99C177.18,31.309,180.388,35.037,182.575,39.834"/>
    <path fill="#2A3D4E" d="M286.189,94.85v41.903h-25.513V26.582h25.513v11.685c3.518-4.654,7.412-8.086,11.689-10.295 c4.277-2.212,9.189-3.315,14.75-3.315c9.837,0,17.905,3.909,24.232,11.722c6.313,7.814,9.47,17.877,9.47,30.181 c0,12.305-3.157,22.364-9.47,30.178c-6.327,7.816-14.395,11.722-24.232,11.722c-5.56,0-10.472-1.103-14.75-3.312 C293.601,102.939,289.707,99.507,286.189,94.85 M303.151,43.186c-5.465,0-9.654,2.006-12.581,6.022 c-2.92,4.015-4.381,9.797-4.381,17.353c0,7.552,1.461,13.337,4.381,17.353c2.927,4.016,7.116,6.021,12.581,6.021 c5.465,0,9.631-1.994,12.5-5.988c2.876-3.99,4.314-9.787,4.314-17.386c0-7.603-1.439-13.4-4.314-17.389 C312.782,45.182,308.616,43.186,303.151,43.186"/>
    <path fill="#2A3D4E" d="M403.129,24.657c13.732,0,24.455,3.706,32.176,11.118c7.722,7.411,11.578,17.673,11.578,30.785 s-3.857,23.374-11.578,30.785c-7.721,7.412-18.444,11.115-32.176,11.115c-13.776,0-24.55-3.703-32.316-11.115 c-7.772-7.411-11.651-17.673-11.651-30.785s3.878-23.374,11.651-30.785C378.58,28.363,389.354,24.657,403.129,24.657  M403.129,42.898c-5.649,0-9.971,2.032-12.935,6.095c-2.965,4.06-4.455,9.916-4.455,17.566c0,7.647,1.49,13.503,4.455,17.566 c2.964,4.06,7.286,6.091,12.935,6.091c5.56,0,9.809-2.031,12.758-6.091c2.942-4.063,4.418-9.919,4.418-17.566 c0-7.651-1.475-13.506-4.418-17.566C412.938,44.93,408.689,42.898,403.129,42.898"/>
    <path fill="#2A3D4E" d="M524.701,48.315c-2.233-1.043-4.453-1.818-6.659-2.316c-2.211-0.498-4.433-0.749-6.667-0.749 c-6.55,0-11.608,2.103-15.139,6.309c-3.541,4.204-5.311,10.226-5.311,18.064v36.771h-25.51V26.582h25.51v13.112 c3.282-5.225,7.042-9.038,11.29-11.438c4.255-2.4,9.352-3.599,15.295-3.599c0.856,0,1.777,0.037,2.772,0.107 c1.003,0.07,2.45,0.225,4.351,0.461L524.701,48.315z"/>
    <path fill="#2A3D4E" d="M574.008,3.92v22.662h26.289v18.241h-26.289v33.85c0,3.705,0.736,6.213,2.205,7.519 c1.474,1.309,4.396,1.961,8.769,1.961h13.112v18.241h-21.881c-10.074,0-17.205-2.102-21.41-6.305 c-4.21-4.204-6.304-11.343-6.304-21.416v-33.85h-12.685V26.582H548.5V3.92H574.008z"/>
    <path fill="#2A3D4E" d="M619.975,78.817h25.723v21.733l-17.671,26.582h-15.178l7.126-26.582V78.817z M619.975,26.582h25.723V54.16 h-25.723V26.582z"/>
  </g>
</svg>