SVG

SVG 를 사용하는 이유가 뭐야?

 

- 벡터 기반이기 때문에 리사이징 시 깨짐 현상이 없다.

- 특정 사이즈에 구애받지 않아, svg 파일 하나면 모든 해상도 대응 가능.

- svg 그래픽은 파일 크기를 결정하는 주요 요소는 복잡도다. path 가 비교적 적은 간단한 이미지는 기존의 이미지 확장 파일들보다 사이즈가 적을 수 있지만, 이미지를 구성하는 요소의 복잡도가 높은 경우에는 파일 사이즈가 커짐.

 

 

사용 방법

 

(1) img 태그

 

<img src="nongdamgom.svg" alt="농담곰 이미지" />

 

(2) background-image

 

.nongdamgom {
    width:500px;
    height:500px;
    background-image:url("./nongdamgom.svg");
}

 

(3) HTML 인라인

 

<svg> ... </svg>

 

- 브라우저는 이미지를 불러올 때, HTTP 요청을 해야 되는데, SVG 는 요청-응답이 필요 없으므로 빠르게 페이지 로드가 될 수 있음.

- 캐싱 불가능

- 로드될 때마다 HTML 내 SVG 코드를 다시 읽어야 함.

 

(4) object

 

<object type="image/svg+xml" data="./nongdamgom.svg" class="nongdamgom"></object>