HTML5 실습 - SVG에 대한 자세한 설명

Baidu 백과사전:

SVG 확장 가능벡터 그래픽확장 가능한 벡터 그래픽은 그래픽 형식인 XML(Extensible Markup Language)을 기반으로 합니다. 2차원 벡터 그래픽을 설명하는 데 사용됩니다. 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" stroke="#ff0" stroke-width="3" fill="red" />

    </svg>

위 내용은 HTML5 실습 - SVG에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!