HTML5+CSS3]3-3 SVG(Scalable Vector Graphics) 이미지

https://www.youtube.com/user/easyspub

 

easyspub

⭐비트맵 이미지 : gif,jpg,png파일을 크게 확대해 나타내면 이미지 테두리 부분이 울퉁불퉁해진다. 이런 이미지를 비트맵 이미지라고 한다.

 

⭐벡터 이미지(SVG) : 이미지를 아무리 확대하거나 축소해도 원래의 깨끗한 상태 그대로 유지되는 이미지를 벡터 이미지라고 한다.

로고나 아이콘에서 많이 사용된다.

데이터 시각화에서 차트나 다이어그램, 지도등을 구현할 때도 많이 사용된다.

 

 

✔SVG는 이미지이면서도 소스 코딩이다.

<img>태그를 이용해 파일 형태로 삽입할 수도 있고, 태그를 이용해 직접 만들수도 있다.

포토샵이나 일러스트레이터 같은 그래픽 편집 프로그램뿐만 아니라 웹 브라우저나 문서 편집에서도 편집할 수 있다.

 

✔SVG 이미지 삽입하기웹 문서에서 <img> 태그를 이용해 웹 문서에 삽입할 수 있다.