svg 사용하기

1. SVG는 무엇?

SVG는 확장 가능한 벡터 이미지를 표현하기 위한 포맷이다.

확장이 가능하다는 것은 이미지를 확대했을 경우 품질이 떨어지지 않는다는 큰 장점을 가지고 있다.

또한 텍스트 편집기에서 수정이 가능하고, CSS / JS로 이미지 변경이 가능하여, 코드로 수정할 수 있기 때문에

다른 이미지 형식보다 강력한 기능을 가지고 있다.

 

추가로 반응형 대응과 사이즈 변화에 지장이 없다는 점, 브라우저 호환성, SVG 속성 사용이 가능하다는 장점으로

일반적으로 많이 사용하는 파일 형식인 jpg, png보다는 프론트 입장에서는 활용도가 높다 :D

 

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

 

 

2. 사용법

웹에서 SVG를 사용하는 방법은 다양하지만, 해상도 독립성 및 파일 용량의 최소화를 위해 SVG를 일반 이미지 형식과 같이 <img>로 참조하거나, css에서 background-image로 참조한다.

 

 

2-1. Img

일반 이미지와 같이 <pictutre>요소에서 SVG를 사용할 수 있다.

	
    <img src="image.svg" onerror="this.onerror=null; this.src='image.png'">

 

 

2-2. background-image

base64 인코딩을 사용하면 css가 길어지지만 파일 관리에 신경쓰지 않아도 된다. (그렇지만 원본은 폴더에 저장해놔야 한다!)

인코딩 방식 사용 시 다운로드하는 동안 나머지 스타일 로딩을 차단시키기 때문에 인터넷 환경이 느린 곳에서는 문제가 생기겠지만...

우리나라 같은 경우 이에 해당하지 않는 경우가 더 많을 것 같아서 해당 방식을 주로 사용하고 있다. (매우 주관적)

	
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='50' cx='50' cy='50' fill='tomato'/%3E%3Ccircle r='41' cx='47' cy='50' fill='orange'/%3E%3Ccircle r='33' cx='48' cy='53' fill='gold'/%3E%3Ccircle r='25' cx='49' cy='51' fill='yellowgreen'/%3E%3Ccircle r='17' cx='52' cy='50' fill='lightseagreen'/%3E%3Ccircle r='9' cx='55' cy='48' fill='teal'/%3E%3C/svg%3E");

 

아래 링크로 들어가서 SVG 태그를 넣으면 background-image로 사용할 수 있게끔 convert해줘서 잘 이용하고 있다 :D

 

https://yoksel.github.io/url-encoder/

URL-encoder for SVG

 

 

* base64 encode 했을 때와 안했을 때의 스타일 로딩 속도 차이 비교 가능할까?

 

 

 

2-3. Inline

SVG 코드를 인라인하면 HTTP 요청은 저장되지만, 이미지는 브라우저에 캐시되지 않는다.

조작이 가장 쉬운 방법이지만, 인라인 SVG 코드를 유지하는 것은 어려울 수 있다.

	
	<svg width="100" height="100">
		<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
	</svg>
    

 

 

 

 

3. 참고

 

https://nykim.work/35

[SVG] SVG 다루기

 

https://svgontheweb.com/ko/

웹에서 SVG 사용하기