WeniVooks

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" />

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

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

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

2. CSS background 배경으로 넣기

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

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

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

3. 인라인으로 넣기

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

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

2.Canvas

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

참고 사이트

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