이 기사는 주로 SVG의 기본 개념과 SVG와 캔버스의 차이점을 소개하며, SVG 확장 가능한 벡터 그래픽을 더 잘 이해할 수 있도록 모든 사람이 용이하게하는 간단한 예를 제공합니다. 모든 사람에게 추천.
바이두 백과 사전 :
SVG 확장 가능한 벡터 그래픽은 2 차원 벡터 그래픽을 설명하는 확장 가능한 마크 업 언어 (XML)를 기반으로 한 그래픽 형식입니다. SVG는 W3C에 의해 공식화 된 새로운 2 차원 벡터 그래픽 형식이며 사양에서 네트워크 벡터 그래픽 표준이기도합니다. SVG는 XML 구문을 엄격하게 따르고 텍스트 형식의 설명 언어를 사용하여 이미지 콘텐츠를 설명하므로 이미지 해상도와 무관 한 벡터 그래픽 형식입니다.
SVG는 무엇입니까?SVG는 확장 가능한 벡터 그래픽 (확장 가능한 벡터 그래픽)을 나타냅니다.
SVG는 네트워크의 벡터 기반 그래픽을 정의하는 데 사용됩니다
SVG는 그래픽을 XML 형식으로 정의합니다
SVG 이미지는 확대되거나 크기가 변경 될 때 그래픽 품질을 잃지 않습니다.
SVG는 월드 와이드 웹 얼라이언스의 표준입니다.
SVG는 DOM 및 XSL과 같은 W3C 표준을 가진 전체입니다.
캔버스와 SVG의 차이점 :SVG
SVG는 XML을 사용하여 2D 그래픽을 설명하는 언어입니다.
SVG는 XML을 기반으로하며 SVG DOM의 모든 요소를 사용할 수 있음을 의미합니다. JavaScript 이벤트 핸들러를 요소에 첨부 할 수 있습니다.
SVG에서, 각각의 그림은 물체로 취급된다. SVG 객체의 특성이 변경되면 브라우저는 그래픽을 자동으로 재현 할 수 있습니다.
특징:
해상도 종속성이 없습니다
이벤트 처리기를 지원합니다
렌더링 영역이 큰 응용 프로그램 (예 : Google지도)에 가장 적합합니다.
높은 복잡성은 렌더링 속도를 늦출 수 있습니다 (DOM을 오버런하는 응용 프로그램 없음)
게임 응용 프로그램에는 적합하지 않습니다
캔버스
캔버스는 JavaScript를 통해 2D 그래픽을 그립니다.
캔버스는 픽셀로 픽셀로 렌더링됩니다.
캔버스에서는 그래프가 그려지면 브라우저의 관심을 계속 얻지 못합니다. 위치가 변경되면 그래픽에 의해 덮어 쓴 객체를 포함하여 전체 장면을 다시 칠해야합니다.
특징:
해상도 의존적
이벤트 핸들러는 지원되지 않습니다
약한 텍스트 렌더링 능력
.png 또는 .jpg 형식으로 결과 이미지를 저장하는 기능
이미지 집약적 인 게임에 가장 적합하며, 그 중 다수는 자주 다시 칠해집니다.
SVG 예 :코드를 복사하십시오