SVG란 무엇인지와 HTML CSS 웹페이지에서 SVG 이미지 사용하는 방법

일반적으로 우리가 자주 사용하는 이미지 파일은JPG, PNG, GIF 등과 같이 비트맵 이미지 파일들인데요. 비트맵 이미지는 손쉽게 생성할 수 있다는 장점이 있지만 해상도에 따라 품질이 달라 이미지를 확대하거나 축소할 때 픽셀화 현상이나 텍스트 및 선의 해상도가 안 좋아질 수 있고 사용자가 보기에 좋지 않습니다.

이 경우 벡터 기반 그래픽 파일 형식을 사용하면 확대/축소에 대한 높은 품질과 선명도를 유지하며, 다양한 크기의 화면에서 일관된 모습을 제공할 수 있습니다. 과거에는 Adobe Illustrator에서 사용할 수 있는 AI (Adobe Illustrator Artwork) 파일 형식이 주로 사용되었지만, EPS, CDR 등 다양한 대안이 있어 디자이너들에게 더 많은 선택권이 주어지고 있는데요.

개인적으로 여러 형태의 파일 형식 중 웹 표준 벡터 그래픽 파일 형식으로, 대부분의 웹 브라우저에서 지원하는 SVG를 즐겨 사용하고 있습니다. SVG는 기본적으로 벡터 그래픽 파일 형식으로 크기를 조정해도 선명도가 유지되며, DOM 요소로 작성되어 CSS와 JavaScript를 사용하여 스타일 및 애니메이션을 적용할 수 있습니다.

이 글에서는 SVG 이미지를 생성하고 편집하는 방법부터 시작하여 웹 페이지에 SVG 이미지를 삽입하는 방법등 SVG 이미지를 사용하는 방법들에 대해 알아볼까 합니다.

SVG란

SVG(Scalable Vector Graphics)는 XML 기반의 벡터 그래픽 형식으로, W3C(World Wide Web Consortium)에서 개발 및 표준화되었습니다.

• SVG는 웹 페이지와 애플리케이션에서 벡터 기반의 그래픽을 표현하기 위해 사용됩니다. 이를 통해 해상도에 관계없이 확대 및 축소가 가능하며, 다양한 기기와 화면 크기에 대응할 수 있습니다.
• 이러한 특징으로 인해 SVG는 웹 디자인, 데이터 시각화, 아이콘, 로고 등 다양한 그래픽 요소를 표현하는 데 널리 활용되고 있습니다.
• SVG는 텍스트와 스타일링을 포함하여 그래픽 요소를 표현할 수 있고, JavaScript와 통합되어 상호작용성과 애니메이션을 구현할 수 있습니다.
• 현재 SVG는 웹 표준으로서 지원되며, 다양한 브라우저와 플랫폼에서 호환성을 보장합니다.

벡터 그래픽의 이해

SVG를 설명하기 전 벡터 그래픽에 대해 간단하게 이해할 필요가 있습니다.

• 벡터 그래픽은 수학적 공식과 좌표를 사용하여 이미지를 만드는 방식입니다.
• 이러한 방식 덕분에 벡터 이미지는 확대 또는 축소시에도 이미지 품질이 손상되지 않습니다.
• 벡터 그래픽은 일반적으로 아이콘, 로고, 폰트 및 일러스트레이션과 같이 기하학적 모양을 사용한 단순한 디자인에 적합합니다.

SVG 기본 개념 및 장점

SVG(Scalable Vector Graphics)는 벡터 기반 그래픽을 표현하는 XML 기반의 파일 형식입니다. 웹 상에서 자주 사용되며 다음과 같은 장점을 지닙니다:

• 크기 조절이 용이함: 크기를 변경해도 선명도가 유지됩니다.
• 작은 파일 크기: 대체로 비트맵 포맷에 비해 파일 크기가 작습니다.
• 쉬운 스타일 변경: CSS를 사용하여 색상, 스트로크 두께 등을 쉽게 수정할 수 있습니다.
• 검색 엔진 최적화(SEO)에 유용함: XML 기반의 구조로 인해 검색 엔진이 정보를 파악하기 쉽습니다.

대표적인 사용 사례

SVG는 다음과 같은 기능과 장점을 활용해 웹에서 다양한 이미지와 애니메이션을 손쉽게 구현하면서 성능과 사용자 경험을 개선할 수 있습니다.

• 아이콘: SVG는 다양한 화면 해상도에서도 선명한 이미지를 제공하므로, 웹 사이트 아이콘에 이상적입니다.
• 로고: 회사 로고나 브랜드 로고에 SVG를 사용하면 확장성과 크기 조절이 용이하며, 고품질의 이미지를 유지할 수 있습니다.
• 그래픽 일러스트레이션: 단순한 기하학적 모양을 사용한 그래픽 일러스트레이션에 대해 SVG는 작은 파일 크기와 크기 조절이 가능한 장점을 제공합니다.
• 애니메이션: SMIL과 CSS 애니메이션을 이용하여 SVG 요소에 동적인 움직임과 변화를 추가할 수 있어, 시각적으로 돋보이는 웹 요소를 구현할 수 있습니다.
• 데이터 시각화: 차트와 그래프를 표현할 때, SVG는 너비와 높이를 동적으로 조절하여 웹 페이지에서 데이터 시각화를 효과적으로 표현할 수 있습니다.

SVG 이미지 생성 및 편집

SVG 이미지를 생성하고 편집하기 위해 다양한 도구와 방식을 사용할 수 있습니다. 여기에서는 몇 가지 대표적인 편집 방식을 소개하겠습니다.

SVG 편집 도구

다음과 같은 도구를 이용하면 SVG 이미지와 같은 벡터 기반의 그래픽을 생성하고 수정할 수 있습니다.

• Adobe Illustrator: 프로페셔널 디자이너 사이에서 인기있는 벡터 그래픽 디자인 툴로, 복잡한 벡터 아트워크와 로고를 만들기에 적합합니다.
• Sketch: MacOS에 최적화된 벡터 그래픽 디자인 도구로, 사용자 인터페이스, 아이콘 및 웹 디자인에 널리 사용됩니다.
• Inkscape: 무료 오픈소스 벡터 그래픽 편집기로, Windows, MacOS, Linux에서 사용 가능하며, 로고, 아이콘 및 일러스트 생성에 사용됩니다.
• Figma: 웹 기반의 인터페이스 디자인 도구로, 디자인 팀의 협업이나 실시간 편집에 유용하며, SVG 파일도 생성할 수 있습니다.

코드 편집

SVG 이미지는 XML 기반의 포맷이므로 메모장이나 VSCode와 같은 텍스트 에디터를 사용하여 직접 코드를 작성하여 생성할 수도 있습니다. SVG 코드를 이해하고 작성할 수 있다면, 직접 수정이 가능하며 속성 값을 조정하여 원하는 결과물을 얻을 수 있습니다.

<svg xmlns="http://www.w3.org/2000/svg" width="너비" height="높이" viewBox="x y 너비 높이">
  <!-- SVG 그래픽 요소들 -->
</svg>

<svg> 요소 안에는 SVG 그래픽을 구성하는 다양한 요소들이 포함될 수 있습니다.

• <svg> 요소: SVG 그래픽을 정의하는 최상위 요소입니다. SVG 요소는 XML 네임스페이스를 지정하는 xmlns 속성과 SVG 이미지의 너비(width)와 높이(height)를 지정하는 속성을 포함해야 합니다.
• xmlns 속성: XML 네임스페이스를 지정하는 속성으로, SVG 파일에서는 "http://www.w3.org/2000/svg" 값을 가집니다.
• width와 height 속성: SVG 이미지의 너비와 높이를 지정하는 속성입니다. 픽셀 단위(px) 또는 상대적인 비율로 값을 설정할 수 있습니다.
• viewBox 속성: SVG 이미지의 가시 영역을 정의하는 속성입니다. viewBox 속성 값은 "x y 너비 높이"의 형식으로 지정되며, 이미지의 좌상단 좌표(x, y)와 가로 너비와 세로 높이를 의미합니다.

<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
  <rect x="50" y="50" width="400" height="400" fill="blue" />
   <circle cx="250" cy="250" r="200" fill="red" />
</svg>

이러한 요소들은 도형 요소(예: <rect>, <circle>, <path>)나 텍스트 요소(예: <text>) 등이 될 수 있습니다. 이 요소들을 사용하여 이미지의 모양과 구조를 정의할 수 있습니다.

• width와 height: SVG 이미지의 너비와 높이를 지정하는 속성입니다. 각각 "500"으로 설정되어 있어 SVG 이미지의 가로와 세로 크기가 500픽셀로 설정됩니다.
• <rect> 요소: 직사각형을 그리기 위한 도형 요소입니다. 아래의 속성들을 사용하여 직사각형의 위치, 크기, 색상을 지정합니다.
  • x: 직사각형의 좌상단 모서리의 x좌표를 지정합니다. "50"으로 설정되어 있어 SVG 이미지의 왼쪽에서 50픽셀 떨어진 위치에 직사각형이 그려집니다.
  • y: 직사각형의 좌상단 모서리의 y좌표를 지정합니다. "50"으로 설정되어 있어 SVG 이미지의 위쪽에서 50픽셀 떨어진 위치에 직사각형이 그려집니다.
  • width: 직사각형의 가로 길이를 지정합니다. "400"으로 설정되어 있어 가로 길이가 400픽셀인 큰 직사각형을 그립니다.
  • height: 직사각형의 세로 길이를 지정합니다. "400"으로 설정되어 있어 세로 길이가 400픽셀인 큰 직사각형을 그립니다.
  • fill: 직사각형을 채우는 색상을 지정합니다. "blue"로 설정되어 있어 직사각형이 파란색으로 채워집니다.
• <circle> 요소: 원을 그리기 위한 도형 요소입니다. 아래의 속성들을 사용하여 원의 위치, 반지름, 색상을 지정합니다.
  • cx: 원의 중심의 x좌표를 지정합니다. "250"으로 설정되어 있어 원이 SVG 이미지의 가로 중심에 위치합니다.
  • cy: 원의 중심의 y좌표를 지정합니다. "250"으로 설정되어 있어 원이 SVG 이미지의 세로 중심에 위치합니다.
  • r: 원의 반지름을 지정합니다. "200"으로 설정되어 있어 반지름이 200픽셀인 큰 원을 그립니다.
  • fill: 원을 채우는 색상을 지정합니다. "red"로 설정되어 있어 원이 빨간색으로 채워집니다.

참고: svg 코드에서 요소의 순서는 요소가 화면에 표시되는 순서를 결정합니다. 요소는 위에서 아래로 순서대로 그려지며, 더 나중에 작성된 요소는 더 이전에 작성된 요소 위에 표시됩니다. 위 예시 코드를 보면 먼저 <rect> 요소가 작성되고, 그 다음에 <circle> 요소가 작성됩니다. 따라서 화면에는 먼저 파란색 직사각형이 표시되고, 그 위에 빨간색 원이 표시됩니다.

CSS와의 조합

SVG 이미지에 CSS를 적용할 수 있습니다. CSS를 사용하여 색상, 크기, 위치 등의 스타일을 변경하거나 애니메이션을 추가할 수 있습니다. SVG 요소에 클래스 또는 ID를 지정하여 CSS 선택자를 사용하여 스타일을 적용할 수 있습니다.

<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
  <rect x="50" y="50" width="400" height="400" fill="blue" />
   <circle cx="250" cy="250" r="200" fill="red" />
</svg>

예를 들어 다음과 같은 CSS코드로 앞선 svg 코드에 포함된 도형에 스타일을 적용할 수 있습니다.

.circle {
  fill: red;
  stroke: black;
}

물론 다음과 같이 인라인에서 style 속성을 SVG 요소에 직접 추가하여 스타일을 적용할 수 있습니다.

<svg>
  <circle cx="50" cy="50" r="40" style="fill: red;" />
</svg>

JavaScript와의 상호작용

SVG 이미지는 JavaScript와 상호작용할 수 있습니다. JavaScript를 사용하여 SVG 요소를 동적으로 조작하거나 이벤트를 처리할 수 있습니다. 예를 들어, 특정 요소를 클릭할 때 애니메이션이 실행되도록 만들 수 있습니다.

• SVG 요소 속성 및 스타일 변경

var circle = document.querySelector(".my");
circle.setAttribute("fill", "blue");

• 이벤트 리스너 추가 및 애니메이션 실행

var circle = document.querySelector(".my-circle");
circle.addEventListener("click", function() {
  // 애니메이션 실행 코드
});

위와 같은 방법을 사용하여 상호작용이 가능한 데이터 시각화, 사용자 인터페이스 요소 및 애니메이션을 만드는 데 도움이 됩니다. 이 과정에서 JavaScript 라이브러리와 프레임워크, 예를 들어 D3.js, 그리고 React, Angular 등과 함께 사용하여 보다 고급 기능을 구현할 수 있습니다.

SVG 이미지 삽입하기

SVG 파일은 다양한 형태로 사용할 수 있습니다.

img 요소로 삽입

가장 간단한 방법은 HTML의 <img>요소를 사용하여 SVG 이미지를 웹 페이지에 삽입하는 것입니다. 다음과 같은 형식으로 요소를 사용할 수 있습니다.

<img src="image.svg" alt="SVG Image">

svg 요소로 삽입

SVG 이미지를 보다 유연하게 다루려면 HTML의 <svg> 요소를 사용할 수 있습니다. <svg> 요소는 다음과 같이 사용됩니다.

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
  <!-- SVG 이미지의 내용을 여기에 작성합니다 -->
</svg>

주석처리한 위치인 <svg> 요소 안에 SVG 이미지의 내용을 작성합니다. 이 방법을 사용하면 SVG 요소의 속성을 조정하여 이미지의 크기, 색상, 애니메이션 등을 제어할 수 있습니다.

참고: 워드프레스에서 svg파일을 미디어 도구에 직접 업로드 하기위해서는 별도의 작업이 필요하지만 svg 코드는 html 블럭을 통해서 바로 사용할 수 있습니다.

SVG 애니메이션

본문에서는 깊게 다루지 않지만 SVG 애니메이션을 이용하면 벡터 그래픽 생성 뿐 아니라, 애니메이션과 상호작용을 추가하는 것도 가능합니다. 이 기능을 사용하면, 그래픽 요소가 움직이거나 변하는 것처럼 보이는 동적인 이미지를 만들 수 있습니다. SVG 애니메이션은 주로 다음 두 가지 방법 중 하나를 사용하여 작성됩니다.

• SMIL(Synchronized Multimedia Integration Language): SMIL은 SVG 요소에 애니메이션을 추가하기 위한 XML 기반의 언어입니다. SMIL을 사용하면, 움직임, 색상 변경, 투명도 조절 등 다양한 애니메이션 효과를 SVG 파일 내용에 직접 추가할 수 있습니다. 하지만 SMIL은 일부 브라우저에서 지원되지 않는 경우가 있습니다(예: Microsoft Edge).
• CSS(Cascading Style Sheets) 애니메이션: CSS를 사용하여 웹 페이지의 요소에 애니메이션을 추가하는 것처럼, SVG 요소에도 애니메이션을 적용할 수 있습니다. 이 방법은 브라우저 호환성이 높다는 장점이 있습니다. 애니메이션 및 전환 효과를 사용하여 SVG 요소의 여러 속성을 변화시킬 수 있습니다.

SVG 애니메이션을 통해 동적인 이미지나 움직이는 그래픽을 표현할 수 있습니다. 이러한 애니메이션은 자료 시각화, 웹 페이지 배경의 동적 효과, 로고 및 아이콘 등에 활용됩니다. 필요한 경우 여기 또는 여기에서 다양한 SVG 애니메이션을 확인하실 수 있고, 원하는 작품의 소스 코드를 확인하여 공부할 수 있습니다.

최적화 및 호환성

SVG 이미지를 사용할 때 최적화와 호환성은 중요한 고려 사항으로 SVG 이미지의 최적화와 호환성을 높이기 위한 팁을 추가로 정리합니다.

최적화와 성능

SVG 이미지를 최적화하여 성능을 향상시킬 수 있습니다. 다음은 SVG 이미지의 최적화와 관련된 몇 가지 팁입니다.

• 필요한 최소한의 요소 사용: SVG 이미지에서 불필요한 요소를 제거하거나 간소화하여 파일 크기를 줄일 수 있습니다. 불필요한 경로, 그림자, 필터 등을 최소화하고, 효과적인 압축 방법을 사용하여 파일 크기를 최적화할 수 있습니다.
• viewBox 속성 활용: viewBox 속성을 사용하여 SVG 이미지의 가시 영역을 정의할 수 있습니다. viewBox는 이미지를 렌더링하는 데 필요한 실제 영역을 정의하는데 사용됩니다. 필요 이상으로 큰 viewBox를 설정하면 불필요한 렌더링 작업을 하게 되므로 최적화에 도움이 됩니다. MDN Web Docs 또는 CSS-Tricks에서 기본적인 viewBox 사용방법을 확인할 수 있습니다.
• 외부 스타일시트 사용: SVG 이미지의 스타일을 외부 CSS 파일에 정의하고, <style> 요소를 사용하여 SVG 파일에 포함시키는 대신 외부 스타일시트를 참조하는 방식을 사용하면, SVG 파일의 크기를 줄이고 유지보수성을 향상시킬 수 있습니다.
• 애니메이션 최적화: SVG 이미지에 애니메이션을 추가할 때는 최적화된 애니메이션 기술을 사용해야 합니다. 애니메이션에 필요한 요소만 업데이트하고, 부드러운 전환을 위해 requestAnimationFrame() 함수를 사용하는 등의 최적화 기법을 적용할 수 있습니다.
• Gzip 압축: 서버에서 SVG 파일을 전송하기 전에 Gzip 압축을 사용하여 용량을 줄일 수 있습니다. 이를 통해 전송 시간을 줄이고 웹 페이지 로딩 속도를 향상시킬 수 있습니다. Gzip 압축은 웹 서버에서 설정할 수 있으며, 대부분의 웹 브라우저에서 자동으로 압축을 해제하여 사용자에게 제공합니다.

브라우저 호환성

SVG 이미지는 대부분의 최신 브라우저에서 지원되며, 다양한 플랫폼과 기기에서 잘 작동합니다. 하지만 모든 브라우저에서 완벽한 호환성을 보장하는 것은 아닙니다.

• 브라우저 호환성 확인: SVG 이미지를 사용할 웹 사이트 또는 애플리케이션의 대상 브라우저를 확인하고, 해당 브라우저에서 SVG 이미지가 제대로 지원되는지 확인해야 합니다. Can I use 같은 웹 사이트를 활용하여 브라우저 호환성을 검토할 수 있습니다.
• 대체 옵션 제공: SVG 이미지가 지원되지 않는 브라우저나 기기를 고려하여 대체 옵션을 제공하는 것이 좋습니다. 예를 들어, 태그의 alt 속성에 대체 텍스트를 추가하거나, PNG 또는 JPEG 형식의 이미지를 대체로 사용하는 방법을 고려할 수 있습니다.
• 조건부 스타일 및 스크립트: 브라우저 종류에 따라 달라지는 스타일이나 스크립트를 적용하기 위해 아래와 같은 조건부 주석을 사용할 수 있습니다.

<!--[if IE]>
   <link rel="stylesheet" type="text/css" href="ie-only.css" />
   <script src="ie-only.js"></script>
<![endif]-->

• 적절한 대체 이미지 제공: 호환성 문제로 인해 SVG 이미지가 정상적으로 표시되지 않는 경우, 적절한 비트맵 형식의 대체 이미지(PNG, JPEG 등)를 제공해야 합니다. 이를 통해 모든 사용자가 웹 사이트를 확인할 수 있습니다.

이러한 내용을 체크해 브라우저 호환성 문제를 최소화하고 웹 사이트의 사용자 경험을 최적화할 수 있습니다. 발생할 수 있는 문제를 사전에 대비하고, 가능한 모든 사용자가 원활한 웹 사이트 이용이 가능하도록 하는 것이 중요합니다.

마치며

이상으로 SVG 이미지를 사용하는 방법에 대해서 정리해 보았습니다. SVG는 일반적으로 래스터 이미지 파일 형식보다 더 많은 계산을 필요로 합니다.

따라서 복잡한 이미지에 대한 처리나 렌더링 속도가 상대적으로 느릴 수 있어 사진과 같이 높은 해상도 및 색상 수를 가진 고차원 이미지의 경우, SVG는 비효율적이며 파일 크기도 크게 됩니다. 이런 경우, PNG 또는 JPEG와 같은 비트맵 형식이 더 적합합니다.

그래도 아이콘, 로고, 그래픽 및 웹 디자인의 요소 등을 자주 다룬다면 확장성이 뛰어나고 쉽게 조작할 수 있는 벡터 기반의 이미지 형식인 SVG를 활용해 보시길 바랍니다.

관련 글

• 워드프레스에서 SVG 적용 및 사용하는 방법들
• 워드프레스 구텐베르크 에디터 서식 사용하기 재활용 가능한 블록 사용법
• 한컴오피스 한글에 사진 이미지 추가하기
• 한컴오피스 '한글' 표 안에 갇힌 커서 밖으로 꺼내는 방법