4. SVG (Scalable Vector Graphics)

SVG란?

SVG는 수학적 기반으로하는 벡터 방식의 웹이미지를 표현하는 XML형식의 마크업 언어이다.

PNG가 pixel단위로 구성되는 래스터이미지인 반면 SVG는 점, 직선, 곡선과 같은 형태로 구성되는 벡터이미지이다.

SVG의 장점 1

HTML, CSS, JavaScript와 함께 동작할 수 있다.

이는 이미지를 에디터에서 직접 수정 및 확인 할 수 있다는 뜻이다.

SVG의 장점2

벡터이미지 기반이다보니 깨지지 않는다.

Hover 이미지에 사용하면 깨지지않는 이펙트로 사용가능. (주로 아이콘)

SVG의 단점1

IE8 이하에서 지원되지 않는다.

SVG의 단점2

사용하는데 수학적 계산을 요구하며, 상황에 따라 지나치게 복잡해지거나 크기가 커질 수 있다.

따라서 SVG 는 로고 또는 아이콘같은 단순화된 이미지에 많이 사용된다.

사용법

1. img

<img src="bblogo.svg" alt="Breaking Borders Logo" height="65" width="68">

<img>, <picture>과 같은 태그에 사용. 이 메서드는 조작기능을 사용불가.

2. inline <svg>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 65">
  <path fill="#1A374D" 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 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>

HTTP요청은 저장되지만 이미지는 브라우저에 캐시되지않음.

조작하기 가장 쉬운방식이지만 SVG코드를 유지하는것이 어려울 수 있음

3. background-image

base64 인코딩시 다운로드 하는동안 나머지 스타일 로딩을 차단하는 문제가 생김

메서드 조작불가. 현재 네이버 메인로고에서 사용되는 방법

4. <object> ( SVG 조작시 가장 추천)

<object type="image/svg+xml" data="bblogo.svg">현재 브라우저는 iframe을 지원하지 않습니다.</object>

HTML문서 내에 inline시키지않고 SVG 조작하기 좋은 방식

	<object>	<svg>	<img>	background-image
css 조작	ㅇ	ㅇ	일부 inline	일부 inline
js 조작	ㅇ	ㅇ	x	x
svg 조작	ㅇ	ㅇ	ㅇ	ㅇ
svg 애니메이션	ㅇ	ㅇ	x	x

SVGO 라이브러리를 사용하여 불필요한 용량을 줄일 수 있다

CSS 조작

인라인 스타일에서 <style>태그와 <![CDATA[ css구문 ]]> 태그로 대부분의 CSS조작이 가능하다.

(단, 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를 사용하면 안된다.