IT 인터넷

svg 변환 방법 및 svg 파일의 특징

탁이 2021. 12. 9. 09:14

뭐니뭐니해도 SVG 파일의 메리트는 확대를 해도 선명하게 편집할 수 있으며 범용성이 높다는 것입니다. 하지만 왜 궂이 SVG를 쓰지라고 느끼고 있는 분도 적지 않을 것 같습니다. 

그래서 이번에는 SVG의 특징과 다른 포맷으로 변환하는 방법 등에 대해 자세히 설명합니다.

SVG 파일이란?

「SVG 파일(스케일러블 벡터 그래픽스, Scalable Vector Graphics)」 은의 역사는 의외로 오래되어, 무려 2001년경에 권고된 기술입니다.

SVG는 Scalable Vector Graphics(스케일러블 벡터 그래픽)의 약자로 일종의 이미지 포맷입니다.

JPEG나 PNG라고 말한 것 같은 web에서 자주 보이는 이미지와의 차이는, PEG나 PNG가 비트 맵 데이터인 것에 대해, SVG는 XML을 베이스로 한 2차원 벡터 데이터라는 것입니다.

인터넷 초기에는 지원하는 브라우저가 적어서 그다지 보급되지 못했지만, 최근에는 브라우저의 기능이 높아지면서 활용도가 높아짐에 따라 점점 더 많이 사용 하고 있습니다.

SVG 파일과 다른 이미지 형식의 차이

SVG 파일과 다른 이미지 형식의 차이점을 정리하면 다음과 같습니다.

래스터 형식과 벡터 형식의 차이

이미지 형식으로 친숙한 GIF, JPEG, PNG 같은 "래스터 형식"의 이미지는 픽셀을 종횡으로 배열하는 방법으로 이미지를 그립니다. 래스터 형식의 이미지는 확대 축소하면 화질이 열화되어 버리거나, 이미지가 들쭉날쭉하게 되므로 편집에는 적합하지 않습니다. 게다가 파일 사이즈가 커진다는 단점도 있습니다.

반면 SVG 파일은 모양을 정희하는 텍스트 집합을 이미지로 취급하는 "벡터 형식" 으로 이미지를 그립니다. EPS 형식도 SVG 파일과 동일한 벡터 형식입니다.

벡터 형식은 확대 축소에 강하고 화질이 열화되지 않기 때문에 어떤 화면에서도 선명하고 선명한 이미지를 표시할 수 있다는 장점이 있습니다. SVG 파일을 활용하면 어느 화면에서도 아름다운 이미지를 사용자 에게 보여줄 수 있습니다. 파일 크기도 작아서 리소스에 한계가 있는 경우에도 사용하기 쉬운 형식입니다.

각 형식에 적합한 이미지가 있습니다.

여기까지 들으면 래스터 형식보다 벡터 형식이 뛰어나다고 느끼지만 실제로는 벡터 형식에도 단점 이 있습니다. 벡터 이미지는 복잡한 계산식으로 이미지를 그리기 때문에 사진과 같이 복잡하고 섬세한 배색이나 윤곽 이미지 그리기에 적합하지 않습니다.

사진을 편집한다면 래스터 형식, 로고 타이틀 등의 작성에는 벡터 형식이 적합 하다고 할 수 있습니다.

SVG 파일은 텍스트 편집기로 편집 가능

또한 SVG 파일은 XML을 준수한다는 특징도 가지고 있기 때문에 텍스트 편집기에서 열고 파일을 편집 할 수 있습니다.

JPEG · PNG을 SVG 파일로 변환

사실, 간단한 방법으로 JPEG, PNG 등의 이미지 형식을 SVG 파일로 변환할 수 있습니다. 이번은 간편하게 화상 변환을 할 수 있는 온라인 서비스 「Online Image Vectorizer」를 사용한 방법을 소개합니다.

Online Image Vectorizer에 액세스

변환하고 싶은 이미지를 준비해, 아래의 URL 로부터 「Online Image Vectorizer」에 액세스 합시다.  

이미지 업로드

파란색 'Upload Image' 버튼을 클릭하여 변환하려는 이미지를 'Online Image Vectorizer'에 업로드합니다. 대응하고 있는 포맷은 PNG, BMP, JPEG의 3 종류, 화상 사이즈는 최대 1MB까지에 대응하고 있습니다.

※포맷, 사이즈에 제한이 있으므로 주의합시다

전환 시작 ~ 다운로드

업로드하면 이미지 변환이 시작됩니다. 변환 후에는 목록 표시에서 색상 조정도 가능합니다.

조정 및 출력 이미지 확인이 끝나면 오른손에 있는 파란색 '다운로드' 버튼을 클릭합니다. 이것으로 SVG 파일로의 변환이 완료되었습니다.
  
덧붙여서, 같은 변환을 할 수 있는 무료 툴로서 「Online Image Vectorizer」 이외에도 「Vector Magic」이 있습니다. Vector Magic은 PNG, BMP, JPEG 이외에 「Online Image Vectorizer」가 미대응의 GIF에도 대응하고 있으므로, GIF 화상을 SVG로 변환하고 싶은 경우는 활용하면 좋을 것입니다.

Vector Magic은 이쪽

SVG 파일을 PNG로 변환

SVG 파일을 PNG로 변환하는 무료 도구도 있습니다. SVGtoPNG 를 사용하여 변환합시다.

SVG 파일의 장점과 단점을 이해하자

SVG 파일 이미지는 크기가 크지 않고 나중에 편집하기 쉽기 때문에 홈 페이지 로고와 같은 이미지를 표시하는 경우와 같이 매우 편리한 형식입니다.

그러나 사진에 쓰기에는 부적절한 단점이 있습니다. 디자인 하기 전에 사전에 특징을 알아두고 용도에 따라 선택하면 좋겠습니다.