[JavaScript] SVG란?

안녕하세요.

이번 포스팅에서는 SVG에 대해서 알아보겠습니다.

 

---

먼저 무언가 공부를 하기에 앞서 가장 먼저 검색하는 곳 위키백과에서 정의한 SVG입니다.

스케일러블 벡터 그래픽스(Scalable Vector Graphics, SVG)는 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식으로, 1999년 W3C(World Wide Web Consortium)의 주도하에 개발된 오픈 표준의 벡터 그래픽 파일 형식이다. SVG 형식의 이미지와 그 작동은 XML 텍스트 파일들로 정의 되어 검색화·목록화·스크립트화가 가능하며 필요하다면 압축도 가능하다.

SVG 형식의 파일은 어도비 일러스트레이터와 같은 벡터 드로잉 프로그램을 사용하여 편집이 가능하다. 물론 XML 형식으로 되어 있으므로 메모장과 같은 문서 편집기로도 편집이 가능하다.

현재 마이크로소프트의 인터넷 익스플로러 8 및 이전 버전을 제외한 대부분의 주요 웹 브라우저들은 SVG를 지원한다. 인터넷 익스플로러 8 및 이전 버전에서는 SVG 파일을 보기 위해 별도의 플러그인을 수동으로 설치하여야 하며, 그렇지 않은 경우에는 웹 페이지 제작자가 구글 코드에서 개발중인 자바스크립트 라이브러리, SVG Web 을 웹 페이지 코드에 포함시켜야 한다.

출처 : https://ko.wikipedia.org/wiki/%EC%8A%A4%EC%BC%80%EC%9D%BC%EB%9F%AC%EB%B8%94_%EB%B2%A1%ED%84%B0_%EA%B7%B8%EB%9E%98%ED%94%BD%EC%8A%A4

 

---

SVG란?

SVG는 Scalable Vector Graphics의 약자로써 직역하면 확장가능한 백터 그래픽입니다. 픽셀을 이용하여 그림을 그리는 PNG, JPG파일과 다르게 백터를 기반으로 이미지를 그리게됩니다. 그러므로 크기를 변경해도 깨지는 것이 없고, 용량도 적기때문에 웹에서 자주 사용하는 이미지 방식입니다.

SVG를 사용하기위해서는 HTML상에서 SVG태그를 사용하게 됩니다.

 

---

SVG의 장단점

SVG의 장점은 백터기반 포맷이기 때문에 사이즈가 늘어나도 사진이 깨지지 않고 매끄럽게 표현이 되는 장점이 있습니다. 웹 환경에서 사용할 때는 CSS를 이용하여 Style을 변경이 가능하고, 자바스크립트를 이용하여 이벤트핸들링이 가능합니다.

SVG의 단점은 단순한 이미지의 경우 기존 이미지들보다 용량이 적지만 복잡한 이미지의 경우 Path가 많아지게 되어 오히려 용량이 늘어나는 단점이 있습니다. 이러한 단점을 보완하기 위한 SVG Optimazing을 위한 툴도 있습니다.

 

이상 SVG에 대해서 간단하게 알아봤습니다!

출처 : https://velog.io/@sbyeol3/SVG%EB%A5%BC-%EA%B3%B5%EB%B6%80%ED%95%B4%EB%B3%B4%EC%9E%90-1-SVG%EB%9E%80