SVG 이미지 파일 만드는 방법

SVG는 Scalable Vector Graphics의 약자로, XML 기반의 벡터 이미지입니다. 벡터 방식이므로 이미지를 축소하거나 확대를 해도 깨지지 않는다는 장점이 있습니다.

SVG 이미지 파일을 만드는 방법 중 하나는, 벡터 그래픽 제작 프로그램으로 이미지를 만든 후 SVG 형식으로 저장하는 것입니다. 대표적인 벡터 그래픽 제작 프로그램에는 Adobe Illustrator와 Inkscape가 있습니다.

Illustrator는 워낙 유명한 제품이라 다 아실 거 같고, Inkscape는 Illustrator을 대체할 수 있는 오픈 소스 프로그램입니다.

Illustrator로 SVG 만들기

  • Illustrator에서 도형을 만듭니다.

  • SVG로 만들 도형을 선택합니다.
  • 마우스 우클릭하고 [선택 항목 내보내기]를 클릭합니다.

  • 포맷을 SVG로 설정한 후 [자산 내보내기]를 클릭합니다.

  • 생성돤 SVG 파일을 웹브라우저로 열면...

  • 도형을 볼 수 있습니다. 웹브라우저의 크기를 늘렸다 줄였다 하면서 도형이 깔끔하게 표현되는지 확인해보세요.

Inkscape로 SVG 만들기

  • Inkscape에서 도형을 만듭니다.

  • [파일]의 [사본 저장]을 클릭합니다.

  • 여러 가지 타입의 SVG가 있는데, 호환을 고려하여 일반 SVG를 선택합니다.
  • [저장]을 클릭하면 SVG 파일이 만들어집니다.

  • 웹브라우저에서 잘 표현되는지 확인합니다.

Photoshop으로 SVG 만들기

벡터 그래픽 소프트웨어는 아니지만, 포토샵으로도 만들 수 있습니다. 단, 그림이 복잡하면 시간이 많이 걸립니다.

  • [파일 - 내보내기 - 내보내기 형식]을 클릭합니다.

  • 파일 형식을 SVG로 선택한 후 [내보내기]를 클릭합니다.

Related Posts

안드로이드 스튜디오 / 버전코드 변경하는 방법

안드로이드 스튜디오 / 버전코드 변경하는 방법

구글 플레이 콘솔에 앱을 등록할 때 앱에서 설정한 버전이 등록됩니다. 버전은 versionName과 versionCode가 있습니다. 상단의 0.1.0이 versionName, 하단에 있는 1이 versionCode입니다. 버전은 build.gradle에서 정합니다. versionCode와 versionName의 값을 수정하면 됩니다.

코딩용 글꼴 D2coding 설치하는 방법

코딩용 글꼴 D2coding 설치하는 방법

코딩할 때는 고정폭 글꼴을 사용합니다. 그래야 가독성이 높아집니다. 코딩용 글꼴로 많이 사용되는 것은 Courier New, Consolas 등이 있는데, 영어일 때는 보기 좋지만, 한글 모양은 그다지 예쁘지 않습니다. 코딩에 한글이 들어갈 일이 별로 없을 거라 생각할 수도 있지만, 주석에 사용할 수도 있고, HTML 문서 작업할 때는 꽤 많은 한글을 만나게 됩니다. 코딩에 ...

아파치(Apache) 웹서버에서 403 페이지, 404 페이지 만드는 방법

아파치(Apache) 웹서버에서 403 페이지, 404 페이지 만드는 방법

아파치(Apache) 웹서버를 사용하고 있습니다. 열람 권한이 없는 접속이 있으면 404 에러가, 페이지가 없으면 404 에러가 납니다. 그런데 그 페이지는 아주 단순하고 보기 좋지 않습니다. 예를 들어 403 페이지는 다음처럼 생겼습니다. 만약 모양이 마음에 들지 않는다면, 직접 에러 페이지를 만들 수 있습니다. 적당한 곳에 원하는 디자인과 내용을 가진 페이지를 만듭니다. 다음의 내용으로 ...

크롬 / 요소 검사 패널 레이아웃 변경하는 방법

크롬 / 요소 검사 패널 레이아웃 변경하는 방법

대부분의 웹브라우저가 요소 검사 기능을 갖추고 있습니다. 파이어폭스가 가장 유명하기는 하지만, 크롬을 주로 쓰다보니 크롬의 요소 검사가 제일 편합니다. 크롬 요소 검사를 실행(F12)하면 HTML을 보여주는 패널과 CSS를 보여주는 패널이 세로로 배열되거나 가로로 배열되는데, 요소 검사 부분의 크기에 따라 자동으로 변경됩니다. 만약, 가로 또는 세로로 고정하고 싶다면… 요소 검사의 오른쪽 위에 있는 점 ...

Brackets / 다운로드하고 설치하는 방법

Brackets / 다운로드하고 설치하는 방법

Brackets 브라켓은 웹 코딩에 최적화된 텍스트 에디터입니다. Adobe가 후원하는 오픈소스로, 누구나 자유롭게 사용할 수 있습니다. With focused visual tools and preprocessor support, Brackets is a modern text editor that makes it easy to design in the browser. It’s crafted from the ground up for web designers and front-end developers. 다운로드 브라켓 홈페이지에 접속합니다. Download Brackets를 ...

윈도우(Windows) 버전과 인터넷 익스플로러(IE : Internet Explorer) 버전

인터넷 익스플로러는 마이크로소프트가 제공하는 웹브라우저입니다. 현재는 점유율이 많이 낮아졌지만, 한때 95%가 사용할 정도로 절대 강자였던 프로그램입니다. IE의 가장 큰 특징은 윈도우(Windows)에 종속되어 있다는 것입니다. 즉, 윈도우 버전마다 설치할 수 있는 IE의 버전이 다릅니다. 최신 버전의 IE를 사용하려면 최신 버전의 윈도우를 사용해야 합니다. 사용자가 IE 때문에 윈도우를 살리는 없기에, 웹 개발자에게는 아주 골치아픈 ...

에디트플러스 / 탭을 스페이스로, 스페이스를 탭으로 바꾸는 방법

에디트플러스 / 탭을 스페이스로, 스페이스를 탭으로 바꾸는 방법

코딩을 할 때 들여쓰기를 합니다. 들여쓰기를 어떻게 할지에 대해서 논쟁이 있습니다. 탭으로 할지 스페이스(공백)으로 할지, 2칸으로 할지 4칸으로 할지… 프로그래밍 언어에 따라 선호하는 기준이 다릅니다. 다행히도 요즘 텍스트에디터는 그 설정을 쉽게 바꿀 수 있습니다. 귀찮은 것은 이미 작성한 코드를 변경하는 것이죠. 에디트플러스를 사용한다면 탭을 스페이스로, 스페이스를 탭으로 쉽게 바꿀 수 있습니다. ...

Brackets / 실시간 미리보기 사용하는 방법

Brackets / 실시간 미리보기 사용하는 방법

브라켓에는 실시간 미리보기 기능이 있습니다. 에디터에서 코드를 변경하면 바로 웹브라우저에 반영되는 것이죠. 어떻게 실시간 미리보기를 사용하는지 알아보겠습니다. 실시간 미리보기를 할 HTML 문서를 열고, 오른쪽에 있는 번개 모양 아이콘을 클릭합니다. 실시간 미리보기를 처음 사용한다면, 구글 크롬이 필요하고 HTML과 CSS만 가능하다는 메시지가 나옵니다. 을 클릭하면… 크롬에서 HTML 문서를 보여줍니다. 코드에 커서를 위치시키면, 그 부분이 크롬에서 강조됩니다. 코드를 수정하면 ...

에디트 플러스로 카페24 쇼핑몰 디자인 편집하는 방법

에디트 플러스로 카페24 쇼핑몰 디자인 편집하는 방법

카페24 쇼핑몰은 자체적으로 디자인 편집기를 제공합니다. 미리보기도 가능하고, 코드 하이라이트도 되는 편집기이기는 하지만, 전문 텍스트 에디터가 아니어서 불편한 점도 있습니다. 만약 에디트플러스를 사용한다면, 카페24에서 제공하는 플러그인을 이용하여 에디트플러스에서 코딩 작업을 할 수 있습니다. 에디트플러스 4 카페24의 플러그인이 지원하는 에디트플러스 버전은 4, 32비트입니다. 최신 버전은 5인데, 5에서는 플러그인을 사용할 수 없습니다. 에디트플러스 4는 ...

SVG 이미지 파일 만드는 방법

SVG 이미지 파일 만드는 방법

SVG는 Scalable Vector Graphics의 약자로, XML 기반의 벡터 이미지입니다. 벡터 방식이므로 이미지를 축소하거나 확대를 해도 깨지지 않는다는 장점이 있습니다. SVG 이미지 파일을 만드는 방법 중 하나는, 벡터 그래픽 제작 프로그램으로 이미지를 만든 후 SVG 형식으로 저장하는 것입니다. 대표적인 벡터 그래픽 제작 프로그램에는 Adobe Illustrator와 Inkscape가 있습니다. Illustrator는 워낙 유명한 제품이라 다 아실 ...