SVG

✨ SVG란?

SVG는 확장 가능한 벡터 그래픽으로 2차원 그래픽을 표현하기 위해 만들어진 xml파일 형식의 마크업이다. SVG는 텍스트 편집기에서 css, js로 수정이 가능하다는 장점이 있다. 또한, 벡터 기반으로 확대 축소해도 품질이 떨어지지 않는다.

 

👀 SVG 사용법

1️⃣ img 태그 사용

SVG는 이미지 태그 사용과 동일하게 삽입할 수 있다.

<img src="potion.svg" />

2️⃣ background-image 사용

.potion {
  width: 300px;
  height: 120px;
	background: url('potion.png'); /* svg 미지원 브라우저 대응 */
  background: url('./potion.svg') no-repeat;
}

이 두가지 방식의 단점은 CSS로 SVG내부를 제어할 수 없다. 따라서, 해당 방식은 SVG내부를 제어하지 않고 유연하게 반응형 처리를 하고 싶은 경우에 사용하면 좋다!

3️⃣ 인라인 방식 사용

인라인 방식은 HTML에 코드를 그대로 넣어주는 것을 말한다. 장점은 이미지 로드가 필요하지 않아 속도가 빠르다. 단점은 HTML이 지저분해지고 캐싱이 불가능하여 로드될 때마다 SVG 코드를 다시 읽어야 한다.

<svg> ... </svg>
<div class="fallback"></div> <!-- svg 미지원 브라우저 대응 -->

.fallback { 
  display: none;
}
.no-svg .fallback { 
  background-image: url('potion.png'); 
}

4️⃣ object

object 방식은 캐싱은 되지만 외부 CSS 기능은 사용할 수 없다. 즉, object에 대한 스타일링은 가능하지만 SVG 내부는 조작할 수 없다. SVG를 조작하려면 SVG 파일 자체에 style를 작성해야 한다.

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

참고 사이트

https://nykim.work/35?category=692678

[SVG] SVG 다루기

https://mytory.net/archives/11213

SVG 활용 3 - 웹 문서에 SVG를 넣는 다양한 방법, 온갖 예외 피하기