1. SVG란

• 확장 가능한 벡터 그래픽(Scalable Vector Graphics).
• XML 기반의 2차원 그래픽
• 아이콘, 이미지, 그래프, 사용자 인터페이스(UI) 등 널리 쓰임
• DOM의 일부로서 각 개체별로 HTML 엘리먼트가 추가됨
• 벡터이기 때문에 이미지의 크기에 상관 없이 선명하게 유지되고 모양이 많이 복잡하지 않은 경우 파일 사이즈도 작다.
• CSS와 JavaScript를 이용해서 조작이 가능.
• 크기(width/height)가 큰 이미지 표현에 유리.
• 모양이 복잡하고 개체수가 많을 수록 성능이 떨어짐

💡 SVG 와 Canvas 차이

SVG : 벡터 그래픽

Canvas : 비트맵 기반 그래픽(픽셀 조작)

2. 사용 방법

1. *<img> 태그를 이용해도 되고*

   <img src="img/studiomwal.svg" alt="">
   

2. CSS Background 를 이용해도 되고

   .svg {
         width:100px;
         height: 100px;
         background: url('images/studiomeal.svg') no-repeat;
       }
   

   <div class="svg"></div>
   

3. SVG 요소들을 직접 inline으로 삽입 해도 되고

   일러스트에서 직접 만들어진 이미지를 SVG파일로 저장하고 저장시 만들어진 SVG코드를 HTML의 <svg> 태그안에 삽입한다.

4. <object> 태그를 사용해도 된다.

   <object data="img/studiomwal.svg" type="image/svg+xml"></object>
   

3. 크기 설정