웹용 Inkscape에서 벡터 그래픽 내보내기

이 튜토리얼에서는 생성한 벡터 그래픽을 SVG( 확장 가능한 벡터 그래픽) 형식으로 저장하는 방법을 보여드리겠습니다. SVG 파일은 저장 공간이 거의 필요하지 않고 품질 저하 없이 어떤 크기로든 확장할 수 있어 인터넷에서 사용하기에 특히 적합합니다. 회사 로고, 아이콘, 그림 등 어떤 종류의 벡터 그래픽을 만들었든 Inkscape에서 벡터 그래픽을 만든 후에는 웹에 최적화된 작업을 사용할 수 있도록 저장 프로세스를 알려드리겠습니다.

주요 요점

• SVG 파일은 높은 확장성과 작은 파일 크기를 제공합니다.
• Inkscape는 벡터 그래픽을 레이어와 가이드에 대한 특수 정보가 포함된 SVG 형식으로 저장합니다.
• SVG에는 여러 가지 유형이 있습니다: 기본 Inkscape SVG와 웹에 더 적합한 최적화된 SVG.

단계별 지침

벡터 그래픽을 SVG 형식으로 저장하려면 다음과 같이 진행하세요:

먼저 Inkscape에서 디자인이 완성되었는지 확인해야 합니다. 그렇다면 상단 메뉴 모음에서 파일을 클릭합니다.

드롭다운 메뉴에서 다른 이름으로 저장 옵션을 선택합니다. 그러면 위치와 파일 유형을 선택할 수 있는 새 창이 열립니다.

기본적으로 Inkscape는 디자인의 레이어와 구조에 대한 정보가 포함된 자체 SVG 형식으로 저장합니다. 그러나 웹용으로 사용하려면 최적화된 버전을 사용하는 것이 좋습니다. 하드 드라이브에서 파일을 저장할 위치를 찾습니다.

파일 유형 드롭다운 메뉴에서 일반 SVG 또는 최적화된 SVG를 선택합니다. 처음 시도할 때는 일반 SVG를 선택합니다.

파일 이름(예: Logo_normal)을 지정하고 저장을 클릭하여 확인합니다. 이제 이 파일이 일반 SVG 형식으로 저장됩니다.

이 파일은 일반적으로 크기가 약 11KB인 Inkscape SVG보다 작은 것을 볼 수 있습니다. 일반 SVG는 6KB까지 작을 수 있으므로 훨씬 적은 메모리를 필요로 합니다.

이제 파일을 다시 클릭한 다음 다른 이름으로 저장을 클릭하여 이 과정을 반복하되 이번에는 최적화된 SVG를 선택합니다.

예를 들어 파일 이름을 로고 최적화 등으로 변경하고 저장합니다. 몇 가지 옵션을 묻는 메시지가 표시됩니다. 여기에서 CSS 속성을 XML 속성으로 변환하고 다양한 최적화 설정을 할 수 있습니다. 가장 적합하다고 생각되는 옵션을 선택하는 것이 좋습니다.

선택을 확인하고 새 파일 크기를 살펴보세요. 최적화 버전의 크기는 4KB에 불과한 경우가 많습니다. 이는 이 방법을 사용하여 파일이 더 압축되었음을 나타냅니다.

이제 브라우저에서 파일을 열면 일반 버전과 최적화된 SVG가 모두 동일하게 보이는 것을 확인할 수 있습니다. 브라우저의 주소 표시줄에 파일의 URL을 입력하여 결과를 확인합니다.

확장성을 테스트하려면 브라우저의 확대/축소 수준을 조정할 수 있습니다. 예를 들어 50% 또는 최대 300%까지 확대하는 경우입니다. 확대/축소 수준에 관계없이 가장자리가 선명하게 유지되는 것을 확인할 수 있습니다.

이러한 SVG 파일의 속성은 웹사이트에서 사용하기에 적합합니다. 로고를 아무리 크게 표시해도 모든 디바이스에서 선명하고 또렷하게 표시할 수 있습니다.

그래픽에 SVG 형식을 사용하면 파일 크기를 줄일 수 있을 뿐만 아니라 어떤 해상도에서도 디자인 품질을 유지할 수 있습니다.

요약

이 튜토리얼에서는 벡터 그래픽을 SVG 형식으로 저장하는 방법을 배웠습니다. 이렇게 하면 웹에서 디자인을 효율적으로 사용할 수 있으며 확장성과 작은 파일 크기의 이점을 제공합니다.