SVG 파일

살펴볼 내용

• SVG 파일의 정의
• SVG 파일의 역사
• SVG 파일의 용도
• SVG 파일의 장단점
• SVG 파일을 여는 방법
• SVG 파일을 생성 및 편집하는 방법
• SVG 파일 관련 FAQ

SVG 파일의 정의

SVG(Scalable Vector Graphics)는 웹 친화적인 벡터 파일 포맷입니다. JPEG와 같은 픽셀 기반의 래스터 파일과 달리, 벡터 파일은 그리드 위의 점과 선을 기반으로 하는 수학 공식을 통해 이미지를 저장합니다. 따라서 SVG와 같은 벡터 파일은 품질을 그대로 유지하면서 크기를 마음대로 조정할 수 있으므로 로고와 복잡한 온라인 그래픽에 아주 적합합니다.

SVG가 웹 디자이너에게 큰 인기인 이유는 크기 조정 기능 때문만은 아닙니다. SVG는 XML 코드로 작성되므로 모든 텍스트 정보를 모양이 아닌, 텍스트로 저장합니다. 따라서 Google과 같은 검색 엔진이 SVG 그래픽을 키워드로 읽을 수 있으며, 이는 웹 사이트의 검색 순위를 높이는 데 큰 도움이 됩니다.

SVG 파일의 확장자는 .svg입니다.

SVG 파일의 역사

SVG 파일의 역사는 1990년대 후반으로 거슬러 올라갑니다. 당시 월드 와이드 웹 컨소시엄(W3C)에서 개발자에게 새로운 유형의 벡터 그래픽 포맷을 요청했는데, 총 6개 안이 제출되었으며, W3C은 이를 기반으로 SVG 포맷을 개발했습니다.

SVG가 인기를 얻기까지는 시간이 걸렸습니다. 최신 웹 브라우저에서 SVG의 유용성이 드러나기 시작한 2017년까지는 지원이 비교적 적었습니다. 대부분의 브라우저와 벡터 파일용 드로잉 앱에서 SVG 파일을 간편하게 사용할 수 있게 되면서 2D 웹 사이트 이미지에 널리 사용되고 있습니다.

SVG 파일의 장단점

SVG 파일 포맷으로 이미지를 저장하기 전에 장단점을 알아두는 것이 좋습니다.

SVG 파일의 장점

• 픽셀로 구성된 래스터 파일과 달리, SVG와 같은 벡터 그래픽은 크기에 상관없이 항상 해상도를 유지합니다. SVG 이미지는 특정 브라우저나 다양한 위치에 맞게 크기를 조정해도 품질이 저하되지 않습니다.
• 기본 SVG 파일은 많은 컬러 픽셀로 생성되는 래스터 이미지보다는 크기가 작습니다.
• SVG 파일은 텍스트를 디자인이 아닌 텍스트 그대로 처리하기 때문에 스크린 리더가 SVG 이미지에 포함된 모든 단어를 스캔할 수 있습니다. 그래서 웹 페이지를 읽어야 할 때 매우 유용합니다. 검색 엔진은 SVG 이미지 텍스트를 읽고 색인을 달 수도 있습니다.

SVG 파일의 단점

• SVG 파일은 로고, 일러스트레이션, 차트 등 웹 그래픽에 적합합니다. 그러나 픽셀이 부족하므로 고품질 디지털 사진을 표현하기는 어렵습니다. 디테일이 풍부한 사진에는 JPEG 파일이 더 좋습니다.
• 최신 브라우저만 SVG 이미지를 지원할 수 있으므로 Internet Explorer 8과 이전 브라우저에서는 SVG 파일을 사용하기가 어려울 수 있습니다.
• SVG 이미지에 포함된 코드는 SVG 파일 포맷을 처음 사용하는 경우 이해하기 힘들 수 있습니다.

SVG 파일을 여는 방법

Mac 또는 Windows에서 Chrome, Edge, Safari, Firefox 등 모든 주요 브라우저를 사용하여 SVG 파일을 열 수 있습니다. 브라우저를 실행하고 파일을 클릭합니다.

해당 파일을 선택하고 열기를 클릭하면 됩니다. 브라우저에서 볼 수 있습니다.

컴퓨터에 내장된 프로그램에서도 SVG 이미지를 간편하게 열 수 있습니다. 파일 이름을 두 번 클릭하면 파일을 열 수 있는 프로그램 목록이 표시되거나 호환되는 프로그램에서 자동으로 열립니다.

SVG 파일을 생성 및 편집하는 방법

Adobe Photoshop을 사용하여 다음과 같이 파일을 만들 수 있습니다.

1. Photoshop에서 이미지를 결합했다면, 파일 > 내보내기 > 다른 이름으로 내보내기를 클릭합니다.
2. 표시되는 상자에서 형식 드롭다운 메뉴를 클릭한 다음, SVG를 선택합니다.
3. 모두 내보내기를 선택하고 파일을 저장합니다.

참고: Photoshop은 래스터 그래픽 편집 툴입니다. 이 때문에 벡터 그래픽 편집 툴인 Adobe Illustrator에서 SVG 파일을 만들고 편집하는 것을 선호하는 사람이 많습니다.