svg란 / svg 사용 방법

svg

[svg란]

- svg란 확장 가능한 벡터 이미지를 표현하기 위한 포맷으로 확장이 가능하다는 것은 이미지를 확대했 을 경우 품질이 떨어지지 않는다는 큰 장점을 가지고 있다.

텍스트 편집기에서 편집이 가능하고, CSS/JS로 수정할 수 있기 때문에 다른 이미지 현식보다 강력한 기능을 가지고 있다.

 

추가로 반응형 대응과 사이즈 변화에 지장이 없다는 점, 부라우저 호환성, SVG속성 사용이 가능하나든 장점으로 일반적으로 많이 사용하는 파일 형식인 jpg, png보다는 프론트 입장에서는 활용도가 놓으며 다만, IE8에서는 지원이 되지 않는다.

 * IE8 이후 버전에서 지원됨

 

[사용법]

- 해상도 독립성 및 파일 용량의 최소화를 위해 SVG 일반 이미지 형식과 같이 <img> 태그에 참조

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

 

- css 에서 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해준다.

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

URL-encoder for SVG

 

- inline

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

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

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