[HTML] SVG 크기 조절은 어떻게 하죠?

2022.9.4 (일) 작성

1. 에러❗️

svg의 속성값으로 들어간 width와 height를 변경하니, 아이콘이 잘려서 표시된다.

조절 전 👉 조절 후

2. 상황

1. 구글 아이콘에서 아이콘을 svg로 다운 받았다.

2. 그리고 코드에 삽입해주었다. (리액트)

const OutIcon = () => (
  <svg width="48" height="48">
    <path d="M9 42q-1.2 0-2.1-.9Q6 40.2 6 39V9q0-1.2.9-2.1Q7.8 6 9 6h14.55v3H9v30h14.55v3Zm24.3-9.25-2.15-2.15 5.1-5.1h-17.5v-3h17.4l-5.1-5.1 2.15-2.15 8.8 8.8Z" />
  </svg>
);

//리액트 jsx 코드
...
<WithdrawalBtn className="withdrawalBtn" onClick={handleWithdraw}>
    <OutIcon />  //<- 삽입
    회원탈퇴
</WithdrawalBtn>

삽입 후 결과

3. 크기를 줄이기 위해 width와 height 속성을 줄였더니…. 아이콘이 짤린다.

const OutIcon = () => (
  <svg width="18" height="18">
    <path d="M9 42q-1.2 0-2.1-.9Q6 40.2 6 39V9q0-1.2.9-2.1Q7.8 6 9 6h14.55v3H9v30h14.55v3Zm24.3-9.25-2.15-2.15 5.1-5.1h-17.5v-3h17.4l-5.1-5.1 2.15-2.15 8.8 8.8Z" />
  </svg>
);

이렇게 짤린다...

3. 해결💡

1. viewBox 속성을 사용해주면 된다!
2. viewBox MDN 참고.
3. 사실 mdn 내용이 잘 이해되지 않았다. 그래서 실제 코드로 실험해보고, 내 식대로 뷰박스에 대해 설명해보자면...
   👉 viewBox는 아이콘의 실제 크기와 위치(보이는 부분)를 정의한다.
   👉 viewBox 속성은 min-x, min-y, width, height를 순서대로 써줘야 한다.
   👉 즉, 이 속성으로 이 svg는 여기서부터(min-x, min-y) 이만큼(width, height)이 보여야 해~라고 알려주는 것이다.
4. 코드에 적용해보자.

const OutIcon = () => (
  <svg width="18" height="18" viewBox="0 0 48 48">
    <path d="M9 42q-1.2 0-2.1-.9Q6 40.2 6 39V9q0-1.2.9-2.1Q7.8 6 9 6h14.55v3H9v30h14.55v3Zm24.3-9.25-2.15-2.15 5.1-5.1h-17.5v-3h17.4l-5.1-5.1 2.15-2.15 8.8 8.8Z" />
  </svg>
);

이제 짤리지 않고 온전하게 들어갔다!

❗️아래 내용만 기억하면 된다.

4. 알게 된 것✨

✅ svg 크기를 줄이고 싶다면 viewBox 속성을 쓰자!

• width : 내가 만들고 싶은 너비
• height : 내가 만들고 싶은 높이
• viewBox : 0 0 원래 너비 원래 크기
• (앞의 0 0 은 이미지 시작 지점)

<svg 
	width="18"   //내가 만들고 싶은 너비
	height="18"  //내가 만들고 싶은 높이
	viewBox="0 0 48 48">  
	//다운받은 그 상태의 아이콘에서 내가 보여주고 싶은 부분의,
	//시작 x좌표, 시작 y좌표, 원래 너비, 원래 높이
...
</svg>

+) svg에 색을 칠하려면? CSS fill 속성 쓰기

.svg {
	fill: #FFF;
}