SVG 파일은 어떤 용도로 사용됩니까?

SVG는 최근 몇 년 동안 큰 발전을 이뤘습니다. 실제 용도는 다음과 같습니다.

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

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

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

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

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

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

SVG 파일은 얼마나 큽니까?

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

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

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

SVG 파일

SVG 파일 포맷은 웹 사이트에 2D 그래픽, 차트, 일러스트레이션을 표현하는 데 널리 사용되는 도구입니다. 벡터 파일이므로 확대하거나 축소해도 해상도가 저하되지 않습니다. SVG 이미지의 주요 기능과 장단점, 발전 과정 등을 알아보세요.

살펴볼 내용

SVG 파일의 정의

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

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

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

SVG 파일의 역사

1994년 네덜란드의 소프트웨어 엔지니어인 Martijn Koster가 SVG 파일 포맷을 처음 제안했습니다.

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

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

SVG 파일의 장단점

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

SVG 파일의 장점

픽셀로 구성된 래스터 파일과 달리, SVG와 같은 벡터 그래픽은 크기에 상관없이 항상 고품질 해상도를 유지합니다. SVG 이미지는 특정 브라우저나 다양한 용도에 맞게 크기를 조정해도 품질이 저하되지 않습니다.
기본 SVG 파일은 많은 컬러 픽셀로 생성되는 래스터 이미지보다는 크기가 작습니다.
SVG 파일은 텍스트를 디자인이 아닌 텍스트 그대로 처리하기 때문에 스크린 리더가 SVG 이미지에 포함된 모든 단어를 스캔할 수 있습니다. 이는 웹 페이지를 읽어야 하는 사람들에게 매우 유용합니다. 검색 엔진은 SVG 이미지 텍스트를 읽고 색인을 달 수도 있습니다.
SVG는 JavaScript와 같은 스크립팅 언어를 통해 인터랙티브한 요소를 지원하므로 다이내믹하고 매력적인 그래픽을 구현할 수 있습니다.
SVG는 쉽게 조작 가능하고 다른 웹 기술과 통합할 수 있는 XML 언어입니다.

SVG 파일의 단점

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

SVG 파일을 여는 방법

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

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

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

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

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

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

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

Illustrator에서 SVG 파일을 만드는 방법

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

Illustrator에서 아트워크를 결합했다면, 윤곽선을 만들 텍스트를 선택합니다. 이렇게 하면 다른 컴퓨터에 아트워크를 표시할 때 글꼴 교체 문제를 방지할 수 있습니다. 이제 '유형 – 윤곽선 만들기'를 선택합니다.
'파일 > 다른 이름으로 저장'을 선택하여 파일을 저장합니다. 표시되는 상자에서 '형식' 드롭다운 메뉴를 클릭한 다음, SVG를 선택합니다.
'파일 > 내보내기 > 다른 이름으로 내보내기'를 사용하고, 형식으로 SVG 를 선택하여 편집한 SVG를 내보낼 수도 있습니다. 이렇게 하면 정확성 및 호환성과 같은 내보내기 설정을 조정할 수 있습니다.

Illustrator에서 SVG 파일을 편집하는 방법

파일을 선택하고 Illustrator에서 SVG를 엽니다. 또는 '파일 > 가져오기'를 사용하여 SVG 파일을 기존 Illustrator 문서로 가져올 수 있습니다.
선택 도구(또는 직접 선택 도구)를 사용하여 SVG 내에서 개별 패스, 모양 또는 그룹을 선택합니다. 패스의 크기를 조정하거나, 모양을 조정하거나, 변형하거나, 편집하거나, 색상과 효과를 추가할 수 있습니다.