SVG, Canvas

1. SVG 태그

확장 가능한 벡터 그래픽(scalable vector graphics)으로 XML 기반의 2차원 그래픽입니다. 픽셀이 아닌 수학적 경로와 도형으로 이미지를 표현하므로 어떤 크기로 확대해도 품질이 유지됩니다.

HTML 태그의 집합으로 이루어져 있습니다. 즉, css와 javascript로 컨트롤이 가능합니다.
단순한 아이콘, 로고, 도형 등을 구현할 때 많이 사용합니다

1.1 SVG 장단점

장점
- 확장성: 어떤 해상도에서도 선명함.
- 편집 가능: CSS로 색상, 크기 변경 가능
- 접근성: 텍스트 정보 포함 가능 (alt 텍스트 등)
- SEO 친화적: 검색엔진이 내용을 읽을 수 있음
- 작은 파일 크기: 단순한 도형이나 아이콘의 경우 매우 작음
단점
- 용량: 코드로 이루어져있다보니, 복잡한 이미지의 경우 파일사이즈가 커짐
- 브라우저 호환성: 구형 브라우저에서 일부 제한
- 렌더링 성능: 매우 복잡한 SVG는 성능에 영향

1.2 SVG 사용방법

1. 외부 파일로 사용 (img 태그)

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

단순 표시용 이미지나 로고를 표기할때 사용합니다.

장점
- 간단한 구현
- 외부 파일로 관리하여 재사용 및 캐싱 가능
단점
- JavaScript로 내부 조작 어려움
- SVG 내부 요소 조작 제한적, CSS 스타일링 불가

2. CSS background 배경으로 넣기

CSS에서 관리할 수 있으며, 의미적 마크업과 분리 가능
접근성 정보 추가 불가

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

3. 인라인으로 넣기

스타일링이나 애니메이션이 필요한 아이콘, 인터랙티브 그래픽에 사용합니다.

장점
- CSS와 JavaScript로 완전한 제어 가능
- HTML 문서에 직접 포함되어 추가 HTTP 요청 없음
- 동적으로 SVG 내용을 변경 가능
단점
- HTML 파일 크기 증가
- 캐싱 불가능
- 코드 반복 시 페이지 크기가 커지고 가독성 저하

<button class="inline">
  <svg
    width="42"
    height="42"
    viewBox="0 0 42 42"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <rect width="42" height="42" rx="10" fill="#2E6FF2" />
    <path
      d="M32.9063 21C32.3019 21 31.8126 21.4808 31.8126 22.0748C31.8126 24.7075 29.6321 26.8504 26.9532 26.8504C24.2742 26.8504 22.0937 24.7075 22.0937 22.0748C22.0937 21.4808 21.6044 21 21 21C20.3956 21 19.9063 21.4808 19.9063 22.0748C19.9063 24.7075 17.7258 26.8504 15.0468 26.8504C12.3679 26.8504 10.1874 24.7075 10.1874 22.0748C10.1874 21.4808 9.6981 21 9.09369 21C8.48928 21 8 21.4808 8 22.0748C8 25.8932 11.1614 29 15.0468 29C17.5497 29 19.7497 27.7102 21 25.7733C22.2503 27.7102 24.4515 29 26.9532 29C30.8386 29 34 25.8932 34 22.0748C34 21.4808 33.5107 21 32.9063 21Z"
      fill="white"
    />
    <path
      d="M15 18C16.1046 18 17 17.1046 17 16C17 14.8954 16.1046 14 15 14C13.8954 14 13 14.8954 13 16C13 17.1046 13.8954 18 15 18Z"
      fill="white"
    />
    <path
      d="M27 18C28.1046 18 29 17.1046 29 16C29 14.8954 28.1046 14 27 14C25.8954 14 25 14.8954 25 16C25 17.1046 25.8954 18 27 18Z"
      fill="white"
    />
  </svg>

  <span class="a11y-hidden">weniv</span>
</button>

SVG 이미지 파일을 사용하지만 별다른 조작을 하지 않을 것이라면 HTML img 태그나 CSS background 속성을 사용하면 됩니다.
이미지에 조작이 필요하다면 인라인으로 넣어주세요!

2. Canvas 태그

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

<body>
  <!-- html에 캔버스 태그 생성 -->
  <canvas
    id="myCanvas"
    width="200"
    height="200"
    style="border: 1px solid #000000"
  ></canvas>
  <script>
    // 캔버스 태그에 사각형 그리기
    // 캔버스 객체 생성 및 컨텍스트 객체 생성
    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');
    // 사각형 색상 및 크기 설정
    ctx.fillStyle = '#e9e9e9';
    ctx.fillRect(10, 10, 150, 150);
  </script>
</body>

참고 사이트

SVG 튜토리얼 - SVG: Scalable Vector Graphics | MDN 캔버스 튜토리얼 - Web API | MDN

이미지 파일 변환 PNG to SVG Converter