SVG 파일 편집 프로그램 하나 소개드립니다. 웹기반 무료 이미지 편집 프로그램을 이용하면 간단하게 SVG 이미지 파일을 편집할 수 있습니다. 원하는 대로 100% 자유롭게 편집하는 것은 불가능하지만 다양한 편집 기능이 제공되기 때문에 충분히 훌륭한 결과물을 얻을 수 있을 것입니다.
SVG 파일은 일반적으로 사용되는 이미지가 아닙니다. 로고나 아이콘 등 특정한 용도로만 사용하는 파일입니다. 이 글은 저와 같은 비전문가 중에서도 SVG 파일 편집 방법을 모르는 이들을 위한 작성한 것입니다. 전문적으로 SVG 파일을 다루는 분들에게는 아무런 도움이 안될 것입니다.
목차
SVG 파일
SVG(Scalable Vector Graphics)는 벡터 그래픽을 나타내는 XML 기반의 파일 형식입니다.
자세하게 설명할 능력은 없지만 벡터 방식의 이미지는 AI, SVG 등이 있습니다. 우리들이 자주 사용하는 JPEG, GIF, PNG 등의 이미지는 래스터 방식 이미지입니다.
블로그를 운영한다면 스킨 관련 파일에서 도통 알 수 없는 형식으로 된 이미지 소스를 본 일이 있을 것입니다. <?xml, <svg, <path 이렇게 시작되는 괴상한 소스 말입니다.
SVG 파일은 다소 복잡하지만 크기에 제약이 없기 때문에 웹페이지에서 자유롭게 이미지를 구현할 수 있습니다. JPEG, PNG 등의 이미지는 크기를 키우면 화질이 떨어집니다. 하지만 SVG 파일 이미지는 크기를 키우더라도 화질이 떨어지지 않습니다. 파일 크기가 작음에도 불구하고 크기가 큰 이미지를 구현할 수 있는 것이 SVG 파일의 최대 장점입니다.
그리고 JPEG, PNG 등과 다르게 SVG 파일로는 별의 별 것을 다 만들 수 있습니다. 소스로 구현하는 것이다 보니 비틀고 기울이고 색을 바꾸는 등 자유롭게 변형 할 수 있습니다.
방법이 어렵긴 하지만 SVG 파일은 gif 처럼 애니메이션 이미지 구현이 가능합니다. 인지하진 못했더라도 SVG 움짤 이미지를 한 번 이상 접했을 것입니다. 웹페이지에 많은 움짤 이미지(gif, webp 등)가 사용되는데요. SVG 파일 움짤도 많이 사용됩니다.
웹 사이트에서 움짤을 다운로드 하려고 다른 이름으로 저장 또는 저장하면 html 등으로 저장 되는 경우가 있습니다. 이는 SVG 움짤로 구현한 페이지이기 때문에 html 등으로 저장되는 것입니다.
SVG 파일 장점 및 단점
- 화질 저하 없이 확대 또는 축소 가능
- 고품질 이미지를 작은 크기로 구현 가능
- SVG 편집 프로그램 뿐만 아니라 텍스트 에디터로도 편집 가능
- SVG 소스와 CSS 소스 통합 가능
- 움짤 이미지 구현 가능
- 소스 구현 및 제작이 다소 어렵다
SVG 파일은 정말 많은 장점이 있지만 단 하나의 단점 때문에 잘 사용되지 않습니다. 소스 구현 및 제작이 어렵다 보니 관련 지식이 없는 사람들은 사용하지 못합니다. 사용할 엄두도 못 냅니다.
이 어려운 SVG 파일 편집 및 소스 구현을 간단하게 할 수 있는 방법이 있습니다. 웹기반 SVG 파일 편집 서비스인 SVG Editor를 이용하면 쉽고 간단하게 SVG 이미지를 편집하고 소스를 생성할 수 있습니다.
SVG 파일 편집 프로그램 SVG Editor
웹기반 무료 이미지 편집 프로그램 SVG Editor를 이용하면 SVG 파일을 편집할 수 있습니다.
SVG 소스 편집 기능을 이용하면 소스 코드도 확인할 수 있습니다.
- 웹기반 무료 이미지 편집 프로그램 SVG Editor 사이트에 방문합니다.
- 화면 상단 우측의 SVG Editor 영역을 클릭하여 .svg 파일을 선택하거나 해당 영역으로 파일을 끌어와 놓습니다.
- 파일 업로드 및 로딩 작업이 완료될 때까지 기다립니다.
- SVG 파일 편집기가 열리면 SVG Edit 기본 설정 및 저장 위치를 로컬로 할지 선택한 후 OK 버튼을 클릭합니다.
- 이 때 하단의 Remember this choice를 체크하면 설정 내용이 저장됩니다.
- 이미지 편집 작업을 시작합니다.
문구를 변경하거나 추가할 수 있습니다. 필요하면 요소를 복사하여 사용할 수 있습니다.
SVG 파일 편집 (소스 코드 편집)
이미지 편집을 마쳤다면 저장 또는 다른 이름으로 저장합니다. 필요하다면 SVG 소스 편집 기능을 이용하여 소스 코드를 확인하거나 복사할 수 있습니다. SVG 파일 편집 시 동적 크기 전환 기능도 제공되니 필요할 경우 잘 사용하세요.
웹기반 무료 이미지 편집 프로그램은 SVG Editor 사이트에 방문하면 무료로 이용할 수 있습니다. 회원 가입을 요구하지 않으며 모든 기능을 무료로 이용할 수 있습니다.
무료 이미지 편집 프로그램
SVG 파일 편집 기능만 제공 하는 SVG Editor 사이트 하나만으로는 이미지 작업이 힘들 수 있습니다. 아래 소개하는 사이트 또는 프로그램과 함께 사용하세요.
무료 이미지 편집 서비스 Photopea
Photopea는 무료 사진 및 이미지 편집 서비스입니다. 웹 기반의 무료 포토샵 프로그램이라고 보면 됩니다. 이미지 편집, 이미지 형식 변환 등을 할 수 있습니다.
회원 가입 없이 이용할 수 있으며, 모든 기능은 무료로 이용할 수 있습니다.
저는 이 프로그램으로 블로그 썸네일 이미지를 만듭니다.
이미지 배경 제거 투명 배경 만들기 remove.bg
썸네일 이미지나 글에 첨부할 이미지를 만들 때 배경이 투명한 요소를 사용해야 하는 때가 있는습니다.
이 때는 remove.bg를 이용하여 사진 및 이미지 배경을 투명하게 만들면 됩니다. 사이트에 방문하여 이미지 파일을 던져 놓기만 하면 되기 때문에 정말 편합니다.
이미지 배경 제거 투명 배경 만들기 등은 이미지 배경 투명하게 글에 자세히 설명되어 있으니 참고하세요.
이미지 일괄 편집 프로그램 Photo Resizer
Photo Resizer 프로그램을 이용하면 사진 또는 이미지 리사이즈, 파일명 변경, 워터마크 삽입 등의 작업을 한 번에 할 수 있습니다.
사진이나 이미지 파일을 추가하고 파일명 설정 후 버튼 한 번만 눌러주면 되기 때문에 정말 편합니다.
자세한 설정 방법과 사용 방법은 이미지 리사이즈 글에서 확인할 수 있습니다.
자주 사용하진 않지만 움짤은 포토스케이프 프로그램과 웹서비스를 이용해서 만듭니다. 토스케이프 움짤 만드는 방법은 사진으로 gif 만들기 글에 자세히 설명되어 있으니 참고하세요.
이제 두 달 후면 봄이 찾아 옵니다. 봄 맞이 준비를 해야 합니다. 사진으로 꽃이름 찾기 글을 참고하여 겨우내 열심히 연습합니다. 그리고 봄에 꽃 구경 가서 해보세요. 정말 재미있습니다.