Original article: How to Use SVG Images in CSS and HTML – A Tutorial for Beginners

SVG는 확장할 수 있는 벡터 그래픽(Scalable Vector Graphics)이라고 합니다. 확장 가능 마크업 언어(Extensible Markup Language; XML)로 쓰인 벡터 기반의 독특한 유형의 이미지 포맷입니다.

이번 튜토리얼에서는 SVG 이미지의 장점으로는 어떤 것들이 있는지, 어떻게 이를 CSS와 HTML 안에서 사용할 수 있는지 설명하려고 합니다.

왜 SVG 이미지를 써야 할까요?

SVG 이미지를 사용해야 하는 이유야 많지만, 몇 가지를 꼽아보자면,

  • 줌을 하거나 크기를 변경할 때 SVG 이미지의 질은 떨어지지 않습니다.
  • IDE나 텍스트 편집기에서 SVG 이미지를 작성하고 수정할 수 있습니다.
  • SVG 이미지는 이해하기 쉬우며 애니메이션이 가능합니다.
  • 파일 크기는 작지만, 확장이 매우 용이합니다.
  • SVG 이미지를 검색하고 색인화할 수 있으며 스크립트 처리나 압축도 가능합니다.

이제 정말로 SVG 이미지를 어떻게 사용할 수 있는지 알아봅시다.

해당 튜토리얼에서 사용된 SVG 이미지를 다운로드하는 방법

이 튜토리얼에서 사용된 SVG 이미지를 사용하고 싶다면, 아래 단계(와 도표)를 참고해 다운로드받아주세요.

  • unDraw에 접속합니다.
  • 노란색으로 배경색을 변경해보세요.
  • 검색창에서 happy라는 단어로 검색해보세요.
unDraw 페이지에 대한 설명. 상단 오른쪽에 색상을 바꾸는 버튼이 있다. 가운데 검색창이 있으며 아래 SVG 이미지 목록이 뜬다.
unDraw 페이지에 대한 설명. 상단 오른쪽에 색상을 바꾸는 버튼이 있다. 가운데 검색창이 있으며 아래 SVG 이미지 목록이 뜬다.
  • Happy news라는 이름의 이미지를 클릭하세요.
  • 팝업창에서 Download SVG to your projects라고 쓰인 버튼을 클릭하세요.
Happy news라는 이름의 SVG 일러스트와 이를 다운로드할 수 있는 버튼이 오른쪽에 위치해 있다.
Happy news라는 이름의 SVG 일러스트와 이를 다운로드할 수 있는 버튼이 오른쪽에 위치해 있다.

올바르게 위 단계를 진행했다면, SVG 이미지는 이제 컴퓨터에 있을 것입니다.

크롬 파일 다운로드 창
크롬 파일 다운로드 창

이제 당신이 좋아하는 IDE나 텍스트 편집기에서 다운로드한 SVG 이미지를 열어 봅니다. happy.svg나 마음에 드는 이름으로 파일명을 변경하세요.

CSS와 HTML에서 SVG 이미지를 사용하는 방법

CSS와 HTML 내에서 SVG 이미지를 사용하는 방법은 아주 다양합니다. 이번 튜토리얼에서는 여섯 가지 종류에 대해 알아봅시다.

1. <img>로 SVG를 사용하기

이 방법은 웹페이지에 SVG 이미지를 삽입하는 가장 간단한 방법입니다. 이렇게 쓰려면 HTML 문서에 <img> 태그를 추가하고 아래처럼 src 속성이 SVG 이미지를 참조하도록 합니다:


<img src="happy.svg" alt="My Happy SVG" />

unDraw에서 SVG를 다운로드했고 happy.svg라고 파일명을 바꿨다고 한다면, 이제 여러분의 HTML 문서로 위 코드 예시를 추가해보세요.

모두 제대로 완료했다면, 여러분의 웹페이지는 아래 예시와 똑같아 보일 것입니다. 👀

크기를 지정하지 않은 경우 <img> 태그를 통해 SVG 이미지를 추가한다면 원본 SVG 파일 크기로 상정됩니다.

예를 들어, 위 예시에선 SVG 이미지 크기를 수정하지 않았으므로 원본 크기로 간주했습니다. (가로 915.11162 px과 세로 600.53015 px.)

노트: 원본 크기를 변경하고 싶다면, 아래 예시에서처럼 CSS를 이용해 width와 height를 정해줍니다. 직접 원본의 width와 height를 변경할 수도 있습니다.

<img> 태그를 통해서 추가된 SVG 이미지의 크기를 변경할 수 있게 되었지만, SVG 이미지에 주요 스타일을 적용하려고 한다면 여전히 많은 제약이 있습니다.

2. background-image로 SVG를 사용하기

이 방법은 HTML 문서에 <img> 태그를 이용해 SVG를 추가하는 것과 비슷합니다. 하지만, 이번에는 아래 코드 예시에서처럼 HTML 대신 CSS를 사용해 진행해보겠습니다.

body {
	background-image: url(happy.svg);
}

CSS 백그라운드 이미지로 SVG를 사용한다면, <img> 태그를 사용하는 것과 비슷하게 제약 사항이 있지만, 좀 더 여러분의 입맛에 맞출 수 있는 여지가 있습니다.

아래의 예시를 살펴보고, CSS를 이용해 자유롭게 수정해보세요.

3. 인라인(inline) SVG 이미지 사용하는 방법

SVG 이미지는 <svg></svg> 태그로 직접 HTML 문서에 삽입해 작성할 수도 있습니다.

VS code나 선호하는 IDE에서 SVG 이미지를 열고, 코드를 복사해 HTML 문서 <body> 요소 안에 붙여 넣으세요.

<body>
	// Paste the SVG code here. 
</body>

제대로 다 작성했다면, 웹페이지는 아래 예시처럼 보일 것입니다.

HTML 문서 내 인라인 SVG를 사용하면 HTTP 요청에 따라 제공되므로 로드되는 시간이 절약됩니다.

해당 방법을 사용하면 <img> 태그나 background-image를 사용하는 것과 다르게 더 다양하게 커스터마이징 할 수 있습니다.

4. <object>로 SVG 사용하는 방법

아래 코드 문법을 사용하면, HTML <object> 요소를 이용해 웹페이지에 SVG 이미지를 추가할 수 있습니다.


<object data="happy.svg" width="300" height="300"></object>

사용하려고 하는 대상인 리소스의 URL을 data라는 속성을 이용해 지정 가능한데, 우리의 경우는 이것이 SVG 이미지가 됩니다.

SVG 이미지의 크기를 지정하기 위해 width와 height를 사용할 수 있어요.

마찬가지로, 더 탐구해보고 싶다면 아래 예시를 참고해보세요 😃

5. <iframe>으로 SVG 사용하는 방법

권장하지는 않는 방식이지만, 아래 예시에서 보이는 것처럼 <iframe>을 이용해 SVG 이미지를 추가할 수도 있습니다.

다만 <iframe>은 유지보수가 어렵고, 검색 엔진 최적화(Search Engine Optimization; SEO)에 안 좋다는 것을 명심하세요.

또한, <iframe> 포맷에 SVG 이미지가 삽입된다면 확장 가능하지 않으므로, 확장할 수 있는 벡터 그래픽이라는 이름에서 *확장할 수 있는(Scalable)*이라는 목적을 무색하게 합니다.

6. <embed>로 SVG 사용하는 방법

HTML <embed> 요소는 HTML과 CSS에서 SVG 이미지를 사용하는 또 다른 방법으로, 이런 문법을 사용합니다: <embed src="happy.svg" />.

하지만, 이 방법 역시 제한적이라는 사실을 알아둡시다. MDN에 따르면, 대부분의 모던 브라우저들은 브라우저 플러그인에 대한 지원을 중단하거나 삭제해왔습니다. 즉, 여러분의 사이트가 일반 사용자의 브라우저에서 작동되길 바란다면, <embed>에 기대는 것은 일반적으로 현명하지는 않다는 것입니다.

아래는 HTML <embed> 요소를 사용해 SVG 이미지를 추가한 예시입니다.

결론

이 튜토리얼을 통해 CSS와 HTML에 SVG를 사용하는 다양한 방법을 배웠길 바랍니다. 이 글이 웹사이트에 SVG 이미지를 추가하고자 할 때 맞는 방법을 선택할 수 있도록 도움이 되었으면 좋겠습니다.

질문이 있다면, 제게 트위터를 통해 메시지를 보내주세요. 기쁜 마음으로 하나하나 답변해드리겠습니다.