SVG를 use 태그로 사용하기

이 기사는 J2complexed Advent Calendar 2017의 15 일째 기사입니다.

SVG를 표시하는 데는 여러 가지 방법이 있습니다.
1. 인라인
2. img 태그로 svg 이미지 파일 불러오기
3. css에서 svg 이미지 파일 로드
4. object 태그

1.의 파생, use 태그를 사용한 인라인의 작성 방법이 편리하므로, 정리한다.
(이제 여러 곳에서 정리되어 있는 지금 갱화이지만, 후반의 이야기와 알기 쉬운 기사를 확실히 찾을 수 없었으므로, 자신 정리용으로)

같은 이미지 여러 곳에서 사용하고 싶다.

svg 이미지를 img 태그 등으로 읽어들이면, 지금까지의 보통의 이미지와 같이, 사용하기에는 편리.
하지만 애니메이션 시키거나 색을 바꾸거나 svg의 좋은 곳이 그다지 활용되지 않는다.
그렇지만, 인라인으로 코피페 버리는 것은, 코드가 큰 일이 되기 때문에 하고 싶지 않다.
그럴 때 use .

use 태그 기본 사용법

발신자

페이지의 어딘가에서 svg의 원래 코드를 읽어 둡니다.
여기에서는 표시하지 않는다, 어디까지나 호출원이므로, symbol 태그로 구워 둔다. symbol 태그는, 그 자리에서 표시하는 것이 아니라, 나중에 use 태그로 호출하는 용으로서 정의만을 하는 것입니다.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="svg-symbol">
  <symbol viewbox="0 0 512 512" id="reindeer">
   <path class="st0" d="M441.1,0c-10.1,0-18.3,8.2-18.3,18.3c0,23.2-1.2,41.5-3.7,55.1c-1.8,10.2-4.3,17.8-7.1,23.2
        c-2.1,4-4.2,6.8-6.5,9c-3.5,3.2-7.6,5.5-14.1,7.3c-6.4,1.7-15.1,2.6-26,2.6c-16.9,0-35.8,0-55.7,0c-5.8,0-8.5-1.1-10-2.1 ....> <!-- 略 -->  </symbol>
</svg>

symbol 태그에 viewbox 속성으로 캔버스 크기를 넣을 수 있습니다. svg 태그내에 몇개도 symbol 를 격납할 수 있으므로, 캔버스 사이즈는 symbol 측에 둔 쪽이 취급하기 쉽습니다.id 속성으로 호출 할 때 이름을 지정하십시오.

전화하는 사람

<svg viewBox="0 0 512 512" class="reindeer"><use xlink:href="#reindeer"></use></svg>

사이즈 변경 무제한! 색 변경 무제한! 짧은! 하피

.reindeer {
  width: 300px;
  fill: #aaa;
}

부품별로 색을 바꾸고 싶습니다.

색 바꾸기 무제한이라고 하지만, 위의 쓰는 방법이라면, 전체의 색을 1색으로 할 수 밖에 할 수 없습니다.
흑백 로고를, 여기에서는 본래의 칼라로 하고 싶다, 라든지, 전체의 색이 아니고 파트 마다 색 바꾸고 싶은 욕심은 자주 일어나는 것입니다.

발신자

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="svg-symbol">
  <symbol viewbox="0 0 512 512" id="reindeer">
    <g id="face">
    <path class="st0" d="M441.1,0c-10.1,0-18.3,8.2-18.3,18.3c0,23.2-1.2,41.5-3.7,55.1c-1.8,10.2-4.3,17.8-7.1,23.2
        c-2.1,4-4.2,6.8-6.5,9c-3.5,3.2-7.6,5.5-14.1,7.3c-6.4,1.7-15.1,2.6-26,2.6c-16.9,0-35.8,0-55.7,0c-5.8,0-8.5-1.1-10-2.1
        c-1.1-0.7-1.9-1.5-2.9-2.9c-1.4-2.2-2.9-6.3-3.7-12c-0.8-5.6-1.1-12.6-1.1-20c0-5.3,0.1-10.8,0.1-16.4c0-10.1-8.2-18.3-18.3-18.3
        c-10.1,0-18.3,8.2-18.3,18.3c0,5.1-0.1,10.6-0.1,16.4c0,7.2,0.2,14.8,1.1,22.5c0.6,4.8,1.6,9.7,3,14.5c-13.6,0-27.4,0-41.4,0
        c-5.8,0-8.5-1.1-10-2.1c-1.1-0.7-1.9-1.5-2.9-2.9c-1.4-2.2-2.9-6.3-3.7-12c-0.8-5.6-1.1-12.6-1.1-20c0-5.3,0.1-10.8,0.1-16.4
        c0-10.1-8.2-18.3-18.3-18.3s-18.3,8.2-18.3,18.3c0,5.1-0.1,10.6-0.1,16.4c0,7.2,0.2,14.8,1.1,22.5c0.6,4.8,1.6,9.7,3,14.5
        c-3.2,0-6.4,0-9.6,0c-17.2,0-29.6-2.5-38.4-6.3c-6.6-2.8-11.3-6.3-15.1-10.5c-5.7-6.3-9.7-14.8-12.3-26.4
        c-2.6-11.6-3.6-25.9-3.6-42c0-10.1-8.2-18.3-18.3-18.3c-10.1,0-18.3,8.2-18.3,18.3c0,15.5,0.7,30.5,3.4,44.7
        c2,10.6,5,20.9,9.8,30.4c7.1,14.3,18.8,26.9,34.5,34.9c15.8,8,35,11.8,58.2,11.8c51.8,0,103.5,0,148.9,0v65.7
        c-0.3,24.4-56.6,25-114.6,32C92.2,261.9,58.1,296.2,75.3,344.8c17,48.2,62.3,59,101.6,59s57.1,0.7,62.3,19.7
        c9.8,36.1,23,88.5,23,88.5h183.6l-65.6-213.1c0,0,49.2-3.3,59-26.2c9.8-22.9-16.3-36.6-45.3-30.5c-32.9,6.9-49.9-4.6-49.9-27.4
        v-0.3V152c7.5,0,14.6,0,21.5,0c15,0,28.6-1.2,41.3-5.6c9.5-3.3,18.4-8.5,25.7-16c5.4-5.6,9.9-12.2,13.4-19.6
        c5.2-11.1,8.5-24,10.6-39.1c2.1-15.1,3-32.7,3-53.4C459.4,8.2,451.2,0,441.1,0z M257.5,307.7c-8,0-14.5-6.5-14.5-14.5
        c0-8,6.5-14.5,14.5-14.5c8,0,14.5,6.5,14.5,14.5C272,301.2,265.5,307.7,257.5,307.7z"/>
</g>
<g id="nose">
    <circle class="st0" cx="77" cy="303" r="17.5"/>
</g>
  </symbol>
</svg>

아까의 코드를, 색 바꾸고 싶은 파트마다 g 태그로 온다. group의 g입니다.
group에 id 속성으로 이름을 붙인다.

전화하는 사람

여기도 변함없이 use, 하지만, 방금전 g 태그로 묶은 파트 마다 호출합니다.

<svg viewBox="0 0 512 512" class="rudolph"><use xlink:href="#reindeer"></use>
  <use class="face" xlink:href="#face"></use>
  <use class="nose" xlink:href="#nose"></use>
</svg>

그것을 부품별로 색칠

.rudolph {
  width: 250px;
  .face {
    fill: #472807;
  }
  .nose {
    fill: #FB0D1B;
  }
}

루돌프에 들어오는 그림자처럼 보였다.

파트의 요소가 편차의 위치에 있어도, 색 같은 것으로 OK라면, 하나의 g 태그 안에 돌진할 수 있으므로, 색수가 많아지지 않으면 깨끗이 걸립니다.
로고라든지, 여기에서는 화이트 베이스로 이쪽에서는 블랙 베이스(그리고 농담이 여러가지)라든지, 헤더에서는 컬러이지만 풋터에서는 흑백이다! 라든지 자주 있으므로, 그럴 때 편리해지고 있습니다.