[HTML, CSS] 일러스트레이션(illustration)을 활용하여 웹에서 사용 가능한 SVG 코드를 만드는 방법 : SVG 코드로 이미지 그리기

by
일러스트레이션(illustration)에서 SVG 이미지가 아닌 SVG 코드로 불러오는 방법

이번 포스팅에서는 일러스트레이션(illustration)을 활용하여 SVG 이미지를 불러오는 방식이 아닌 SVG 코드로 변환해 html에 작성하는 방법을 배워보도록 하겠습니다.

SVG란?

SVG(Scaleable Vector Graphics)는 벡터 그래픽을 기반으로 이미지를 그리는 XML 기반의 포맷으로, 웹 페이지나 앱 등에서 그래픽 요소를 표현하는 데 사용됩니다.

SVG를 이미지 파일이 아닌 코드로 작성했을 경우의 장점
다양한 편집 가능성

SVG 코드로 이미지를 그리는 가장 큰 장점 중 하나는 그래픽 요소들을 직접 코드로 작성하기 때문에 필요한 경우 언제든지 편집 가능하다는 것입니다. 색상, 선 굵기, 크기, 위치 등의 속성을 손쉽게 변경할 수 있습니다. 또한, SVG 요소들의 구조를 직접 이해하고 조작할 수 있기 때문에 복잡한 그래픽 요소도 상대적으로 쉽게 수정할 수 있습니다.

크기 조정 용이성

SVG 이미지는 벡터 그래픽을 사용하기 때문에 이미지를 확대 또는 축소할 때에도 해상도 손실이 없습니다. 따라서, 웹 페이지나 앱의 다양한 디스플레이 크기에 대응하여 이미지를 조정하는 데 용이합니다. 또한, 미디어 쿼리와 결합하여 반응형 디자인을 구현하는 데도 유용하게 사용될 수 있습니다.

애니메이션 적용 가능성

SVG 코드로 그린 이미지는 CSS(Cascading Style Sheets)나 JavaScript를 이용하여 애니메이션 효과를 쉽게 적용할 수 있습니다. 이로 인해 화려하고 동적인 움직임을 구현할 수 있으며, 웹 페이지나 앱에 생동감을 더할 수 있습니다. 예를 들어, 마우스 호버 시 특정 요소가 확대되거나 회전하는 효과 등을 적용할 수 있습니다.

파일 용량 경량화

SVG 이미지는 텍스트 기반의 형식이기 때문에 파일 용량이 상대적으로 매우 작습니다. 따라서, 이미지를 다운로드하거나 로딩할 때 빠르게 처리될 수 있으며, 웹 페이지의 성능을 향상시킬 수 있습니다.

재사용성

SVG 코드로 그린 이미지는 다른 웹 페이지나 앱에서도 쉽게 재사용할 수 있습니다. SVG 코드를 복사하여 다른 프로젝트에 붙여넣기만 하면 되므로, 유사한 그래픽 요소들을 다른 곳에서도 쉽게 활용할 수 있습니다.

이제 일러스트레이션(illustration)을 활용하여 svg 코드를 불러와보겠습니다.

1. 일러스트레이션(illustration)으로 이미지 그리기
2. SVG 코드 추출

다른 이름으로 저장(Ctrl + Shift + S)에서 포맷을 SVG로 선택 후 저장 버튼을 눌러줍니다.

저장 버튼을 누르면 SVG 옵션 창이 나타나는데 왼쪽 하단 SVG 코드 버튼을 클릭하면
해당 이미지처럼 메모장에 코드가 생성되어 나타납니다.

3. SVG 코드 정리
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 27.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="레이어_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
	 y="0px" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
<style type="text/css">
	.st0{fill:none;stroke:#000000;stroke-miterlimit:10;}
</style>
<path id="gift-top" class="st0" d="M25,20c-0.4-1.5-1-2.8-1.8-3.7c-0.8-0.9-1.7-1.3-2.7-1.3c-0.6,0-1.3,0.3-1.7,0.7
	c-0.5,0.5-0.8,1.1-0.8,1.8c0,0.7,0.3,1.3,0.7,1.8c0.5,0.4,1.2,0.7,1.8,0.7H25z M25,20c0.4-1.5,1-2.8,1.8-3.7
	c0.8-0.9,1.8-1.3,2.7-1.3c0.7,0,1.3,0.3,1.8,0.7c0.5,0.5,0.7,1.1,0.7,1.8c0,0.7-0.3,1.3-0.7,1.8c-0.5,0.4-1.1,0.7-1.8,0.7H25z"/>
<path id="gift-bottom" class="st0" d="M33.9,24v8.6c0,0.6-0.3,1.3-0.8,1.7C32.6,34.8,32,35,31.3,35H18.5c-0.7,0-1.3-0.3-1.8-0.7
	c-0.5-0.5-0.8-1.1-0.8-1.7V24 M24.9,24v11 M33.9,24h-18"/>
<path id="gift-middle" class="st0" d="M34.8,20H15.3c-0.7,0-1.3,0.4-1.3,1v2c0,0.6,0.5,1,1.2,1h19.6c0.7,0,1.2-0.4,1.2-1v-2
	C36,20.4,35.5,20,34.8,20z M25,20v4"/>
</svg>

생성된 메모장을 확인해보면 해당과 같이 코드가 작성되어있는걸 볼 수 있습니다.
해당 코드는 지저분하니 사용하기 편하게 정리하도록 하겠습니다.

<style type="text/css">
  .st0 {
    fill: none;
    stroke: #2C2E42;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
</style>
<svg viewBox="0 0 50 50">
  <path class="st0" d="M25,20c-0.4-1.5-1-2.8-1.8-3.7c-0.8-0.9-1.7-1.3-2.7-1.3c-0.6,0-1.3,0.3-1.7,0.7
	c-0.5,0.5-0.8,1.1-0.8,1.8c0,0.7,0.3,1.3,0.7,1.8c0.5,0.4,1.2,0.7,1.8,0.7H25z M25,20c0.4-1.5,1-2.8,1.8-3.7
	c0.8-0.9,1.8-1.3,2.7-1.3c0.7,0,1.3,0.3,1.8,0.7c0.5,0.5,0.7,1.1,0.7,1.8c0,0.7-0.3,1.3-0.7,1.8c-0.5,0.4-1.1,0.7-1.8,0.7H25z" />
  <path class="st0" d="M33.9,24v8.6c0,0.6-0.3,1.3-0.8,1.7C32.6,34.8,32,35,31.3,35H18.5c-0.7,0-1.3-0.3-1.8-0.7
	c-0.5-0.5-0.8-1.1-0.8-1.7V24 M24.9,24v11 M33.9,24h-18" />
  <path class="st0" d="M34.8,20H15.3c-0.7,0-1.3,0.4-1.3,1v2c0,0.6,0.5,1,1.2,1h19.6c0.7,0,1.2-0.4,1.2-1v-2
	C36,20.4,35.5,20,34.8,20z M25,20v4" />
</svg>

쓸모없는 태그들은 삭제한 후 SVG 내부의 있는 STYLE 시트를 밖으로 빼주었습니다.
“.st0” class는 패스에 통일된 스타일을 적용하기 위해 남겨두며 id 태그는 보통 레이 어명으로 작성되는데 필요 없을 경우 삭제해도 좋습니다.
추가적으로 “.st0” class에 스타일을 추가하여 아이콘을 꾸며주었습니다.

결과

SVG 코드로 이미지를 그리는 방식은 다양한 장점과 활용성을 가지고 있습니다.
그래픽 요소의 편집 가능성, 크기 조정 용이성, 애니메이션 적용 가능성 등을 통해 웹 개발자들은 보다 풍부하고 동적인 그래픽 요소를 웹 페이지와 앱에서 구현할 수 있습니다.
따라서, SVG 코드를 적극적으로 활용하여 다양한 디자인 요소들을 구현하는 것을 권장합니다.

Leave a Comment

%d