HTML SVG

HTML5는 인라인 SVG를 지원합니다.

SVG란 무엇입니까?

SVG는 Scalable Vector Graphics(Scalable Vector Graphics)를 의미합니다.
SVG는 Vector 그래픽을 기반으로 정의하는 데 사용됩니다.
SVG는 XML 형식을 사용하여 그래픽을 정의합니다
SVG 이미지는 확대하거나 크기를 조정해도 그래픽 품질을 잃지 않습니다.
SVG는 World Wide Web Consortium의 표준입니다

SVG의 장점

다른 이미지 형식(예: JPEG, GIF)과 비교할 때 SVG 사용의 장점은 다음과 같습니다.

SVG 이미지는 텍스트 편집기로 생성 및 수정할 수 있습니다.
SVG 이미지는 검색, 색인화, 스크립트 작성 또는 압축 가능
SVG는 확장 가능
SVG 이미지는 어떤 해상도에서도 고품질로 인쇄 가능
SVG는 이미지 품질 저하 없이 확대 가능

브라우저 지원

인터넷 인라인 SVG는 Explorer 9+, Firefox, Opera에서 지원됩니다. , 크롬, 사파리.

SVG를 HTML 페이지에 직접 삽입

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php.cn</title>
</head>
<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와 캔버스의 차이점

SVG는 언어입니다. XML을 사용하여 2D 그래픽을 설명합니다.

Canvas는 JavaScript를 사용하여 2D 그래픽을 그립니다.

SVG는 XML을 기반으로 하며 이는 SVG DOM의 모든 요소를 사용할 수 있음을 의미합니다. JavaScript 이벤트 핸들러를 요소에 연결할 수 있습니다.

SVG에서는 그려진 모든 모양이 객체로 간주됩니다. SVG 객체의 속성이 변경되면 브라우저는 자동으로 그래픽을 재현할 수 있습니다.

캔버스는 픽셀 단위로 렌더링됩니다. 캔버스에서는 그래픽이 그려지면 더 이상 브라우저의 관심을 끌 수 없습니다. 위치가 변경되면 그래픽으로 가려졌을 수 있는 개체를 포함하여 전체 장면을 다시 그려야 합니다.

캔버스와 SVG의 비교

다음 표에는 캔버스와 SVG의 몇 가지 차이점이 나와 있습니다.

Canvas	SVG
依赖分辨率	不依赖分辨率
不支持事件处理器	支持事件处理器
弱的文本渲染能力	最适合带有大型渲染区域的应用程序（比如谷歌地图）

결과 이미지를 .png 또는 .jpg 형식으로 저장하는 기능

能够以 .png 或 .jpg 格式保存结果图像

复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）

最适合图像密集型的游戏，

其中的许多对象会被频繁

重绘

不适合游戏应用

< p> 복잡도가 높으면 렌더링 속도가 느려집니다(DOM을 과도하게 사용하는 애플리케이션은 빠르지 않습니다).

그래픽 집약적인 게임에 적합하며

많은 개체가 <🎜>

자주 수정됩니다. <🎜>

<🎜 > <🎜>

게임 애플리케이션에는 적합하지 않음<🎜>

<🎜><🎜><🎜>

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php.cn</title> </head> <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>

제출하다 코드 재설정

자동운전