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

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

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

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

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

아래 설명은 iboxcomein.com 에서 테스트 및 검증 후 작성 된 내용이지만 이것이 본문의 내용의 정확성이나 신뢰성에 대해 보증을 하는 것은 아니니 단순 하게 참고용으로 확인바랍니다.

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란 무엇인지와 HTML CSS 웹페이지에서 SVG 이미지 사용하는 방법

SVG란

벡터 그래픽의 이해

SVG 기본 개념 및 장점

대표적인 사용 사례

SVG 이미지 생성 및 편집

SVG 편집 도구

코드 편집

CSS와의 조합

JavaScript와의 상호작용

SVG 이미지 삽입하기

`img` 요소로 삽입

`svg` 요소로 삽입

SVG 애니메이션

최적화 및 호환성

최적화와 성능

브라우저 호환성

마치며

관련 글

Leave a Comment 응답 취소

SVG란

벡터 그래픽의 이해

SVG 기본 개념 및 장점

대표적인 사용 사례

SVG 이미지 생성 및 편집

SVG 편집 도구

코드 편집

CSS와의 조합

JavaScript와의 상호작용

SVG 이미지 삽입하기

img 요소로 삽입

svg 요소로 삽입

SVG 애니메이션

최적화 및 호환성

최적화와 성능

브라우저 호환성

마치며

관련 글

Leave a Comment 응답 취소

`img` 요소로 삽입

`svg` 요소로 삽입