HTML5 기본 튜토리얼

HTML5 API

HTML5 媒体

HTML5 图形

HTML5 内联 SVG

HTML5 支持内联 SVG。SVG文件可通过以下标签嵌入HTML文档：<embed>,<object>或者<iframe> (embed和iframe都属于内嵌框架），通过这些标签可以使SVG的代码直接嵌入到ＨＴＭＬ页面中去，或者我们也可以直接链接到SVG文件。

什么是SVG？

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用于定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
SVG 是万维网联盟的标准

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>
<head>　
<meta charset="utf-8">　
<title>基础教程网(oldtoolbag.com)</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로 원 그리기

예제

!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>SVG로 원 그리기 oldtoolbag.com</title>
</head>
<body>
　　　　<svg xmlns="http://www.w3.org/2000/svg" height="500px" width="500px" version="1.1">
　　　　　　<circle cx="200" cy="100" r="100" stroke="#afeedd"
　　　　　　stroke-width="5" fill="#f0ddff"　/>
　　　　</svg>
</body>
</html>

테스트를 해보세요 ‹/›

<svg> 태그에서height과width속성은 SVG 문서의 높이와 너비를 설정합니다;version속성은 사용하는 SVG 버전을 정의할 수 있습니다;xmlns 속성은 SVG 네임스페이스를 정의할 수 있습니다;
<circle>는 SVG에서 원을 생성하기 위한 태그입니다;cx 과 cy 속성은 원의 중심을 정의합니다; x 과 y 좌표, 이 두 속성을 무시하면 원점이 (0, 0)로 설정됩니다;r속성은 원의 半径를 정의합니다;
stroke 과 stroke-width 속성은 도형의轮廓을 어떻게 표시할지 정의합니다;fill 속성을 설정하여 도형 내의 색상을 정의합니다;
이미지를 확인해보세요:

SVG로 사각형 그리기

예제

!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>SVG로 사각형 그리기 oldtoolbag.com</title>
</head>
<body>
　　　　<svg xmlns="http://www.w3.org/2000/svg" width="500px" height="500px" version="1.1">
　　　　　　<rect x="50" y="100" width="300" height="150"
　　　　　　style="fill:rgb(145,245,255);stroke-width:5;stroke:#EE799F;fill-opacity:0.9;stroke-opacity:0.9;"/>
　　　　</svg>
</body>
</html>

테스트를 해보세요 ‹/›

SVG와 Canvas의 차이점

SVG는 XML을 사용하여 설명 2D 도형의 언어.

Canvas는 JavaScript를 통해 그려집니다. 2D 도형.

SVG는 XML을 기반으로 하므로, SVG DOM에서 각 요소는 사용할 수 있습니다. 어떤 요소에도 JavaScript 이벤트 처리기를 추가할 수 있습니다.

SVG에서, 각 도형은 객체로 간주됩니다. SVG 객체의 속성이 변경되면, 브라우저가 자동으로 도형을 재생성할 수 있습니다.

캔버스는 픽셀 단위로 렌더링됩니다. 캔버스에서는 그래픽이 그려지면 그래픽은 더 이상 브라우저의 주의를 받지 않습니다. 그 위치가 변경되면 전체 시나리오가 다시 그려져야 하며, 그래픽에 의해 덮힌 모든 객체도 포함됩니다.

캔버스와 SVG 비교

아래 표는 캔버스와 SVG 간의 몇 가지 차이점을 나열합니다.

캔버스	SVG
해상도에 의존함 이벤트 처리기 지원하지 않음 약한 텍스트 렌더링 능력 .png 또는 .jpg 형식으로 결과 이미지를 저장할 수 있습니다 이미지가 많이 그려지는 게임에 가장 적합합니다. 많은 객체가 반복적으로 다시 그려집니다	해상도에 의존하지 않음 이벤트 처리기 지원 대형 렌더링 영역을 가진 애플리케이션에 가장 적합합니다(예: 구글 맵) 복잡도가 높으면 렌더링 속도가 느려지게 됩니다(DOM을 과도하게 사용하는 애플리케이션은 빠르지 않습니다) 게임 애플리케이션에 적합하지 않음

HTML5 MathML HTML5 캔버스