SVG에 Transition적용하기

💻 웹에서 SVG 사용하기

웹 상에서 아이콘, 로고, 일러스트이미지 등을 사용한다면, SVG를 사용하는 것이 유일한 방법이다. SVG는 확장 가능한 벡터 그래픽(Scalable Vector Graphics)의 약자로 모든 스크린에서 화질이 선명하며, 최소용량이고, 편집과 수정이 쉽다는 장점이 있다. 본 포스트에서 이러한 SVG가 무엇인지 간단하게 알아보고 이러한 SVG로 Transition효과 내는 방법을 알아보자.

🖤 SVG

2차원 그래픽을 표현하기 위해 만들어진 XML파일 형식의 마크업 언어다. 벡터는 기본적인 도형, 패스 등 일러스트에서 작업하는 모든 것이 될 수 있다. 일반적으로 웹상 이미지 파일형식은 JPEG를 많이 사용한다. SVG는 코드로 수정할 수 있기때문에 ((CSS/JS)로 이미지 변경이 가능) 다른 이미지 형식보다 강력한 기능을 가지고 있다.
웹에서 SVG를 사용하는 방법은 다양하다. 일부는 유용하지만 피해야 할 것도 있다. 해상도 독립성 및 파일 용량의 최소화를 위해 SVG를 일반 이미지 형식같이 <img>로 참조하거나, CSS에서 background-image로 참조한다.

💫 CSS 조작

SVG의 가장 큰 장점은 CSS 사용해 스타일을 변경할 수 있다는 것이다. 일부 페이지에서 파란색 아이콘을 주황색으로 바꾸고 싶을때, 새로운 파란색 아이콘을 다시 만들지 않아도 된다. SVG스타일변경 방법에는 두가지가 있다.
1. SVG 코드 내부에서 변경하는 방법(inline style)
대부분 모든 것이 구현가능하다. 하지만 <img> 및 background-image는 CSS3 애니메이션을 지원하지 않는다.

• hand.svg

<?xml version="1.0" encoding="UTF-8"?>
<svg id="_레이어_2" data-name="레이어 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 462.3 309.71">
  <defs>
    <style>
      .cls-1 {
        fill: #d00;
      }

      .cls-1, .cls-2 {
        stroke: #231815;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 10px;
      }

      .cls-2 {
        fill: #edc38c;
      }
    </style>
  </defs>
  <g id="_레이어_1-2" data-name="레이어 1">
    <g>
      <g>
        <path class="cls-2" d="M253.33,82V27.68c0-12.52-10.15-22.68-22.68-22.68s-22.68,10.15-22.68,22.68v54.33"/>
        <path class="cls-2" d="M253.33,82c0,10.17,8.25,18.42,18.42,18.42v181.41H87.68c-12.52,0-22.68-10.15-22.68-22.68s10.15-22.68,22.68-22.68h64.33s-104.33,0-104.33,0c-12.52,0-22.68-10.15-22.68-22.68s10.15-22.68,22.68-22.68h104.33s-124.33,0-124.33,0c-12.52,0-22.68-10.15-22.68-22.68s10.15-22.68,22.68-22.68h124.33s-104.33,0-104.33,0c-12.52,0-22.68-10.15-22.68-22.68s10.15-22.68,22.68-22.68H189.56c10.17,0,18.42-8.25,18.42-18.42"/>
      </g>
      <path class="cls-1" d="M294.63,77.56c-12.63,0-22.87,10.24-22.87,22.87v181.41c0,12.63,10.24,22.87,22.87,22.87h162.67V77.56h-162.67Z"/>
    </g>
  </g>

  <script>
    alert('hand');
  </script>
</svg>

• svg
  
  2. 외부 스타일 시트(external style)로 변경하는 방법
  작업 및 유지 관리 편이를 위해 외부 스타일을 사용한다면 <img> 또는 background-image를 사용하면 안된다. <object>를 사용하는 경우 SVG파일에서 내부적으로 스타일 시트를 참조해야한다.