살펴볼 내용

• 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 파일은 XML을 사용하므로 Google과 같은 검색 엔진이 텍스트가 많은 차트와 그래프를 읽을 수 있습니다. 따라서 검색 엔진 최적화에 도움이 됩니다. Google이 SVG 내의 키워드를 감지하여 웹 페이지의 검색 순위를 높일 수 있기 때문입니다. 또한 SVG는 애니메이션을 지원하므로 웹 페이지를 더욱 흥미롭게 만들 수 있습니다.

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 파일을 만들고 편집하는 것을 선호하는 사람이 많습니다.

SVG 파일 관련 FAQ

SVG 파일은 애니메이션을 지원합니까?

SVG 파일 포맷은 정적인 이미지만 지원하는 것은 아닙니다. 웹 그래픽에 움직이는 요소를 넣을 수 있는 다양한 온라인 툴이 있습니다. SVG 애니메이션은 인포그래픽에서 여러 슬라이드를 오가는 슬라이더 기능과 같은 비교적 기본적인 요소를 포함할 수 있습니다. 똑딱거리는 시곗바늘처럼 일러스트레이션을 움직이게 할 수도 있습니다.

SVG 파일인지 어떻게 알 수 있습니까?

가장 쉬운 방법은 확장자를 확인하는 것입니다. SVG 파일은 .svg로 표시됩니다. 또한, 컴퓨터 화면에서 이미지를 200% 이상 확대하면 SVG와 같은 벡터 이미지를 구별할 수 있습니다. 벡터 이미지는 픽셀화되거나 흐려지지 않고 선명한 선과 단색을 유지합니다.

SVG 파일은 인터넷에서만 사용할 수 있습니까?

SVG 이미지가 주로 웹에서 사용되기는 하지만 다른 곳에서도 사용되고 있습니다. 예를 들어, SVG 파일은 원본 크기를 변경해도 왜곡되지 않으므로 티셔츠 등 의류 인쇄용 템플릿으로도 유용합니다. 많은 픽셀로 구성된 JPEG 파일을 사용하면 이미지가 선명하게 나오지 않습니다.

SVG 파일은 얼마나 큽니까?

SVG 파일의 크기는 포함된 이미지 데이터의 양에 따라 다르지만 일반적으로 다른 파일 유형보다 작습니다. 패스와 고정점이 많은 복잡한 그래픽은 간단하고 깔끔한 디자인보다 더 많은 저장 공간을 차지합니다. 파일에 포함된 복잡한 명령의 수를 최대한 줄이는 것이 좋습니다.

SVG 파일과 PNG 파일의 차이점은 무엇입니까?

SVG는 벡터 파일이고, PNG는 래스터 파일입니다. PNG 파일을 너무 많이 확대하거나 축소하면 흐려지고 픽셀화 현상이 나타납니다. SVG에는 픽셀이 없으므로 해상도가 그대로 유지됩니다. 또한 PNG는 애니메이션을 지원하지 않습니다.