웹 이미지 형식 - SVG

< SVG Image >

* SVG 이미지란?

  : Scalable Vector Graphics (스케일러블 벡터 그래픽)의 약자

  : 벡터 이미지 (vector image)

  : 크기를 조정해도 이미지가 깨지지 않고 깨끗이 유지

  : 로고, 아이콘, 차트, 다이어그램, 지도 등에 사용됨

  : 태그를 이용해 삽입뿐만 아니라 제작까지 가능

→ scalable : 확대가 가능하다, 자연스럽게 크기 조절이 가능하다.

→ 비트맵 이미지 와 벡터 이미지 차이

    ▷ 비트맵 이미지 (bitmap image)

    gif, jpg/jpeg, png 파일 확대 시 이미지 테두리 부분이 울퉁불퉁해짐.

    즉, 작은 크기의 이미지를 확대하면 이미지가 깨지는 type

    ▷ 벡터 이미지 (vector image)

    svg 파일과 같이 확대 시 이미지 손상 없이 깨끗이 유지

    축소, 확대 모두 이미지 깨끗한 상태

 

  ✔ SVG 이미지 삽입

    1, 벡터 이미지를 svg 파일로 저장

    2. <img src="폴더명/파일명.svg">

 

---

😊 Do it! HTML5 + CSS 웹 표준의 정석 책으로

     독학하는 코린이의 공부 기록