SVG 파일 형식에 대해 알아야 할 것

Scalable Vector Graphics(SVG) 이미지는 애니메이션과 상호작용을 지원하는 2D 그래픽 이미지예요. SVG 파일의 동작은 XML 텍스트 파일에 정의돼요. XML은 사람과 컴퓨터 모두 읽을 수 있는 인코딩 규칙을 정의하는 파일이에요. SVG 파일은 크기를 다양하게 조절해도 이미지 품질이 그대로 유지돼요. 현재 모든 최신 브라우저가 SVG 형식을 지원해요.

웹사이트에 사용할 이미지를 만들 때는 벡터 이미지와 래스터 이미지 중 하나를 선택해야 해요. 래스터 이미지는 해상도가 정해진 픽셀로 이루어져 있어요. 그래서 이미지를 확대하거나 크기를 키우면 거칠어 보이거나 픽셀이 드러나요.

반면 벡터 이미지는 선, 점, 도형으로 만들어져요. 크기를 조절해도 이미지 품질이 떨어지지 않아 크기 변경이 필요한 이미지에 가장 적합해요. 대부분의 인쇄용 그래픽과 웹사이트는 나중에 다양한 크기의 디자인에 대응할 수 있도록 SVG 형식으로 제작돼요. SVG 형식은 로고, 타이포그래피, 아이콘, 일러스트에 흔히 사용돼요.

SVG 파일의 장점

크기 조절

SVG 이미지를 볼 때는 화면 해상도나 크기가 중요하지 않아요. 확대하면 흐릿해질 수 있는 PNG나 JPG와 달리, SVG 이미지는 여전히 선명하게 보여요. 해상도에 영향을 받지 않는 특성 덕분이에요.

웹사이트 성능

제대로 최적화된 SVG 파일은 다른 파일 형식보다 용량이 작아요. 페이지 로딩 시간이 줄어 웹사이트 성능이 향상돼요. 방문자가 사이트의 페이지를 더 빠르게 이동할 수 있어 사용자 경험도 좋아져요.

간편한 편집

일반적인 그래픽 편집 앱으로 SVG 파일을 쉽게 편집할 수 있어요. Adobe Illustrator, Corel, Sketch가 흔히 사용돼요. 마크업을 직접 수정할 수 있으므로 텍스트 편집기를 사용할 수도 있어요.

애니메이션 지원

JavaScript 같은 기술로 SVG 파일을 조작해 상호작용을 더하고 눈길을 끌 수 있어요. 특히 애니메이션을 적용하면 웹사이트를 더 흥미롭게 만들 수 있어요.

스타일 제어

SVG 파일은 원하는 이미지 스타일을 자유롭게 선택할 수 있어요. 선 색상, 크기, 채우기 색상 등의 속성을 쉽게 조절할 수 있어요. 또 이미지에 마우스를 올렸을 때 나타나는 효과를 추가할 때 이미지 스프라이트를 사용할 필요가 없어요.

SVG 파일의 단점

• 2D 이미지에만 사용할 수 있어 카메라로 촬영한 이미지는 지원하지 않아요.
• WordPress 사이트에서 SVG 파일 형식을 사용하려면 WordPress 플러그인(WP SVG)이 필요해요. 보안상의 이유로 WordPress는 별도로 허용하지 않으면 SVG 이미지를 사용할 수 없어요.

SVG로 변환하는 방법

Filestar를 사용하면 100가지가 넘는 파일 형식을 SVG로 쉽게 변환할 수 있어요. SVG 파일 형식에 사용할 수 있는 모든 skills는 이 링크에서 확인해 보세요. Filestar 데스크톱 앱을 사용하면 몇 단계만으로 SVG 파일을 변환할 수 있어요. Filestar 앱을 다운로드한 뒤 아래 단계를 따라 해 보세요.

• 컴퓨터에서 변환할 파일을 마우스 오른쪽 버튼으로 클릭하고 Filestar로 변환을 선택하세요
• 검색창에 ‘convert to SVG’를 입력하세요
• 실행을 클릭하세요
• SVG 이미지가 컴퓨터에 자동으로 저장돼요

또는 아래의 짧은 영상을 시청해 보세요. PDF를 SVG로 변환하는 예시를 담았어요.