HTML & CSS - SVG 다루기(삽입 방법)

서론

백터 이미지의 확장자명인 SVG파일을  웹 서비스상에서 많이 볼 수 있다.

실제로 서비스를 개발하는 과정에서도 이 SVG 파일을 이용하는 경우가 많다.

본문에서는 SVG에 대한 간략한 개념을 이해하고, 웹 개발을 사용하는데 어떻게 사용할 수 있는지 알아보자.

 

백터 이미지? SVG?

비트맵 계열의 이미지들을 각각의 픽셀에 대한 정보를 저장한 이미지 데이터입니다.

하지만, 백터 이미지는 수학적 함수를 이용해 이미지를 표현하는 방식을 말합니다.

 

수학적으로 표현한 이미지가 백터 이미지는 개념적인 종류를 구분하는 것입니다.

여기에 어떠한 규칙으로, 어떠한 표기법으로 이미지를 수학적인 표현을 할 것인가 또는 백터 이미지를 표현하는 규칙을 정한 형태가 바로 SVG입니다.

 

정리하자면, 백터 이미지는 개념이고 이를 구현한 것이 SVG(Scalable Vector Graphics)입니다.

 

백터 이미지의 특징

수학적으로 이미지를 표현하는 개념을 예를 들어보도록 합시다.

흔히 수학을 공부하면 배우는 좌표평면에 그래프를 그리는 것과 같습니다.

 

좌표평면상에 (0,0)에서 부터 (5,5)까지 직선을 그려라

 

이처럼 백터 이미지는 수학적인 형태로 그림을 표현하고 있습니다.

때문에 픽셀의 정보를 저장하는 비트맵 계열과는 달리 크기를 확대해도 깨지는 현상이 발생하지 않습니다.

또한 픽셀 하나하나의 정보를 저장하는 것보다 효율적일 수 있습니다.(물론 너무 복잡한 그림을 표현하려면 비 효율적일 수 있습니다.)

 

이런 내용들을 정리하자면 다음과 같습니다.

• 수학적으로 이미지를 표현해서 깨지는 현상이 없다.
• 간단한 이미지라면 비트맵보다 효율적으로 저장할 수 있다 (용량이 적다.)
• 수학적 계산을 통한 그림을 표현한다. (연산이 필요하다.)
• 따라서, 너무 복잡한 그림을 백터로 표현한다면 비트맵보다 비 효율적일 수 있다.

물론 복잡한 그림을 효율적인 백터 이미지를 구현하기 위해 최척화 하는 알고리즘, 소프트웨어가 많이 개발되고 있습니다.

 

HTML에서 SVG 사용하기

그럼 위에서 설명한 것처럼 장점이 많은 효율적인 백터 이미지를 구현한 SVG를 HTML 또는 웹서비스에서 사용하는 방법을 알아봅시다.

 

예시를 위해 flaticon의 아이콘 svg파일을 가지고 있다고 가정해 보도록 하겠습니다.

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" id="Outline" viewBox="0 0 24 24" width="512" height="512">
	<path d="M23.707,22.293l-5.969-5.969a10.016,10.016,0,1,0-1.414,1.414l5.969,5.969a1,1,0,0,0,1.414-1.414ZM10,18a8,8,0,1,1,8-8A8.009,8.009,0,0,1,10,18Z"/>
</svg>

여러 가지 방법 중 본문에서는 몇 가지 방법에 대해서 살펴보도록 하겠습니다.

 

SVG파일 구조에 대해서는 다른 포스트에서 좀 더 자세히 다루도록 하겠습니다.

 

1. img 태그 사용하기

만약 위와 같은 xml데이터를 가진 search.svg파일이 있다면 img태그를 사용하는 것처럼 사용할 수 있습니다.

<img src='search.svg' height='100' width='75'>

 

2. Background-image속성 사용하기

CSS를 통해 Background-image속성을 통해서 사용 가능합니다.

#logo{
	background-image: url(bblogo.svg);
}

 

3. Inline 삽입하기

SVG의 데이터를 직접 HTML에 삽입하여 사용 가능합니다.

<div>
    <?xml version="1.0" encoding="UTF-8"?>
    <svg xmlns="http://www.w3.org/2000/svg" id="Outline" viewBox="0 0 24 24" width="512" height="512">
        <path d="M23.707,22.293l-5.969-5.969a10.016,10.016,0,1,0-1.414,1.414l5.969,5.969a1,1,0,0,0,1.414-1.414ZM10,18a8,8,0,1,1,8-8A8.009,8.009,0,0,1,10,18Z"/>
    </svg>
</div>

 

4. symbol형태로 삽입하기

3번의 방법과 거의 유사하지만, 3번의 경우 HTML 문서 자체에 삽입된 SVG는 유지보수 측면에서 효율성이 떨어지는 것을 알 수 있다. 따라서 symbol형태로 SVG의 데이터를 모아 두고, 링크하는 방식이 있다.

<div >
	<label>
			<svg>
				<use xlink:href="#icon_search" class="icon"/>
			</svg>
	</label>
</div>
<!-- SVG -->
<!-- icon -->
<svg xmlns="http://www.w3.org/2000/svg">
    <symbol xmlns="http://www.w3.org/2000/svg" id="icon_search" viewBox="0 0 24 24">
        <path d="M23.707,22.293l-5.969-5.969a10.016,10.016,0,1,0-1.414,1.414l5.969,5.969a1,1,0,0,0,1.414-1.414ZM10,18a8,8,0,1,1,8-8A8.009,8.009,0,0,1,10,18Z"/>
    </symbol>
</svg>