SVG(Scalable Vector Graphics)에 대해 알아보자

개요

웹 페이지 작업을 하다 보면 svg파일을 이용하여 로고나 아이콘을 표현할 때가 있습니다. 

사용을 하면서도 로고나 아이콘은 주로 svg파일을 이용한다고는 알고있지만,

jpg/jepg/png등을 왜 사용하지 않는지에 대해서는 크게 생각해 보지 않았습니다.

 

마침 개인 프로젝트를 진행중 SVG를 이용할 일이 있어 왜 SVG를 이용하는지,

어디에 사용해야 유리할지 마지막으로 웹에서 SVG를 어떻게 적용하는지에 정리해보려 합니다. 

---

SVG란? (Scalable Vector Graphics)  

SVG는 XML 기반의 벡터 이미지 포맷으로 크기 조정이 자유롭다는 특징을 가지고 있습니다.

픽셀을 이용한 래스터 파일과 달리 확대하거나 축소해도 이미지의 품질이 저하되지 않습니다.

이는 SVG가 픽셀이 아닌 수학적 방정식으로 이미지를 정의하기 때문입니다.

---

Vector Image 

그럼 벡터 이미지는 무엇일까요? 

벡터라는 단어를 중,고등학교 수학시간에나 마지막으로 들어본 꽤나 생소한 단어입니다. 

벡터(Vector)는 기본적으로 크기와 방향을 가지는 양으로

벡터 이미지는 점, 선, 곡선 같은 그래픽 요소를 수학적 식으로 표현한 것을 의미합니다.

벡터 기반 그래픽은 래스터 이미지와 달리 픽셀로 구성되어 있지 않기 때문에

확대하거나 축소해도 이미지의 품질이 저하되지 않는 것이 특징입니다.

---

사용처

 

1. 로고와 아이콘: 벡터 이미지는 크기를 자유롭게 조정할 수 있기 때문에 로고, 아이콘, 브랜딩 요소와 같이 다양한 크기로 사용되어야 하는 그래픽에 이상적입니다.
2. 일러스트레이션과 그래픽 디자인: 단순하고 깨끗한 라인이 특징인 그래픽 디자인 작업에는 벡터 형식이 적합합니다. 수정과 재사용이 용이하며, 확장성이 뛰어납니다.
3. 타이포그래피와 문자 디자인: 글자와 타이포그래피 디자인은 벡터 형식을 사용함으로써 어떤 크기에서도 선명도를 유지할 수 있습니다.
4. 그래프 : 개발자는 CSS를 사용하여 SVG 그래픽의 스타일을 쉽게 변경할 수 있고 그래프를 다양한 화면 크기와 해상도에 맞춰서 유연하게 표시할 수 있습니다.

주요 특징

• 해상도 독립성: 벡터 기반이므로 화면 크기나 해상도에 관계없이 항상 선명한 이미지를 유지할 수 있습니다.
• 파일 크기: 작은 복잡도의 그래픽에서는 비교적 작은 파일 크기를 유지할 수 있으나, 매우 복잡한 그래픽은 파일 크기가 커질 수 있습니다.
• 텍스트 파일: SVG는 XML 기반의 텍스트 파일 형식이므로, 텍스트 편집기에서 열어 내용을 수정할 수 있습니다.
• 스타일링과 인터랙션: CSS와 JavaScript를 이용해 스타일링하고, 사용자와의 상호작용을 구현할 수 있습니다.
• 웹 표준: W3C(World Wide Web Consortium)에 의해 웹 표준으로 채택되었습니다.

웹에서 SVG 사용하기

 

1. 인라인 HTML로 삽입하기

SVG 코드를 HTML 문서에 직접 인라인으로 삽입할 수 있습니다.

이 방법은 SVG 요소에 CSS 스타일을 직접 적용하거나 JavaScript를 사용해 상호작용을 추가할 때 유용합니다.

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

 

2. <img> 태그 사용하기

SVG 파일을 외부 파일로 저장한 후, <img> 태그를 사용해 웹 페이지에 삽입할 수 있습니다.

이 방법은 간단하며, 캐싱이 가능하지만, 이미지에 직접 CSS나 JavaScript를 적용하는 것은 제한됩니다.

<img src="image.svg" alt="Description of image">

 

3. CSS 배경 이미지로 사용하기

CSS를 사용하여 SVG를 배경 이미지로 설정할 수 있습니다.

이 방법은 디자인 요소나 배경 패턴으로 SVG를 사용할 때 적합합니다.

div {
  background-image: url('image.svg');
}

 

4. <object> 태그 사용하기

SVG 파일을 <object> 태그로 삽입하면, 파일이 별도의 문서로 취급되어 문서 내에 포함됩니다.

이 방법은 SVG에 스크립트를 포함시킬 수 있으며, HTML5에서는 <embed>나 <iframe>과 함께 사용될 수도 있습니다.

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

 

마치며

오늘은 SVG에 대해서 알아보았습니다. 

가장 중요하게 생각한 것은 언제 어떤 상황에 사용해야 할지에 대한 고민인 것 같습니다. 

제 생각에는 아래 세 케이스 정도만 기억해도 되지 않을까 싶습니다. 

1. 동적으로 수정이 필요하거나

2. 복잡하지 않은 이미지

3. 로고, 아이콘, 브랜딩 이미지 등 여러 곳에서크기가 다르게 사용되는 경우