HTML / CSS - 이미지 확장자 SVG, Canvas

---

HTML / CSS 이미지 확장자 SVG, Canvas 

 

 * svg 

- 확장 가능한 벡터 그래픽(scalable vector graphics)으로 XML 기반의 2차 그래픽이다. 
- HTML 태그의 집합으로 이루어져 있다. => CSS와 js로 컨트롤할 수 있다. 
- 단순한 아이콘, 로고, 도형 등을 구현할 때 많이 사용한다. 

 

 장점 

- 아무리 확대를 해도 이미지가 깨지지 않는다. 
- 이미지의 크기를 키워도 용량이 늘어나지 않는다. 

 단점 

- 복잡한 이미지의 경우 파일 사이즈가 커진다. 코드로 이루어져 있기 때문! 

 

 

 

 

사용방법

 

1. 이미지 태그 

<img src="icon-puppy.svg" alt="puppy">

2. CSS background 

p {
background: url(./icon-cat.svg) no-repeat 50% 50% / contain;
}

3. 인라인 

- 이미지에 조작이 필요하다면 인라인으로 넣는다. 

<button class="inline">
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path 
          d="M3 9L12 2L21 9V20C21 20.5304 20.7893 21.0391 20.4142 21.4142C20.0391 21.7893 19.5304 22 19 22H5C4.46957 22 3.96086 21.7893 3.58579 21.4142C3.21071 21.0391 3 20.5304 3 20V9Z" 
          stroke="#767676" 
          stroke-width="2" 
          stroke-linecap="round" 
          stroke-linejoin="round"
        />
        <path d="M9 21V12H15V21"
          stroke="#767676"
          stroke-width="2" 
          stroke-linecap="round" 
          stroke-linejoin="round"
        />
      </svg>
  <button>

 

✏ SVG 이미지 파일을 사용하지만 조작이 필요하지 않다면 HTML의 img 태그나 CSS의 background 속성을 사용하면 된다. 

 

 

---

 

 Canvas

- JavaScript와 HTML 요소를 통해 그래픽을 그린다. 
- 픽셀(pixel) 기반의 비트맵 방식이다. 

※ 그래픽이 주작업인 게임에 적합하다. 

 

 

---

 

 

 

 

 

 

 

 

 

 

잘못된 정보에 대한 피드백은 언제든지 환영입니다!