SVG란 무엇이고, 어떤 장단점이 있을까?

Studying/HTML | CSS 2023. 3. 7. 13:15

SVG(Scalable Vector Graphics)

2차원 그래픽을 표현하기 위해 만들어진 XML 파일 형식의 마크업 언어.

SVG는 W3C로부터 만들어진 웹 친화적인 벡터 파일 포맷입니다.

이미지 파일 포맷이라 하면 일반적으로 GIF, PNG, JPG를 떠올릴 수 있습니다.

이런 확장자들은 이미지를 디지털 공간에서 표현하기 위해 사용하며 저마다 용량이나 화질의 차이, 색상 표현의 다양성, 압축 방식, 호환성 등 각기 다른 특성을 가지고 있습니다.

SVG는 그중에서도 이미지 표현 방식이 남다른 특이한 포맷입니다.

SVG 파일의 장단점

JPEG와 같은 픽셀 기반의 래스터 파일과 달리, 벡터 파일은 그리드 위의 점과 선을 기반으로 하는 수학 공식을 통해 이미지를 저장합니다.

따라서 SVG와 같은 벡터 파일은 품질을 그대로 유지하면서 크기를 마음대로 조정할 수 있게 되며,

로고와 복잡한 온라인 그래픽에 아주 적합한 파일 형식입니다.

그외 장점은 아래와 같습니다.

줌을 하거나 크기를 변경해도 SVG 이미지의 픽셀이 깨지지 않고 화질이 유지된다.
용량이 PNG, GIF보다 작다.
어도비 일러스트레이터 등의 벡터 드로잉 프로그램이나 메모장, 문서 편집기에서 SVG 이미지를 작성하고 수정할 수 있다.
중첩된 경로, 알파 마스크, 다양한 그래픽 명령어, 하이퍼링크 등의 기능을 지원한다
SVG 파일은 텍스트를 디자인이 아닌 텍스트 그대로 처리하기 때문에 스크린 리더가 SVG 이미지에 포함된 모든 단어를 스캔할 수 있습니다. 그래서 웹 페이지를 읽어야 할 때 매우 유용합니다. 검색 엔진은 SVG 이미지 텍스트를 읽고 색인을 달 수도 있습니다.

동시에 아래와 같은 단점도 보유하고 있습니다.

SVG 파일은 로고, 일러스트레이션, 차트 등 웹 그래픽에 적합합니다. 그러나 픽셀이 부족하므로 고품질 디지털 사진을 표현하기는 어렵습니다. 디테일이 풍부한 사진에는 JPEG 파일이 더 좋습니다.
최신 브라우저만 SVG 이미지를 지원할 수 있으므로 ~~Internet Explorer 8과~~ 이전 브라우저에서는 SVG 파일을 사용하기가 어려울 수 있습니다.
SVG 이미지에 포함된 코드는 SVG 파일 포맷을 처음 사용하는 경우 이해하기 힘들 수 있습니다.

SVG 파일의 용도

웹 사이트 아이콘과 로고

디자이너는 버튼과 같은 웹 사이트 아이콘과 기업 로고를 표시하는 데 SVG를 사용합니다.

SVG 파일은 품질을 저하시키지 않고 이미지를 확대하거나 축소할 수 있으므로 다양한 위치에 각기 다른 크기로 표현되어야 하는 그래픽에 아주 적합합니다.

인포그래픽 및 일러스트레이션

SVG 파일은 XML을 사용하므로 Google과 같은 검색 엔진이 텍스트가 많은 차트와 그래프를 읽을 수 있습니다. 따라서 검색 엔진 최적화에 도움이 됩니다.

Google이 SVG 내의 키워드를 감지하여 웹 페이지의 검색 순위를 높일 수 있기 때문입니다.

또한 SVG는 애니메이션을 지원하므로 더욱 흥미로운 웹 페이지를 만들 수 있습니다.

래스터 vs 벡터

SVG와 다른 이미지 파일 형식의 가장 근본적인 차이점은 바로 래스터 유형이냐, 벡터 유형이냐입니다.

https://m.post.naver.com/viewer/postView.naver?volumeNo=27689642&memberNo=43589165

래스터 파일 정의

래스터 파일은 픽셀로 구성된 이미지입니다.

작은 컬러 사각형인 픽셀이 무수히 많이 모여 사진처럼 세부 정보가 많은 이미지가 만들어집니다.

픽셀이 많을수록 품질이 좋으며, 적을수록 품질이 낮아집니다. 이미지의 픽셀 수는 파일 유형(예: JPEG, GIF, PNG)에 따라 다릅니다.

래스터 파일 유형에 대해 더 알아보기

벡터 파일 정의

벡터 파일은 그리드에 점을 설정하는 수학 공식과 선, 곡선을 사용하여 이미지를 만듭니다.

벡터 파일에는 픽셀이 없습니다.

벡터 파일의 수학 공식이 도형, 테두리, 칠 색상을 이용하여 이미지를 만듭니다.

수학 공식에 따라 크기를 변경할 수 있으므로 벡터 이미지를 확대하거나 축소해도 이미지 품질에는 영향을 주지 않습니다.

벡터 파일 유형에 대해 더 알아보기

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

CSS와 HTML 내에서 SVG 이미지를 사용하는 방법은 아주 다양합니다.

일단 여섯 가지 종류에 대해 정리해보겠습니다.

1. IMG 태그

SVG 이미지를 삽입하는 가장 간단한 방법입니다.

HTML 문서에 <img> 태그를 추가하고 아래 코드처럼 src 속성이 SVG 이미지를 참조하도록 합니다.

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

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

위 예시에선 SVG 이미지 크기를 수정하지 않았으므로 원본 크기로 간주합니다.

원본 크기를 변경하고 싶다면, 아래 예시처럼 CSS로 width와 height를 정해주거나 직접 원본의 width와 height를 변경합니다.

img {
  height: 300px;
  width: 300px;
}

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

2. Background-image

<img> 태그를 이용해 SVG를 추가하는 것과 비슷하지만, 이번에는 HTML 대신 CSS를 사용합니다.

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

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

하지만 base64 인코딩을 하면 다운로드하는 동안 나머지 스타일 로딩을 차단시키기 때문에 사용하지 않는 편이 좋습니다. 이 메서드는 조작 기능을 제한합니다.

3. Iframe

대부분의 작업을 구현할 수 있지만, 더 발전적인 기능을 사용하고자 한다면 가장 좋은 방법은 아닙니다.

<iframe src="bblogo.svg">Your browser does not support iframes</iframe>

다만 <iframe>은 유지보수가 어렵고, 검색 엔진 최적화(Search Engine Optimization; SEO)에 안 좋습니다.

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

4. Embed

<embed type="image/svg+xml" src="bblogo.svg" />

이 방법 역시 제한적입니다.

MDN에 따르면, 대부분의 모던 브라우저들은 브라우저 플러그인에 대한 지원을 중단하거나 삭제해왔습니다.

즉, 사이트가 일반 사용자의 브라우저에서 작동되길 바란다면, <embed>에 기대는 것은 일반적으로 현명하지 않습니다.

5. Object

HTML <object> 요소를 이용해 웹페이지에 SVG 이미지를 추가할 수 있습니다.

HTML문서 내에 직접 내장(inline)시키지 않고 SVG를 조작하는 경우에 가장 좋은 방법입니다.

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

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

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

5. Inline

<body>
    <svg
      id="be452e83-5912-4855-80f8-a79ecab91838"
      data-name="Layer 1"
      xmlns="http://www.w3.org/2000/svg"
      width="915.11162"
      height="600.53015"
      viewBox="0 0 915.11162 600.53015"
    >
</body>

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

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

하지만 SVG 코드를 인라인하면 HTTP 요청은 저장되지만, 이미지는 브라우저에 캐시되지 않습니다. 조작이 가장 쉬운 방법이지만, 인라인 SVG 코드를 유지하는 것은 어려울 수 있습니다.

CSS 조작에 대한 추가적인 부분…

SVG의 가장 큰 장점은 CSS 사용해 스타일을 변경할 수 있다는 것입니다. 일부 페이지에서 파란색 아이콘을 주황색으로 바꾸고 싶을 때, 새 파란색 아이콘을 다시 만들지 않아도 됩니다.

SVG 스타일 변경 방법은 두 가지로, SVG 코드 내부에서 변경하는 방법(inline style)과 외부 스타일 시트(external style)로 변경하는 방법이 있습니다.

인라인 스타일에서는 <style> 태그와 <![CDATA [...]]>태그로 스타일을 묶습니다.

간혹 XML 파서가 특정 문자(예 : >)와 충돌 할 수 있기 때문에 이 방법을 사용하는 것이 가장 좋습니다. 현재 특별한 문자가 없는 경우에도 나중에 CDATA를 사용하여 추가 코드를 작성할 수 있습니다.

인라인 스타일에서는 대부분 모든 것이 구현 가능합니다.

그러나 <img> 및 background-image는 CSS3 애니메이션을 지원하지 않습니다.(애니메이션 섹션 참고) background-image는 인라인 미디어 쿼리를 지원하지 않습니다. (자세한 내용은 미디어 쿼리 섹션 참고)

인라인 스타일

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 65">
  <style type="text/css">
    <![CDATA[
    .firstb { fill: yellow; }
    .secondb { fill: red; }
    ]]>
  </style>
  <path class="secondb" d="M42 27v-20c0-3.7-3.3-7-7-7s-7 3.3-7 7v21l12 15-7 15.7c14.5 13.9 35 2.8 35-13.7 0-13.3-13.4-21.8-26-18zm6 25c-3.9 0-7-3.1-7-7s3.1-7 7-7 7 3.1 7 7-3.1 7-7 7z"/>
  <path class="firstb" d="M14 27v-20c0-3.7-3.3-7-7-7s-7 3.3-7 7v41c0 8.2 9.2 17 20 17s20-9.2 20-20c0-13.3-13.4-21.8-26-18zm6 25c-3.9 0-7-3.1-7-7s3.1-7 7-7 7 3.1 7 7-3.1 7-7 7z"/>
</svg>

작업 및 유지 관리 편이를 위해 외부 스타일을 사용한다면, <img> 또는 background-image를 사용하면 안됩니다.

참고사항 : SVG는 부모 클래스가 무엇인지 (예 : <object>) 알 수 없으므로 스타일을 사용하면 안됩니다. 인라인 SVG에서는 불필요하기 때문에 더 쉽게 작업할 수 있다는 장점이 있습니다.

외부 스타일

// <svg>태그 전에 선언
<?xml-stylesheet type="text/css" href="style.css"?>

// style.css 파일 내
.firstb { fill: yellow; }
.secondb { fill: red; }

SVG 기본 도형 그리기

기본적인 도형은 HTML 요소와 CSS를 사용해 그릴 수 있지만, 모양이 복잡해질 수록 어려워집니다.

물론 복잡한 그래픽은 Adobe Illustrator와 같은 벡터 소프트웨어를 사용하여 디자이너가 그리지만, 간단한 도형은 SVG 코드만으로도 그릴 수 있습니다.

사각형(ractangle)

<rect> 요소는 사각형을 그립니다. 너비(width), 높이(height), 색상(fill) 등을 속성으로 설정할 수 있습니다.

<svg>
<rect width="480" height="240" fill="#3d87fb" />
</svg>

뷰포트 내부 특정 지점으로 위치(x, y) 이동을 할 수 있습니다.

<svg>
  <rect width="480" height="240" fill="#3d87fb" x="20" y="40" />
</svg>

원(circle)

<circle> 요소는 원을 그립니다. 원의 중심(rx, ry), 반지름(r), 색상(fill) 등을 속성으로 설정할 수 있습니다.

<svg>
  <circle cx="200" cy="200" r="50" fill="#3e295e" />
</svg>

타원(Ellipse)

<ellipse> 요소는 타원을 그립니다. 타원을 그리기 위한 반지름(rx, ry) 속성을 설정할 수 있습니다.

<svg>
  <ellipse 
    cx="200" cy="200" rx="50" ry="100"
    fill="#dd3742" stroke="#b13138" stroke-width="8" />
</svg>

직선(Line)

<line> 요소는 직선을 그립니다. 선의 시작점(x1, y1)과 끝점(x2, y2) 속성을 설정할 수 있습니다.

<svg>
  <line x1="440" y1="40" x2="120" y2="200" stroke-width="5" stroke="#26b2a2" />
</svg>

다각형(Polygon)

<polygon> 요소는 3개 이상의 점들이 연결된 다각형을 그립니다.

<svg>
  <polygon 
    points="50,5 100,5 125,30 125,80 100,105 50,105 25,80 25,30" 
    fill="#4b6eec" />
</svg>

Reference

저작자표시 비영리 변경금지

'Studying > HTML | CSS' 카테고리의 다른 글

끝부분이 늘어나는 효과 (0)	2023.05.09
계산기 Mockup (0)	2023.03.07
Cherry Master (0)	2022.08.01
Memory Game (0)	2022.07.30
Drag and Drop (0)	2022.07.30

ABOUT ME

i'm done i'm done