[트러블슈팅] svg viewBox

Jo yun hee·2022년 6월 29일

삽질 기록

목록 보기

1/4

팀프로젝트로 진행하고 있는 사지마캣 트러블슈팅 첫번째 기록이다.
스플래쉬 화면 구현을 진행하던 중 svg에서 삽질이 시작되었다.

문제점

svg 이미지 스프라이트기법을 사용하여 고양이가 눈을 떳다 감았다 하는 애니메이션을 구현하던 중 고양이 얼굴 하나만 나와야하는데 이미지스프라이트 전체 이미지가 뜬다. 애니메이션으로 인해 이상한 깜빡임이 계속 되고 있었다.

css 코드에 문제일까? keyframe값을 잘못줬나.. 삽질이 시작되었다.

트러블 코드

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>animation</title>
    <style>
      .cat {
        background: url("./img/real-cat.svg") no-repeat;
        width: 94px;
        height: 86px;
        margin: 0 auto;
      }

      /* Using steps */
      .cat {
        animation: smile 0.5s steps(8) alternate infinite;
      }

      @keyframes smile {
        to {
          background-position: -752px 0;
        }
      }
    </style>
  </head>
  <body>
    <div class="cat"></div>
  </body>
</html>

해결진행

1.해결책

이미지스프라이트 svg파일을 확인해보니 width와 height값이 없다는 것을 발견하였다.

이미지 사이즈를 넣어줬더니 해결이 되었다.

지금은 하나의 svg파일을 사용하니까 괜찮지만 만약에 수십개의 파일이 존재한다면 그때도 이렇게 파일을 하나하나씩 열어 사이즈를 기입해줘야 하는건가..? 라는 의문이 들었다. 다른 방법을 시도해보았다.

2.해결책

svg파일에 적어둔 width와 height값을 제거하고 css파일에 background-size속성을 추가해보았다.

      .cat {
        background: url("./img/real-cat.svg") no-repeat;
        background-size: 752px 86px;   //추가
        width: 94px;
        height: 86px;
        margin: 0 auto;
      }

오!! 해결이 되었다.
background-size: 가로크기 세로크기; 기본값은 auto이며, 요소 배경으로 이미지를 삽입하면 요소 크기와 상관 없이 이미지 원본 크기에 맞추게 된다.

background-size 속성은 이미지의 크기를 설정해주는 작업으로 svg에 width, height를 추가해주지 않아도 background-size만 추가해주면 잘 작동하게 되는 것이다.

해결은 했지만 이게 근본 원인일까? 라는 의문이 들어 멘토님에게 여쭤보았다. 근본원인은 바로 viewBox를 공부해보면 답이 나올꺼라는 피드백을 받고 구글링을 시작하며 파헤쳐 보았다.

근본 원인

SVG 뷰박스(viewBox)?
화면에 실질적으로 보여지는 영역이다.

svg태그 속성에 viewBox라는 속성이 있다.
우선 svg의 viewBox 속성은 이미지 표시 영역 크기에 맞춰서 확대, 축소가 된다.

svg 파일에 width, height를 설정해주지 않을 때는 viewBox 속성만 있다. 근데 viewBox로 설정하면 표시 영역 div.cat의 크기에 맞춰서 확대, 축소가 일어난다. (반응형 작업을 위한 속성)
이때 div의 width를 96px로 해주었기 때문에 svg는 그만큼 작아지면서 전체 이미지가 작게 표시되면서 애니메이션 속성으로 인해 깜빡이게 되는 것이다.

svg 코드를 살펴보면 viewBox 태그를 확인할 수 있다.

실제이미지 높이, 넓이 크기가 지정되어 있다. 나는 고양이 얼굴 한개 크기만 화면에 보여지면 되니까!! 저 부분을 viewBox="0 0 94 86" 수정을 해주고 다시 화면에 띄어보니! 해결이 되었다!!!background-size속성을 주지 않고도 svg viewBox 속성을 통해 해결할 수도 있다.

끝마치며...

svg 트러블슈팅을 통해 svg의 특성과 viewBox를 공부하고 알게되었다. viewBox 속성을 이용하면 화면에 크기에 따라 svg 요소의 크기가 자동으로 조절된다. 이런 이유로 svg 요소를 사용하면서 반응형 웹을 설계하기 위해서 viewBox는 필수 속성이라고 한다.

참고:https://dolly77.tistory.com/entry/CSS3-backgroundsize-속성알아보기
https://jw910911.tistory.com/26

Jo yun hee