HTML5 인라인 SVG 튜토리얼 및 캔버스와의 차이점
- 零下一度원래의
- 2017-05-15 10:41:391448검색
SVG란 무엇인가요?
SVG는 Scalable을 의미합니다Vector GraphicsShape(Scalable Vector Graphics)
SVG는 웹용 벡터 기반 그래픽을 정의하는 데 사용됩니다
SVG 사용법 XML 형식 정의 그래픽
SVG 이미지는 크기를 확대하거나 변경해도 그래픽 품질을 잃지 않습니다.
SVG는 World Wide Web Consortium의 표준입니다
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="www.php.cn/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 튜토리얼을 방문하세요.
SVG 및 캔버스둘의 차이점
SVG는 XML을 사용해 2D 그래픽을 기술하는 언어입니다.
캔버스는 JavaScript를 사용하여 2D 그래픽을 그립니다.
SVG는 XML을 기반으로 하며 이는 SVG DOM의 모든 요소를 사용할 수 있음을 의미합니다. JavaScript 이벤트 핸들러를 요소에 연결할 수 있습니다.
SVG에서는 그려진 각 모양이 객체로 처리됩니다. SVG 객체의 속성 이 변경되면 브라우저가 자동으로 그래픽을 재현할 수 있습니다.
캔버스는 픽셀 단위로 렌더링됩니다. 캔버스에서는 그래픽이 그려지면 더 이상 브라우저의 관심을 끌 수 없습니다. 위치가 변경되면 그래픽으로 가려졌을 수 있는 개체를 포함하여 전체 장면을 다시 그려야 합니다.
【관련 추천】
1. 특별 추천: "php Programmer Toolbox" V0.1 버전 다운로드
위 내용은 HTML5 인라인 SVG 튜토리얼 및 캔버스와의 차이점의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!