SVG vs PNG

SVG vs PNG

 

정적 페이지를 만들면서 이미지를 어떤 파일을 써야 할지 생각을 하다가

예전에 문득 png 3배율이나 svg 를 사용하라는 말이 떠올라서 왜지? 라는 생각에 조금 찾아봤다.

 

이미지 파일에는 무손실/무압축으로 jpg, png, svg 등등 나뉘긴 하지만

svg 와 png 만 살펴보기로 함

 

특징

 

1. 이미지가 깨지지 않음.

2. 상대적으로 용량이 적고 렌더링이 빠름

4. HTML 코드로 스타일링을 할 수 있음

 

SVG 의 V 는 vector 로 좌표 값들이 이어져서 만들어져있기 때문에

확대, 축소해도 이미지가 깨지지 않음

 

PNG 와 JPG 는 비트맵, bit를 를 가지고 표현하기 때문에 확대, 축소에 이미지가 깨진다.

 

렌더링 차이

 

SVG 는 용량도 상대적으로 작기 때문에 브라우저 로딩 속도가 빠르다.

하지만 좌표를 이용하기 때문에 복잡한 이미지 같은 경우 좌표가 너무 많이 들어가면 오히려 속도가 느릴수도 있다.

 

PNG 는 비트의 정보를 가지고 렌더링 하기 때문에 상대적으로 용랴이 커서 로딩 속도가 느리다.

 

HTML 스타일링 (애니메이션)

인터랙티브에 관심이 있어서 인터랙티브 책을 보고 있었는데

앞 부분에 svg 를 제어하는 부분이 나왔다. 

 

svg 내부 태그들 width, height, viewBox, fill, path 등을 제어하여 스타일링, 애니메이션을 넣을 수 있다.

<svg width="168" height="123" viewBox="0 0 168 123" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M151.634 19.4083L151.562 44.7867C151.562 47.3811 149.838 49.9756 146.412 51.9629C142.985 53.9502 138.466 54.9516 133.946 54.9568L134.019 29.5783C138.539 29.5783 143.048 28.5769 146.485 26.5844C149.921 24.5919 151.624 22.0079 151.634 19.4083Z" fill="#EEA009"/>
<path d="M133.493 67.4307L133.42 92.8092C133.42 90.1785 131.681 87.5477 128.213 85.5449C121.272 81.5547 110.067 81.5547 103.172 85.5449C99.7514 87.527 98.033 90.1213 98.0278 92.7209L98.1008 67.3425C98.1008 64.7481 99.8191 62.1537 103.245 60.1663C110.139 56.1762 121.345 56.1762 128.286 60.1663C131.754 62.1692 133.498 64.8 133.493 67.4307Z" fill="#EEA009"/>
<path d="M167.235 48.6887L167.162 74.0672L133.358 93.6393L133.431 68.2609L167.235 48.6887Z" fill="#EEA009"/>
<path d="M146.406 12.1337C153.342 16.1239 153.379 22.5942 146.485 26.5844C143.048 28.5769 138.539 29.5732 134.019 29.5784L167.235 48.6836L133.446 68.2557C133.863 65.3552 132.139 62.3716 128.286 60.156C121.345 56.1658 110.139 56.1658 103.245 60.156C96.3511 64.1462 96.3875 70.6167 103.328 74.612C107.182 76.8277 112.352 77.8135 117.387 77.5644L83.9531 96.9239L0.119629 48.668L83.4324 0.412109L116.278 19.3097C116.278 16.7153 117.981 14.095 121.418 12.1025C128.239 8.13826 139.471 8.14348 146.406 12.1337Z" fill="#FFC127"/>
<path d="M117.356 77.5696L117.289 102.948L83.8491 122.313L83.922 96.9342L117.356 77.5696Z" fill="#EEA009"/>
<path d="M83.9219 96.9342L83.849 122.313L0 74.0672L0.0728986 48.6887L83.9219 96.9342Z" fill="#EEA009"/>
</svg>

article {
  display: flex;
  justify-content: center;
  width: 500px;
  border: 1px solid #000;
  box-sizing: border-box;
  padding: 50px;
  margin: 50px auto;
}

article svg {
  width: 100%;
}

article svg path {
  fill: transparent;
  stroke: gray;
  stroke-width: 2;
  stroke-dasharray: 1420;
  stroke-dashoffset: -1420;
  transition: all 5s;
}

article:hover svg path {
  stroke-dashoffset: 0;
  stroke-dashoffset: 0;
  fill: brown;
}

path 에 접근하여 stroke, fill 등을 제어, 스타일링 하고 있다.

 

See the Pen Untitled by jaeil.joo (@jaeilnet) on CodePen.

 

 

결론적으로는 

 

svg 를 사용하는게 png 보다 용량도 적고 속도도 빠르면서 필요에 따라 스타일링도 쉽게 할 수 있어서 svg 를 쓰는 게 좋을 것 같다.