[SVG] 간단한 SVG 파일 제작하기

웹 페이지 제작 시 SVG 파일을 디자이너에게 받아서 그대로 사용하곤 했는데, 프로젝트 중 디자이너님이 쉬는 기간에 SVG 아이콘을 변경해 달라는 요청을 받았다.

어렵지는 않지만 처음 해보는 작업이라 꽤 시간이 걸렸던 기억이 나서 정리 해보려고 한다.

 

 

SVG 파일의 장점

SVG 파일은 용량이 작아서 웹 사이트의 속도를 저하시키지 않는데다가 벡터 파일 형식이라 크기를 확대하거나 축소해도 이미지 품질이 저하되지 않는다.

자세한 설명은 Adobe 사이트에 잘 정리되어 있으니 참고하면 좋을 것 같다.

https://www.adobe.com/kr/creativecloud/file-types/image/comparison/png-vs-svg.html

PNG vs. SVG | Adobe

 

 

SVG 이미지 사용하기

SVG 파일 무료 다운로드

우선 SVG파일을 무료로 사용할 수 있는 사이트를 검색했다.

https://www.iconfinder.com/

7,900,000+ free and premium vector icons, illustrations and 3D illustrations

 

무료 파일도 있고 유료 파일도 있다.

틀만 잡혀 있는 무료버전만 다운받아도 변경하기가 수월하기 때문에 원하는 디자인에서 가장 가까운 무료 파일을 다운 받아보겠다.

 

 

검색창에 원하는 키워드를 검색하고 SVG 파일을 다운받는다.

간단하게 new 아이콘으로 진행해 보겠다.

 

SVG 파일 살펴보기

다운 받은 SVG파일을 웹에서 열어보면 다음과 같이 보여진다.

 

다시 이 SVG파일을 코드로 열어보면 다음과 같이 보여진다.

<?xml version="1.0" ?>
<!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>
<svg height="32px" id="Layer_1" style="enable-background:new 0 0 32 32;" version="1.1" viewBox="0 0 32 32" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M28,14H18V4c0-1.104-0.896-2-2-2s-2,0.896-2,2v10H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h10v10c0,1.104,0.896,2,2,2  s2-0.896,2-2V18h10c1.104,0,2-0.896,2-2S29.104,14,28,14z"/>
</svg>

 

위의 파일에 사용된 태그와 특성은 아래 접은글에 간단히 정리해 두었다.

1. height: SVG 그래픽의 높이
2. id: SVG 요소의 고유 식별자로 사용될 ID
3. style: 인라인 스타일을 정의
4. version: 사용된 SVG 버전
5. viewBox: 좌표 시스템, "0 0 32 32"는 (x, y) 좌표가 0에서 32까지의 범위로 정의되어 있음을 의미
6. xml:space: XML 공백 처리 방법
7. xmlns: XML 네임스페이스 정의
8. <path> : SVG에서 실제 그래픽을 그리는 데 사용되는 요소
9. d : 실제 경로 데이터. M, H, V, C, S, L 등의 경로 커맨드가 사용됨

전문적으로 제작하시는 분이 아니라면 하나하나 외워둘 필요는 없을 것 같다.

나도 변경해야하는 부분의 설명만 자세히 읽고 빠르게 넘어갔다.

 

SVG 파일 뷰어 프로그램

사실 이부분은 선택 사항인데

나는 변경할 파일 갯수가 적었고 어려운 작업 또한 아니었기 때문에 SVG파일을 vsCode에 넣고 변경내용을 웹사이트에서 확인했다(..ㅎㅎ)

이 방법은 시간이 꽤 걸리기 때문에 메모장으로 코드를 열어 변경한 후 바로 변경 내용을 확인 하는 것이 좋을 것 같다.

디자이너분들이 실제로 작업을 할 때는 어떤방법으로 하시는지 궁금하다.

 

아래 링크는 w디자이너님의 SVG 파일 미리보기 설정에 대한 게시글이다.

https://wdesigner.tistory.com/entry/%EC%9C%88%EB%8F%84%EC%9A%B0-%ED%8C%8C%EC%9D%BC%ED%83%90%EC%83%89%EA%B8%B0-SVG-%ED%8C%8C%EC%9D%BC-%EB%AF%B8%EB%A6%AC%EB%B3%B4%EA%B8%B0-%EB%B0%A9%EB%B2%95

윈도우의 파일 탐색기에서 SVG 파일 미리보기 방법

 

SVG 파일 수정

마지막으로 다운로드 받은 SVG 파일 코드를 원하는 모양대로 수정해 주면 된다.

필요없는 부분은 지워주고 사이즈, 길이, 색상, 모서리의 라운딩 여부 등을 지정해주면 아래와 같은 아이콘이 생성된다.

 

크게 변경된 부분이 없는 것 같지만 아이콘은 사소한 너비나 굵기, 색상등으로도 웹사이트에 자연스럽게 섞여 들어갈 수 있는지의 여부가 결정되므로 미세한 조정이 중요한 것 같다. (그래서 디자이너님이 손 봐주시면 웹 페이지 분위기 자체가 달라진다 ㅎㅎ)

 

코드는 아래와 같다.

<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  <path d="M12 4V20M4 12H20" stroke="#666" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

 

 

SVG 파일 사용하기

완성된 SVG파일은 HTML 중간에 코드를 그대로 넣어 사용하거나

위와 같이 경로를 입력해 사용할 수도 있다.

각자 프레임워크에서 이미지 파일을 삽입하는 방법대로 사용하면 된다.

 

 

마치며

오늘은 SVG파일을 다뤄본 기억을 되짚어 글을 적어보았다.

이미지 파일이 기호로 이루어진게 신기하기만 했었는데 자세히 들여다 볼 기회가 생겨 즐거웠다.

참고로 PNG파일을 SVG파일로 변환해주는 컨버터도 있으니 필요할 때 사용하면 좋을 것 같다.

https://convertio.co/kr/png-svg/

PNG SVG 변환 (온라인 무료) — Convertio