알고보면코딩천재
1강. SVG란? 본문
확장 가능한 벡터 그래픽 (Scalable Vector Graphics)
XML 기반의 2차원 그래픽.
아이콘, 이미지, 그래프, 사용자 인터페이스 등에 널리 쓰임.
DOM의 일부로서 각 개체별로 HTML 엘리먼트가 추가됨.
벡터이기 때문에 이미지의 크기에 상관 없이 선명하게 유지되고 모양이 많이 복잡하지 않은 경우 파일 사이즈도 작다.
CSS와 자바스크립트를 이용해서 조작이 가능(유지 보수 용이).
크기(width/height)가 큰 이미지 표현에 유리.
모양이 복잡하고 개체수가 많을수록 성능이 떨어짐. (로고처럼 간단한 것으로 사용하는 것이 좋다(
비교: 캔버스(Canvas)
비트맵 기반 그래픽.
이미지나 비디오의 픽셀 조작, 게임, 퍼포먼스가 중요한 이미지 조작 등에 쓰임.
단일 태그 <canvas>로 표현.
자바스트림트를 이용해서 조작 가능 (CSS는 불가)
픽셀 단위의 조작이 가능해서 일반 HTML 엘리먼트로는 불가능한 다양한 표현들이 가능.
저수준(low-level) API로 코딩량이 많고 까다로움.
크기가 커질수록 성능이 떨어짐.
출처- 인프런 강의
1분코딩-SVG 마스터
Comments