SVG 만들기

이 글에서 SVG를 만들 수 있는 그래픽 프로그램에 대해 적고자 한다.  

 

SVG는 GIF, JPG, PNG 등과 같은 이미지 파일이다. 아래를 보듯 SVG는 그래픽 프로그램으로도 만들 수 있지만 HTML을 사용해서도 만들 수 있다. HTML 태그에 SVG가 있는데 어려워서 개인적으로 만들지 못했고 다른 사람이 만든 것을 퍼왔다. 참고로 아래는 온라인 코드 편집기인 코드펜(CodePen)이라는 것이다. 

 

See the Pen SVG Loading icons by Aurer (@aurer) on CodePen.

 

 

 삼각형, 사각형 등 간단한 모양은 코딩으로 SGV를 만드는 것을 봤는데 일러스트레이트 등 복잡한 것은 일러스트레이터, 잉크스케이프 등 벡터 그래픽 프로그램으로 만드는 것을 봤다. 사진을 텍스트 프로그램으로 열면 소스가 아주 길고 복잡하다는 것을 보면 어느 정도 이해가 된다. 아래에서 SVG를 만들 수 있는 벡터 그래픽 프로그램을 소개한다.  

 

---

 

잉크스케이프

 

윈도에서 어도비의 일러스트레이터라 불리는 것이 리눅스에 잉크스케이프라는 것이 있다. 물론 잉크스케이프는 윈도 버전도 있으니 윈도도 해당된다. 반면에 어도비 사의 일러스트레이터은 리눅스 버전은 없고 어도비 사의 프로그램인 포토샵, 프리미어 등도 리눅스 버전이 없다. 아래 그림을 보듯이 잉크스케이프는 SVG로 저장할 수 있다. 

 

 

내가 어도비의 일러스트레이터를 사용해보지 않아 모르겠는데 일러스트레이터 전용 파일형식은 AI라 알고 있다. SVG도 만들 수 있는 것으로 안다.

---

Google 드로잉

 

아래에서 웹브라우저만 있으면 되는 웹 그래픽 편집기에 대해 적을 것이다. 오래전부터 내가 구글 드라이브를 사용해서 알고 있는데 아래 그림처럼 Google 드로잉을 사용하면 SVG를 만들 수 있다는 것이다. Google 드로잉은 구글 드라이브에서 더보기를 보면 기본으로 추가됐는지 기억은 안 나지만 거기에 있다. 참고로 아래 그림에 보이는 무료 온라인 그래픽 편집기인 Photopea는 연결한 앱 더보기로 추가한 것이다. 

 

---

Photopea

 

Photopea도 웹 그래픽 편집기로 위에서 적었듯이 Photopea에서 만든 사진을 SVG로 저장할 수 있다. 나는 Photopea를 구글 드라이브로 접속할 때도 있고 https://www.photopea.com/사이트로 접속할 때도 있다. 주로 구글 드라이브를 통해 접속한다. 아래 그림을 보듯이 SVG 외에 다양한 파일 형식으로 이미지를 내보낼 수 있다. 

 

구글 드라이브에 Photopea 앱을 설치하는 방법은 연결하기 앱 더보기 클릭 > photopea 키워드로 앱 검색 > 설치 버튼 클릭 > 계속을 클릭한 후 자신의 구글 계정 클릭 > 확인과 완료하면 끝난다.

 

photopea

---

SVG가 래스터 그래픽 형식이 아니라 벡터 그래픽 형식이라 많이 사용할 것 같다. 그리고 HTML에서도 지원한다. 그런데 내가 벡터 그래픽 파일 형식인 SVG를 이용해 본 적이 한 번도 없다. 내가 많이 이용하는 이미지 파일 형식은 래스터 그래픽 파일 형식인  GIF, JPG, PNG이다. 

 

최근 위 그림 더보기에 있는 Webp 이미지 파일 형식을  많이 사용한다. 특별한 이유는 없고 이 블로그에 구글 유입이 많이 발생할까 하는  단순한 이유다. Webp가 구글이 개발한 파일 형식이기 때문이다. 하지만 네이버 등에서 WebP 사용을 지원하지 않으니 권하지 않는다. 나는 네이버 유입을 원하지 않는다.