SVG, 일러스트레이터와 잉크스케이프로 벡터그림을 웹에 적용하세요

SVG(Scalable Vector Graphics)는 크기의 변화에도 품질이 떨어지지 않는 순수한 벡터 그래픽이란 뜻으로 SVG는 웹 친화적인 벡터 파일 포맷입니다. JPEG와 같은 픽셀 기반의 래스터 파일과 달리, 벡터 파일은 그리드 위의 점과 선을 기반으로 하는 수학 공식을 통해 이미지를 저장합니다.

SVG는 XML 형식과 일러스트레이터, 잉크스케이프 등의 드로잉툴을 통해 그려진 벡터 기반 그래픽을 정의합니다.

[참고] 레스터,Raster는 한국에서는 Bitmap이라 부르지만, Raster라 부르는 것이 맞습니다. Raster의 반대가 벡터 Vector입니다. 레스터는 부드럽고 뿌연 느낌의 그림표현에 적절하고, 반면 벡터는 명확한 표현이 가능하죠.  아날로그와 디지털의 드로잉이라 봐도 좋겠습니다.

 

 

SVG 코드로 도형표현

XML기반의 코드로 벡터도형을 표현하기에 복잡합니다.   아래 소스에 svg 태그에 xmlns와 circle cx, cy와 같이 표현하는 것처럼 SVG코드로 보여주기에는 아래 동그라미는 표현이 너무 불편합니다.

https://www.w3schools.com/graphics/svg_intro.asp

W3Schools.com

 

 

My first SVG

 

위 SVG코드에 복잡한 도형들을 표기한 예는 아래 일러스트레이터의 SVG Code를 포함한 예입니다.

 

logo_SVGcode.html

0.00MB

 

 

코드가 아닌
그림으로 넣자구

---

 

 

일러스트레이터 작업 후 그림 SVG 다른이름 저장

일러스트레이터에서 작업한 기본 파일은 ai파일입니다. 인공지능이란 뜻이 아닌 , adobe illustrator의 줄인말이죠.  웹용 혹은 3D 그래픽을 위한 블렌더에 작업하기 위해서는 아트워크 디자인 원본 ai파일은 분명하게 저장을 하고, 별도 내보내기용으로 다른 이름저장(Save As...)로 SVG파일로 저장해야 합니다.  ai파일은 언제든 수정할 수 있지만 SVG는 수정이 조금 어렵습니다.

SVG저장을 위해 우선 여러분이 현재 작업중인 문서에 고유이름의 영어이름으로 예를 들어 top.svg라고 저장하면 되는 데, 아트보드라는 일러스트레이터의 캔버스 크기대로 내보내면 안됩니다.  아래와 같이 오브젝트를 선택하고 아트보드툴을 더블클릭한 후 Fit to Seleted Art 프리셋으로 Ok를 누르고 저장을 해야합니다.

 

 

일러스트레이터의 SVG는 수정이 불편하다

 PDF가 웹용으로 사용되면 글씨요소들을 드래그하여 복사하고 유용하겠지만, 그런 기술은 개별되지 않았습니다.

SVG로 다른 이름 저장하기 마지막 과정에 글씨는 아웃라인처리되어 수정을 할 수 없습니다. 원본 ai파일이 있어야 디자인 수정한 것으로 반영해야 하기에 역시 Save As..해야 합니다.  

 

내보내기. 아니, 다른 이름 저장한 SVG파일을 다시 일러스트레이터에서 열어보면, Swatches에 색상 정보가 없습니다. GIF처럼 형상만 유지한 내용이라서 결과물이 내보내기 처럼 그래픽 정보가 축소가 된 상태로 있는 것입니다. 

 

 

TOP.ai

0.22MB

 

 

---

 

오픈소스 잉크스케이프는 기본저장은 SVG

블렌더와 같이 Inkscape는 GNU/Linux, Windows 및 macOS를 다양한 지구의 컴퓨터 운영체제(OS)에 맞게 드로잉을 위한 무료 오픈 소스 벡터 그래픽 편집기 입니다 .  오픈소스란 Free 즉 ,무료를 말하는 것입니다.

Inkscape vector graphics

 

일러스트레이터와는 조금 다른 UI와 작업공간을 볼 수 있지만 나름 풍부한 기능을 제공하며 만화, 클립 아트, 로고, 타이포그래피, 다이어그래밍 및 플로차트와 같은 예술적 및 기술적 일러스트레이션에 널리 사용됩니다. 벡터 그래픽을 사용하여 무제한 해상도에서 선명한 출력 및 렌더링을 허용하며 래스터 그래픽과 같이 고정된 픽셀 수에 구속되지 않습니다.

 

https://inkscape.org/release/inkscape-1.3.2/windows/64-bit/msi/?redirected=1

Inkscape 1.3.2 - Windows : 64-bit : msi | Inkscape

 

무설치 Winodws 포터블버전은 아래 링크를 참고하세요.

https://inkscape.org/~GordCaswell/%E2%98%85inkscape-112-windows-portable

Inkscape 1.1.2 Windows Portable on the Inkscape website

 

https://www.youtube.com/watch?v=8f011wdiW7g&list=PLqazFFzUAPc5lOQwDoZ4Dw2YSXtO7lWNv