WeniVooks

SVG, Canvas

1. SVG

• 확장 가능한 벡터 그래픽(scalable vector graphics)으로 XML 기반의 2차원 그래픽입니다. HTML 태그의 집합으로 이루어져 있습니다. 즉, css와 javascript로 컨트롤이 가능합니다.

• 단순한 아이콘, 로고, 도형 등을 구현할 때 많이 사용합니다

1.1 SVG 장단점

• 장점

  • 확대: 아무리 확대를 해도 이미지가 깨지지 않습니다.
  • 용량: 이미지의 크기를 키워도 용량이 늘어나지 않습니다.

• 단점

  • 용량: 코드로 이루어져있다보니, 복잡한 이미지의 경우 파일사이즈가 커집니다

1.2 SVG 사용방법

1. 이미지 태그로 사용하기

• 장점
  • 간단한 구현
  • 외부 파일로 관리하여 재사용 및 캐싱 가능
  • alt 속성으로 접근성 향상
• 단점
  • 추가적인 HTTP 요청 발생
  • JavaScript로 내부 조작 어려움
  • CSS로 SVG 내부 스타일링 제한적

<img src="favicon.svg" alt="weniv favicon" />

<img src="favicon.svg" alt="weniv favicon" />

2. CSS background 배경으로 넣기

• 간단한 구현
• CSS의 background-* 속성으로 쉽게 제어 가능 (크기, 위치 등)
• SVG 내부 요소 조작 불가 및 기능 제한(SVG 애니메이션)

button {
  background: url(./favicon.svg) no-repeat 50% 50% / cover;
}

button {
  background: url(./favicon.svg) no-repeat 50% 50% / cover;
}

3. 인라인으로 넣기

• 장점
  • DOM에 직접 포함되어 JavaScript로 조작 가능
  • CSS로 스타일링 가능 (fill, stroke 등 SVG 특정 속성 포함)
  • 추가적인 HTTP 요청이 없어 로딩 속도가 빠름
  • 동적으로 SVG 내용을 변경 가능
• 단점
  • HTML 파일 크기 증가
  • 캐싱 불가능
  • 코드 반복 시 페이지 크기가 커짐

2.Canvas

• JavaScript와 HTML 요소를 통해 그래픽을 그립니다.
• 픽셀기반의 비트맵 방식입니다.
• 그래픽이 주작업인 게임에 적합합니다.

참고 사이트

• 이미지 파일 변환 PNG to SVG Converter