079_html5内联SVG

HTML5内联SVG详解

最新推荐文章于 2024-07-01 08:27:08 发布

原创最新推荐文章于 2024-07-01 08:27:08 发布 · 152 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #web前端

html学习专栏收录该内容

89 篇文章

订阅专栏

本文介绍了HTML5如何支持内联SVG，详细解释了SVG的概念及其相对于JPEG和GIF等格式的优势。此外还提供了示例代码说明如何在HTML5页面中直接嵌入SVG元素。

1. html5支持内联SVG。

2. 什么是SVG?

2.1. SVG指可伸缩矢量图形(Scalable Vector Graphics)。

2.2. SVG用于定义用于网络的基于矢量的图形。

2.3. SVG使用XML格式定义图形。

2.4. SVG图像在放大或改变尺寸的情况下其图形质量不会有损失。

2.5. SVG是万维网联盟的标准。

3. SVG与其他图像格式相比(比如: JPEG和GIF)的优势

3.1. SVG图像可通过文本编辑器来创建和修改。

3.2. SVG图像可被搜索、索引、脚本化或压缩。

3.3. SVG是可伸缩的。

3.4. SVG图像可在任何的分辨率下被高质量地打印。

3.5. SVG可在图像质量不下降的情况下被放大。

4. 浏览器支持: Internet Explorer 9+、Firefox、Chrome以及Safari支持内联SVG。

5. 把SVG直接嵌入html页面

5.1. 在html5中, 您能够将SVG元素直接嵌入html页面中:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>svg</title>
	</head>
	<body>
		<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
			<!-- points定义五个点的位置分别是: 100,10 40,180 190,60 10,60 160,180 -->
			<!-- 使用红色填充五角星、五角星边线使用蓝色、边线3px、evenodd奇偶填充规则 -->
		   <polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:red; stroke:blue; stroke-width:3; fill-rule:evenodd;" />
		</svg>
	</body>
</html>

5.2. 效果图