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 파일 크기 증가
- 캐싱 불가능
- 코드 반복 시 페이지 크기가 커짐
- SVG 이미지 파일을 사용하지만 별다른 조작을 하지 않을 것이라면 HTML
img
태그나 CSSbackground
속성을 사용하면 됩니다. - 이미지에 조작이 필요하다면 인라인으로 넣어주세요!
2.Canvas
- JavaScript와 HTML 요소를 통해 그래픽을 그립니다.
- 픽셀기반의 비트맵 방식입니다.
- 그래픽이 주작업인 게임에 적합합니다.
참고 사이트
SVG 튜토리얼 - SVG: Scalable Vector Graphics | MDN캔버스 튜토리얼 - Web API | MDN- 이미지 파일 변환 PNG to SVG Converter