[SVG] SVG 란?

들어가며

기존 서비스 이전을 위해 팝업창을 띄어줘야 했다. 처음에는 고정된 이미지(png) 파일을 전달받아 작업을 진행하였다. 하지만 이 과정에서 몇가지 문제점들이 있었다.

문제

1. 팝업 png 파일을 고정된 이미지 값(width, height)를 사용하다보니 글씨체가 깨진체로 표시되었다.
2. 고해상도 이미지로 다시 팝업 png 파일을 전달받아 작업을 진행하였고, 이미지 내부 컴포넌트에 클릭 이벤트를 걸때 일일히 css 를 조절해줘야 하는 어려움을 겪었다.

해결방법

여차저차 동료분들의 도움을 통해 svg 파일을 이용해 해당 작업을 결할 수 있었다. 하지만 이 svg 파일이 무엇이고 어떤 경우에 사용해야 하는지 정확하게 모르고 있었다.

SVG란?

확장 가능한 벡터 그래픽(Scalable Vector Graphics)을 말한다. 2차원 그래픽을 표현하기 위해 만들어진 XML파일 형식의 마크업 언어이다. 텍스트 편집기에서 CSS나 JS로 수정이 가능하다는 점이 가장 큰 장점이라 할 수 있다.또, 확장이 가능하다는 점에서 확대해도 품질이 떨어지지 않는다. 레티나나 모바일에 대응하기 위한 추가 작업도 필요 없고, 시각 장애가 있는 사용자들이 웹을 확대하더라도 품질 저하의 문제가 없다. 단, 미지원 브라우저가 몇몇 있으니 주의해야 한다.

SVG 사용하기

1. img 태그

<img src="nana.svg" />

• img 태그에 width, height 값을 지정하거나 css로 width 값을 지정하여 크기 조절이 가능
• IE 8, 안드로이드 2.3 이상에서 지원된다.

2. background-image

.nana {
  width: 300px;
  height: 120px;
  outline: 2px solid red;
  background-image: url("./potion.svg");
}

• 일반적인 이미지처럼 background-image 속성을 이용하는 방법
• 반복되는 걸 피하려면 no-repeat를 주거나, background-size를 지정하면 된다.

3. 인라인

• HTML 상에 코드를 그대로 넣어주는 방범
• 장점은 이미지 로드가 필요 없다는 거! 브라우저는 이미지를 불러올 때마다 HTTP 요청을 해야 하는데, 이 경우엔 요청-응답의 필요가 없기 때문에 로드되는 속도가 빠르다.
• HTML이 더러워지고 캐싱이 불가능하다. 그래서 로드될 때마다 HTML내 SVG 코드를 다시 읽어야 한다.

4. object

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

• type이 src가 아닌 data라는 데 주의해야 한다.

정리

• SVG가 필요하지만 이미지에 별다른 조작을 가하지 않을 경우 : <img/> 또는 background-image
• SVG가 필요하고 이미지에 조작을 가할 경우 : 인라인 또는 <object>

결론

SVG 를 활용하는 다양한 방법들이 있구나 🤔

https://nykim.work/35
https://developer.mozilla.org/ko/docs/Web/SVG