HTML5: HTML5 内联 SVG
| 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 |
|---|---|
|
|
| 2.返回顶部 |
| 3.返回顶部 |
| 4.返回顶部 |
| 5.返回顶部 |
| 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年.自从那儿以后, ...
随机推荐
- Excel中数字和字母混合时提取某些字符进行排序
在excel中,当数字和字母混合在一起的时候,会出现排序错误的情况 比如下图的这种情况.我们希望的是2排在1后面,但是实际上10却排在了1的后面.这时候我们就需要把字符串中的数字提取出来进行排序 第一 ...
- QTP Code Segment
Dim WshShellset WshShell = CreateObject("WScript.Shell")WshShell.SendKeys "{DOWN}&quo ...
- pyppeteer模块的基本使用
pyppeteer模块的基本使用 引言 Selenium 在被使用的时候有个麻烦事,就是环境的相关配置,得安装好相关浏览器,比如 Chrome.Firefox 等等,然后还要到官方网站去下载对应的驱动 ...
- 深入理解javascript原型和闭包（4）——隐式原型 (转载)
深入理解javascript原型和闭包(4)——隐式原型 注意:本文不是javascript基础教程,如果你没有接触过原型的基本知识,应该先去了解一下,推荐看<javascript高级程序设 ...
- BCrypt密码加密
快速入门 (1)我们从官网下载源码 BCrypt 官网 http://www.mindrot.org/projects/jBCrypt/ (2)新建工程,将源码类BCrypt拷贝到工程 (3)新建测试 ...
- 【怒转】 idea快捷键说明大全（中英文对照）
1 编辑[Editing] 快捷键 英文说明 中文说明 Ctrl + Space Basic code completion (the name of any class, method or var ...
- 模拟javaWeb责任链的设计
这篇文章介绍了责任链模式的应用:本文介绍如果自己实现一个责任链 定义请求和响应信息 简单定义请求类Request(封装一个字符串) public class Request { String requ ...
- ARM与Cortex
arm系列从arm11开始,以后的就命名为cortex,并且性能上大幅度提升. 从cortex开始,分为三个系列,a系列,r系列,m系列. m系列与arm7相似,不能跑操作系统(只能跑ucos2),偏 ...
- SAP Material Type on Classification Tree(ClassMaster management)
SAP Material Type on Classification Tree(ClassMaster management) 1. Classification Tree 是 luxottica ...
- Alpha版本——展示博客【第二组】
成员简介 章豪 http://cnblogs.com/roar/ 角色: PM,后端 个人介绍: 努力学习开发的小菜鸡,管理小白,背锅组长 贡献: - 设计开发计划 - 跟踪项目进行 - 组织开组会 ...