[css] svg 크기 조절하기 (feat. svg? png?)

 

오늘의 주제

1. svg냐 png냐

2. svg 크기 조절하기

 

1. svg VS png

프로젝트들을 둘러보다 보면 아이콘을 어떤 곳에서는 png로 넣어두고 다른 곳에서는 svg로 되어있다. 페이지를 보면 외적으로는 다름을 발견하기 힘들다. 그럼 둘 중에 느낌오는걸로 골라다가 작업 하면 될까? . 대부분의 아이콘들은 svg로 관리하면 좋다는것이 나의 생각이다.

 

일단 파일의 크기가 차이가 난다. 작업하는 피그마에서 단순한 아이콘을 svg로, png(1배수)로 각각 다운로드 했다. 

 

[단순 아이콘]

SVG	PNG(1배수)	PNG(2배수)
267바이트	498바이트	789바이트

 

 

png 1배수랑만 비교해도  거의 2배가 차이가 난다.  커다란 프로젝트에 아이콘이 한두개가 아닐것이고 화면에서 보이는 아이콘의 크기가 조금만 커져서 더 높은 배수의 png를 뽑다보면 전체 용량 차이는 더 벌어질 것이다. (svg는 커져도 해상도가 유지되는 매-직) 또한 아이콘 특성상 색상만 바뀌어서 다른 곳에서 재사용되는 경우가 많다. 그런데 기존에 png를 이용해서 사용하고 있었다면? 다른 색상의 아이콘을 따로 png로 받아서 넣어줘야만 한다.. 하지만 svg로 사용하고 있었다면  해당 svg를 그대로 가지고 와서 색상만 변경해주면 변경된 색상의 아이콘을 바로 적용해줄 수 있다. 

 

그렇다면 svg는 언제나 작을까? 그건 또 아니다. 커다란 사이즈의 이미지는 svg로 뽑으면 오히려 커지는 경우가 있다.

 

[큰 이미지]

SVG	PNG(1배수)
11.3MB	3MB

 

 

나의 경우 특정이미지를 png로 내려받으면 3MB 밖에 안하지만 svg로 받으면 11MB를 넘어가는 경우도 있었다. 그러니 작은 아이콘과 로고들은 svg로 뽑고 사이즈가 있는 이미지는 png로 다운로드 하는게 훨씬 이득이다!!

 

2. svg 조절하기

자 그럼 아이콘에 최적화된(?) svg를 가지고 놀아보자.

크기 조절을 원할때 단순하게 w, h 설정만으로는 원하는 목표를 얻지 못한다. 심지어 gpt 친구도 w, h 설정 해두고 "이제 정상적으로 보입니다^^" 라고.. 

 

자 그럼 하나의 svg 파일을 가지고 놀아보자.

<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
(....중략)
</svg>

 

일반적인 형태의 svg 파일이다. 내부 내용은 가볍게 생략해 두었다. 기본적으로 가로세로 16으로 된 svg이다. 이 아이콘의 크기를 늘이거나 줄이기 위해서 css에 width, height 만 설정하면 어떻게 될까?

늘렸을때,

줄였을때,

 

크기를 늘리면 크기는 그대로고 차지하는 영역의 가로세로만 늘어나고, 줄이면 svg가 잘려나간다..

svg는 조절할때 viewBox 값도 같이 변경해줘야 한다. 따라서 width, height을 주면서 기존 파일의 viewBox 값을 설정해줘야 한다.

아래는 Nextjs 에서 svg 사용시 예시이다.

import ArrowBottom from "@src/assets/arrow-bottom.svg";

// 키울때
<ArrowBottom viewBox="0 0 16 16" width={50} height={50} />
// 줄일때
<ArrowBottom viewBox="0 0 16 16" width={10} height={10} />

 

 

혹시 svg 선 색상을 변경하고 싶다면? 이는 css의 힘을 살짝 빌려야한다. 

 

.arrowWW {
  path {
    stroke: ${원하는 색상};
  }
}

 

가끔 path 를 까먹고 stroke만 선언한 상태에서 "왜 안되지 ㅡ,ㅡ" 했던 경험이 종종 있었던것은 안비밀이니  까먹지 않으셨으면들 좋겠다.

 

---

 

아 png 아이콘들 바꿔야지...