ylbtech-HTML5: HTML5 内联 SVG

1、

HTML5 内联 SVG

HTML5 支持内联 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>

<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 与 Canvas两者间的区别

SVG 是一种使用 XML 描述 2D 图形的语言。

Canvas 通过 JavaScript 来绘制 2D 图形。

SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。

在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

Canvas 是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

Canvas 与 SVG 的比较

下表列出了 canvas 与 SVG 之间的一些不同之处。

Canvas	SVG
依赖分辨率不支持事件处理器弱的文本渲染能力能够以 .png 或 .jpg 格式保存结果图像最适合图像密集型的游戏，其中的许多对象会被频繁重绘	不依赖分辨率支持事件处理器最适合带有大型渲染区域的应用程序（比如谷歌地图）复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）不适合游戏应用

2、

1、

http://www.runoob.com/html/html5-svg.html

2、

6.返回顶部

作者：ylbtech
出处：http://ylbtech.cnblogs.com/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

HTML5: HTML5 内联 SVG的更多相关文章

HTML5 Canvas、内联 SVG、Canvas vs. SVG
canvas 元素用于在网页上绘制图形. 什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canv ...
HTML5学习笔记3 内联SVG
HTML5支持内联SVG 下面来介绍一下什么是SVG SVG可缩放矢量图形可缩放矢量是基于可扩展标记语言(标准通用语言的子集),用于描述二维矢量图形的一种图形格式.它由万维网联盟制定,是一个开放标准 ...
H5 内联 SVG
HTML5 内联 SVG HTML5 画布 HTML5 画布 vs SVG HTML5 支持内联 SVG. 什么是SVG? SVG 指可伸缩矢量图形 (Scalable Vector Graphics ...
小强的HTML5移动开发之路（17）——HTML5内联SVG
来自:http://blog.csdn.net/dawanganban/article/details/18189181 一.什么是SVG 可缩放矢量图形是基于可扩展标记语言(标准通用标记语言的子集) ...
HTML5 学习03——内联 SVG
什么是SVG? SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用于定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 SVG 图像在放大或改变尺 ...
HTML5 内联 SVG
SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用于定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 SVG 图像在放大或改变尺寸的情况下其图形 ...
Html5新增元素中Canvas 与内联SVG的比较！
SVG与Canvas的区别与比较如下: svg:使用xml描述2D图形,canvas使用javascript描述2D图形. Canvas 是逐像素进行渲染的,在 canvas 中,一旦图形被绘制完成, ...
HTML5（三）SVG vs. Canvas
HTML5 内联 SVG 什么是SVG? SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用于定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 ...
HTML5: HTML5 介绍
ylbtech-HTML5: HTML5 介绍 1. 什么是 HTML5?返回顶部 HTML5 是下一代 HTML 标准. HTML,HTML 4.01的上一个版本诞生于1999年.自从那儿以后, ...

随机推荐

codeforces 559D Randomizer
题意简述: 在一个格点图中给定一个凸$n$边形(每个定点均在格点上),随机选择其中一些点构成一个子多边形, 求子多边形的内部点个数的期望. ----------------------------- ...
Php单元测试 phpunit & codecept
phpunit: Windows版本整体上说,在 Windows 下安装 PHAR 和手工在 Windows 下安装 Composer 是一样的过程: 下载链接:http://pan.baidu.c ...
github 上的PHP资源大全
依赖管理 ——用于依赖管理的包和框架Composer/Packagist : 一个包和依赖管理器Composer Installers: 一个多框架Composer库安装器Pickle: 可以在任意 ...
python- ' % '运算符的用途(非常重要)
%运算符就是用来格式化字符串的. 在字符串内部, %s表示用字符串替换, %d表示用整数替换, 有几个%?占位符,后面就跟几个变量或者值,顺序要对应好. 如果只有一个%?,括号可以省略. 另一种格式化 ...
mybatis 学习视频总结记录
学习mybaits简单增删改查例子记录此整理是学习视频后的视频内容整理,后半段还没有整理网易云课堂 SSM高级整合视频地址 : http://study.163.com/course/cours ...
学习contiki需要知道的一些概念和注意事项
概念: 1.宏:所谓宏,就是一些命令组织在一起,作为一个单独命令完成一个特定任务.Microsoft Word中对宏定义为:“宏就是能组织到一起作为一独立的命令使用的一系列word命令,它能使日常工作 ...
C++继承中的构造和析构
1,构造:对象在创建的后所要做的一系列初始化的工作: 析构:对象在摧毁之前所要做的一系列清理工作: 2,思考: 1,子类中如何初始化父类成员? 1,对于继承而言,子类可以获得父类的代码,可以获得父类中 ...
教你如何创建vue环境
教你如何创建vue的环境 wdnmd我操作了一万年,终于成功创建了vue的环境,现在就来讲一下,到底应该怎么操作才能成功创建vue的第一步 : 我们应该做的不是别的,而是去官方网站下载文件 node ...
run （简单DP）
链接:https://www.nowcoder.com/acm/contest/140/A 来源:牛客网题目描述 White Cloud is exercising in the playgroun ...
sciencedirect 网站抓取过程
开发环境 C#+SQLite 软件使用教程: 设置页面 1. 首先录入需要查询的关键词,如果需要根据年去查询,可以勾选对应的年,支持多个年份查询.点击[设置关键字]按钮,把待查询关键 ...

HTML5: HTML5 内联 SVG