All about {Web}

전체 글 +164

SVG :

SVG는 ‘Scalable Vector Graphics’의 약자로 웹 상에서 2차원 벡터 그래픽을 표현하기 위한 XML파일 형식의 마크업 언어입니다. 별도의 플러그 인이나 뷰어 없이도 그래프, 차트와 같은 작고 간단한 그래픽 요소부터 애니메이션화된 일러스트와 같이 크고 복잡한 것에 이르기까지 이미지의 왜곡이나 손상 없이 고화질의 그래픽 효과를 웹 상에서 구현할 수 있습니다.

벡터 그래픽 구현방식은 Adobe의 Flash와 유사하지만 SVG가 갖는 가장 큰 특징은 독자적인 기술에만 의존하는 Flash와는 달리 W3C의 권고안을 따르는 개방형 표준 파일로 CSS, DOM 및 SMIL등과 같은 다른 W3C 표준에서 작동할 수 있도록 설계되어 있다는 점입니다. 즉, 어떠한 문서편집기로도 생성할 수 있고 편집이 가능합니다.

또한 래스터 이미지 포맷(JPEG와 GIF 등)과 비교했을 시, 다양한 해상도에서 고품질로 출력할 수 있으며, 이미지 품질의 저하 없이 확대 및 축소할 수 있습니다. 1600만 이상의 색상 값을 지원하며 마크업 언어이기에 색인을 달 수 있고 명령어를 쓸 수 있으며, 구글과 같은 검색엔진에서 검색이 가능합니다.

SVG 홈페이지 삽입 방법 :

<embed src="logo.svg" type="image/svg+xml" width="77" height="77" />
or 
<object type="image/svg+xml" data="logo.svg">현재 브라우저는 SVG를 지원하지 않습니다.</object>
or
<iframe src="logo.svg">이 브라우저는 아이프레임을 지원하지 않습니다.</iframe>
or
<img src="logo.svg" alt="로고" height="77" width="77">

SVG 브라우저별 지원 현황 :

 ( http://www.caniuse.com/ )


IE 9+
Chrome 31+
Firefox 31+
Safari 7
Opera 29+
iOS Safari 7.1+
Opera Mini 8
Android Browser 4.4+
Chrome for Android 42

유용한 관련 사이트 :  https://svgontheweb.com/ko/