[SVG] icon 은 svg?

✅ SVG 란?

SVG는 Scalable Vector Graphics의 약자로, XML 기반의 벡터 그래픽 포맷을 말한다.
HTML 문서 안에 2차원 벡터 그래픽을 직접 삽입하거나 외부 파일로 불러와 사용할 수 있으며,
XML 코드이기 때문에 파일 크기가 작고, 사례에 따라서는 60~80% 정도 대역폭을 절감한다고 한다.

CSS, JS로 제어가 가능하고, HTML 파일에 코드로 작성될 수 있기 때문에 외부 이미지를 가져오기 위해 HTTP request를 할 필요가 없으며, 확대/축소 시 품질 저하가 발생하지 않기 때문에 아이콘, 로고, 일러스트레이션, 애니메이션 등에서 자주 사용된다. 

---

1) 장점

1. 파일 크기가 작다.
   PNG 나 JPG 같은 레스터 이미지보다 SVG 파일이 차지하는 용량(바이트 수)가 더 작다.
   레스터 이미지는 픽셀단위의 정보를 저장하기 때문에 픽셀수에 비례해 용량이 커진다.
   SVG는 수학적 좌표(벡터)로 그림을 설명하기 때문에 단순한 도형일수록 용량이 적다. 
   예를 들어, 200*200 크기의 파란색 원 하나를 그린다고 가정했을 때, 레스터이미지는 15~50KB정도를 차지하지만 SVG는 1KB 미만정도의 용량을 차지한다.
   그렇기 때문에, 사진이나 풍부한 색상 그라데이션이 포함된 복잡한 이미지는 SVG가 오히려 더 많이 차지할수도 있다.
2. 무손실 확대
   SVG는 벡터 형식으로 되어있다.
   다시 말하면 "그림을 어떻게 그릴지" 텍스트로 설명하는 설계도와 같다.
   그렇기 때문에 그리고 싶은 영역의 크기가 줄거나 작아져도 각 도형의 수학적 좌표에 비례해 그림이 그려지기 때문에 레스터이미지처럼 품질이 저하되는 현상이 발생하지 않는다.
3. CSS 및 JS로 제어 가능
   <svg>태그로 HTML 에서 사용되었을 경우 CSS 선택자로 해당 이미지를 변경할 수 있다.
   class를 부여할 수도 있고, 색상을 변경하거나 hover효과를 주거나 애니메이션 코드를 사용하는 것도 가능하다.
4. SEO와 접근성 유리
   내부 텍스트가 HTML 처럼 읽히기 때문에 검색 엔진에 노출 가능하다.
5. 애니메이션 지원
   <animate>, <animateTransform>등의 태그나 CSS, JS 애니메이션 적용 가능하다.

---

2) SVG 형태

아래는 차트 아이콘을 SVG로 만든 뒤, 인터넷 창으로 열었을 때 보이는 결과이다.

화면에서는 아래 이미지와 같은 차트 이미지가 보이고,

개발자 도구에서 코드를 확인하면 <svg>와<rect>로 구성된 태그를 확인할 수 있다.

<svg xmlns="http://www.w3.org/2000/svg" width="10" height="11" viewBox="0 0 10 11" fill="none">
	<rect x="2" y="4" width="7" height="2" transform="rotate(90 2 4)" fill="#868E96"/>
	<rect x="6" width="11" height="2" transform="rotate(90 6 0)" fill="#868E96"/>
	<rect x="10" y="4" width="7" height="2" transform="rotate(90 10 4)" fill="#868E96"/>
</svg>

 

🔗 공식 문서 & 레퍼런스

---

3) svg 사용 방법

① <img > 태그로 SVG 파일 불러오기

<img src="/icon.svg" />

<img> 태그에서 일반 레스터 이미지(png, jpg)를 불러오는 것과 동일하게 svg 파일을 불러올 수 있다.
svg 파일이 폴더에 존재해야하며, 해당 파일의 위치를 정확하게 입력해야한다.

 

 

② CSS의 background-image로 사용하기

div {
  background-image: url("/icon.svg");
}

background-image 속성의 url을 사용하여 배경 이미지로 불러올 수 있다.
이미지 태그와 동일하게 svg 파일이 폴더에 존재해야하며, 해당 파일의 위치를 정확하게 입력해야한다.
배경 패턴이나 장식 등으로 사용하기 좋다.

 

 

③ SVG 코드를 data URI 형식으로 인코딩

• 원본 SVG

<svg xmlns="http://www.w3.org/2000/svg" width="10" height="11" viewBox="0 0 10 11" fill="none">
  <rect x="2" y="4" width="7" height="2" transform="rotate(90 2 4)" fill="#868E96"/>
  <rect x="6" width="11" height="2" transform="rotate(90 6 0)" fill="#868E96"/>
  <rect x="10" y="4" width="7" height="2" transform="rotate(90 10 4)" fill="#868E96"/>
</svg>

• Data URI (data:image/svg+xml 형식)

<img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2210%22%20height%3D%2211%22%20viewBox%3D%220%200%2010%2011%22%20fill%3D%22none%22%3E%3Crect%20x%3D%222%22%20y%3D%224%22%20width%3D%227%22%20height%3D%222%22%20transform%3D%22rotate(90%202%204)%22%20fill%3D%22%23868E96%22/%3E%3Crect%20x%3D%226%22%20width%3D%2211%22%20height%3D%222%22%20transform%3D%22rotate(90%206%200)%22%20fill%3D%22%23868E96%22/%3E%3Crect%20x%3D%2210%22%20y%3D%224%22%20width%3D%227%22%20height%3D%222%22%20transform%3D%22rotate(90%2010%204)%22%20fill%3D%22%23868E96%22/%3E%3C/svg%3E" alt="icon" />

div {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2210%22%20height%3D%2211%22%20viewBox%3D%220%200%2010%2011%22%20fill%3D%22none%22%3E%3Crect%20x%3D%222%22%20y%3D%224%22%20width%3D%227%22%20height%3D%222%22%20transform%3D%22rotate(90%202%204)%22%20fill%3D%22%23868E96%22/%3E%3Crect%20x%3D%226%22%20width%3D%2211%22%20height%3D%222%22%20transform%3D%22rotate(90%206%200)%22%20fill%3D%22%23868E96%22/%3E%3Crect%20x%3D%2210%22%20y%3D%224%22%20width%3D%227%22%20height%3D%222%22%20transform%3D%22rotate(90%2010%204)%22%20fill%3D%22%23868E96%22/%3E%3C/svg%3E
");
}

위와 같이, data URI로 변경하면 이미지 태그의 src나 CSS의 background-image에 입력시 동일한 결과를 출력한다. 
svg 코드가 짧고, <input> 태그에 단발성 svg 아이콘을 삽입하고 싶은경우 생각보다 유용하게 사용 가능했다.

 

 

④  SVG 스프라이트로 여러 아이콘 재사용 (<use> 활용)

<!-- svg 태그 안에 symbol 태그를 사용하여 여러 svg 정의 -->
<svg style="display: none;">
  <symbol id="icon-check" viewBox="0 0 24 24">
    <path d="..."/>
  </symbol>
  <symbol id="icon-calendar" viewBox="0 0 24 24">
    <path d="..."/>
  </symbol>
</svg>

<!-- 실제 사용시 use 태그로 symbol 태그의 id를 불러와 사용 -->
<svg width="24" height="24">
  <use href="#icon-check" />
</svg>

<svg> 태그를 스프라이트 이미지처럼 만들어 사용하고 싶다면 <symbol>, <use> 태그를 사용하면 된다.

여러 SVG를 한개의 SVG로 묶는 방법은 검색,,, 혹은 gpt,,,
그렇게 만들어진 symbol은 반드시 id가 필요하다.
이후 <use> 태그의 href 속성에서 심볼의 id를 가져오면 <img> 태그에서 svg 파일을 불러오는것과 동일하게 사용가능하다. 

같은 HTML 페이지 내에 <symbol>태그가 정의되어 있을 경우 "#id명"로 불러오면 되고,
다른 파일로 저장된 <svg>를 사용하고 싶다면, 앞에 경로를 붙여 "/폴더명/파일명.svg#id명"으로 불러오면 된다.

 

위와 같이 svg를 불러오는 형식으로는
svg 태그 내부의 자식 요소에 직접 접근하거나 스타일을 지정할 수 없다.

 

 

⑤  HTML 내부에 직접 <svg> 태그로 인라인 삽입 (Inline SVG)

<body>
  <svg width="100" height="100" class="icon-circle">
    <circle cx="50" cy="50" r="40" fill="blue" />
  </svg>
</body>

.icon-circle{
  width: 50px;
}
// svg 자식요소인 circle에 스타일 적용 가능
.icon-circle circle{
  fill: pink;
}

HTML 내부에 아래와 같이 <svg> 태그를 삽입하여 사용이 가능하다.
인라인으로 삽입된 SVG는 CSS에서 ID, 클레스 선택자로 스타일을 줄 수 있다.