html5 svg 학습 가이드 - SVG basics_html5 튜토리얼 기술

바이두 백과사전:

SVG Scalable Vector Graphics는 2차원 벡터 그래픽을 설명하기 위한 XML(Extensible Markup Language) 기반의 그래픽 형식입니다. SVG는 W3C에서 개발한 새로운 2차원 벡터 그래픽 형식이며 사양의 네트워크 벡터 그래픽 표준이기도 합니다. SVG는 XML 구문을 엄격하게 따르며 텍스트 형식의 설명 언어를 사용하여 이미지 내용을 설명합니다. 따라서 이미지 해상도와 무관한 벡터 그래픽 형식입니다.

SVG란 무엇입니까?

SVG는 Scalable Vector Graphics를 나타냅니다.
SVG는 웹용 벡터 기반 그래픽을 정의하는 데 사용됩니다.
SVG는 XML 형식을 사용하여 그래픽을 정의합니다.
SVG 이미지는 확대되거나 크기가 조정됩니다. 그래픽 품질은 손실되지 않습니다.
SVG는 World Wide Web Consortium의 표준입니다
SVG는 DOM 및 XSL과 같은 W3C 표준의 필수 부분입니다

캔버스와 SVG의 차이점:
　SVG
　SVG는 XML을 사용하여 2D 그래픽을 설명하는 언어입니다.
SVG는 XML을 기반으로 하며 이는 SVG DOM의 모든 요소를 ​​사용할 수 있음을 의미합니다. JavaScript 이벤트 핸들러를 요소에 연결할 수 있습니다.
　SVG에서는 그려진 각 모양이 객체로 간주됩니다. SVG 객체의 속성이 변경되면 브라우저는 자동으로 그래픽을 재현할 수 있습니다.
기능:
해상도에 의존하지 않음
이벤트 핸들러 지원
렌더링 영역이 큰 애플리케이션(예: Google 지도)에 가장 적합합니다.
복잡도가 높으면 렌더링 속도가 느려집니다(DOM을 과도하게 사용하는 모든 애플리케이션). 빠르지 않습니다)
　게임 응용 프로그램에는 적합하지 않습니다
캔버스
캔버스는 JavaScript를 통해 2D 그래픽을 그립니다.
캔버스는 픽셀 단위로 렌더링됩니다.
캔버스에서는 그래픽이 그려지면 더 이상 브라우저의 관심을 받지 않습니다. 위치가 변경되면 그래픽으로 가려졌을 수 있는 개체를 포함하여 전체 장면을 다시 그려야 합니다.
기능:
해상도에 따라 다름
이벤트 핸들러가 지원되지 않음
약한 텍스트 렌더링 기능
결과 이미지를 .png 또는 .jpg 형식으로 저장하는 기능
이미지 집약적인 애플리케이션에 적합 게임 많은 객체가 자주 다시 그려지는 곳

svg 예:

코드 복사

코드는 다음과 같습니다.

<svg width="100%" height="100%" >
<circle cx="300" cy="60" r="50" 스트로크="#ff0" 스트로크 너비 ="3" fill="red" />
</svg>