벡터 그래픽 SVG 파일 저장 및 코드 변환

 

 

 

아이콘과 같은 벡터 이미지 사용을 위해서 SVG 파일로 저장하는 방법과, HTML에 사용하기 위해 코드로 변환하는 방법을 공유하고자 한다.

SVG를 이해하기 위해 이미지 파일 형식에 대해서 간략히 알아보자.

 

 

 

벡터 VS 비트맵 

벡터와 비트맵 모두 디지털 이미지를 저장하는 데 쓰이는 이미지 파일 포맷이다.

웹용 비트맵(Bitmap) 이미지 포맷은 픽셀(이미지를 구성하는 최소 단위) 격자를 사용하여 이미지를 나타낸다. 결과로 생성된 파일은 크기가 커져서 단일 해상도(흔히 저해상도)로 제한되기 쉽다. 따라서 다양한 색상을 가진 이미지를 만들 수 있지만 그만큼 용량이 커진다. 커진 이미지를 적용하더라도 화면 확대 시 이미지가 깨져 보일 수 있다.

반면에 벡터(Vector)는 이미지를 모양, 패스, 텍스트, 필터 효과 등으로 나타내는 벡터 포맷이다. 결과로 생성되는 파일은 크기가 작고 웹 상에서, 인쇄할 때 그리고 리소스가 제한되어 있는 휴대용 장치에서도 고품질의 그래픽을 확인할 수 있다. 

웹 사이트나 앱에 적용하는 아이콘 역시 비트맵 확장자가 아닌 SVG로 등록/노출시키면 다양한 디바이스에도 깨지는 현상이 없이 선명하게 보일 것이다.  (더 자세한 정보가 필요하다면 여기 클릭) 

 

- 비트맵 확장자 : JPG, JPEG, PNG, GIF, WBMP

- 벡터 확장자 : AI, PDF, SVG

 

 

 

SVG로 저장하는 방법 

: 파일 > 내보내기 > SVG 선택
또는 (ctrl+shift+s) 다른 이름으로 저장하기 > 파일형식 SVG 선택

어도비 Illustrator 프로그램에서 저장 시에 확장자를 SVG로 설정해주면 된다.

(내보내기 옵션에 대한 내용은 어도비 사이트를 통해 확인)

 

 

 

SVG 파일을 코드로 확인 및 변환하는 방법 

: SVG 파일 > 메모장으로 열기 

저장 한 SVG 파일을 메모장으로 열면 코드로 작성된 것을 확인할 수 있다.
해당 코드를 활용하여 HTML 페이지 등에 삽입할 수 있으니 참고하자.

 

 

 

 

 

---

SVG에 대한 개념적인 이해가 필요하다면, W3C에서 발췌한 아래 내용을 참고하길 바란다.
  

SVG (Scalable Vector Graphics)

벡터 그래픽 자료의 생성 및 표시를 위해 사용하며 W3C-World Wide Web Consortium을 표준으로 한다. 
SVG는 World Wide Web의 컨텍스트 내외에서 JavaScript를 사용하여 콘텐츠를 동적으로 생성 할 수 있는 XML 언어이다. 

SVG 장점

SVG는 비트맵 그래픽인 JPEG, GIF, PNG와 달리 몇 가지 장점이 있다.

• SVG 파일이 비트 맵 보다 크기가 작아 다운로드 시간이 더 빠르다.
• 스크린(비트 맵) 확대 시 픽셀 화가 없어 깨져 보이지 않고, 디스플레이 장치에 맞게 그래픽 크기를 조정할 수 있다.
• 애니메이션 보다 아날로그적인 타이밍 개념으로 지원되므로 프로그래머가 JavaScript 기반 애니메이션에서 일반적으로 사용되는 timed 루프에서 벗어날 수 있다.
  (SMIL - Synchronized Media Integration Language -에 대한 기본 지원을 제공)
• HTML 환경에서 사용되는 동일한 스크립팅 언어인 JavaScript에 응답한다. 이것은 두 가지 유형의 문서가 서로 대화하고 정보를 공유하며 수정할 수 있음을 의미한다.

 

 

 

출처 : W3C-SVG Primer, Adobe, MDN