HTML5 인라인 SVG

HTML5는 내장 SVG를 지원합니다

SVG는 무엇인가요?

  • SVG는 확장 가능 벡터 그래픽(Scalable Vector Graphics)을 의미합니다
  • SVG는 네트워크에서 사용되는 벡터 그래픽을 정의하는 데 사용됩니다
  • SVG는 XML 형식으로 그래픽을 정의합니다
  • SVG 이미지는 확대하거나 크기를 변경할 때 그래픽 품질이 손실되지 않습니다
  • SVG는 월드 와이드 웹 연맹의 표준입니다

SVG의 장점

JPEG 및 GIF와 같은 다른 이미지 형식에 비해 SVG를 사용하는 장점은 다음과 같습니다:

  • SVG 이미지는 텍스트 편집기를 통해 생성 및 수정할 수 있습니다
  • SVG 이미지는 검색, 인덱싱, 스크립팅 또는 압축될 수 있습니다
  • SVG는 확장 가능합니다
  • SVG 이미지는 어떤 해상도에서도 높은 품질로 인쇄될 수 있습니다
  • SVG는 이미지 품질이 떨어지지 않도록 확대될 수 있습니다

브라우저 지원

Internet Explorer 9, Firefox, Opera, Chrome 및 Safari는 내장 SVG를 지원합니다.

SVG를 직접 HTML 페이지에 삽입하다

HTML5에서는 SVG 요소를 직접 HTML 페이지에 삽입할 수 있습니다:

예제

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
  <polygon points="100,10 40,180 190,60 10,60 160,180"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>

</body>
</html>

직접 시도해 보세요

결과:

SVG 강의

SVG에 대한 더 많은 지식을 배우려면, 우리의 SVG 강의.