SVG-개요

SVG 란 무엇입니까?

SVG, Scalable Vector Graphics는 벡터 기반 그래픽을 정의하는 XML 기반 언어입니다.
SVG는 웹에 이미지를 표시하기위한 것입니다.
벡터 이미지이기 때문에 SVG 이미지는 축소하거나 크기를 조정해도 품질이 저하되지 않습니다.
SVG 이미지는 상호 작용 및 애니메이션을 지원합니다.
SVG는 W3C 표준입니다.
래스터 이미지와 같은 다른 이미지 형식도 SVG 이미지와 함께 사용할 수 있습니다.
SVG는 HTML의 XSLT 및 DOM과 잘 통합됩니다.

장점

텍스트 편집기를 사용하여 SVG 이미지를 만들고 편집합니다.
XML 기반이기 때문에 SVG 이미지는 검색 및 색인 생성이 가능하며 스크립팅 및 압축이 가능합니다.
SVG 이미지는 축소 또는 크기 조정에 관계없이 품질이 저하되지 않으므로 확장 성이 뛰어납니다.
모든 해상도에서 우수한 인쇄 품질
SVG는 개방형 표준입니다.

단점

이진 형식의 래스터 이미지에 비해 텍스트 형식 크기가 더 큽니다.
작은 이미지라도 크기가 클 수 있습니다.

예

다음 XML 스 니펫을 사용하여 웹 브라우저에서 원을 그릴 수 있습니다.

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

HTML 페이지에 직접 SVG XML을 포함합니다.

testSVG.htm

<html>
   <title>SVG Image</title>
   <body>
   
      <h1>Sample SVG Image</h1>
      
      <svg width="100" height="100">
         <circle cx="50" cy="50" r="40" stroke="red" stroke-width="2" fill="green" />
      </svg>
   
   </body>
</html>

산출

Chrome 웹 브라우저에서 textSVG.htm을 엽니 다. Chrome / Firefox / Opera를 사용하여 플러그인없이 직접 SVG 이미지를 볼 수 있습니다. Internet Explorer에서 SVG 이미지를 보려면 activeX 컨트롤이 필요합니다.

SVG가 HTML과 통합되는 방법

<svg> 요소는 SVG 이미지의 시작을 나타냅니다.
<svg> 요소의 너비 및 높이 속성은 SVG 이미지의 높이와 너비를 정의합니다.
위의 예에서는 <circle> 요소를 사용하여 원을 그렸습니다.
cx 및 cy 속성은 원의 중심을 나타냅니다. 기본값은 (0,0)입니다. r 속성은 원의 반경을 나타냅니다.
다른 속성 인 stroke 및 stroke-width는 원의 윤곽선을 제어합니다.
채우기 속성은 원의 채우기 색상을 정의합니다.
닫는 </ svg> 태그는 SVG 이미지의 끝을 나타냅니다.