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年.自从那儿以后, ...
随机推荐
- 结构体和typedef
在C语言中,可以使用结构体(Struct)来存放一组不同类型的数据.结构体的定义形式为: struct 结构体名{ 结构体所包含的变量或数组}; 结构体是一种集合,它里面包含了多个变量或数组,它 ...
- MATLAB 中几个颜色空间的坐标范围
在一些图象处理的程序中,我们经常要在不同的颜色空间操作,而且经常要把各颜色空间的坐标转化到 [0,1] 之间,这就需要知道一些常用颜色空间的坐标范围. 虽然可以通过颜色空间转化的公式推导这些范围,但是 ...
- 基于windows下,node.js之npm
1.下载node.js一路安装下去 在开始 node文件夹下,打开cmd 2.创建一个开发目录 mkdir reactQa && cd reactQa 3.初始化一个nmp的开发环境 ...
- Daily Life——团队冲刺博客——(领航篇)
目录 领航目标 各个成员在 Alpha 阶段认领的任务 各个成员的具体任务安排 整个项目预期的任务量 团队成员贡献值的计算规则 燃尽图 Daily Life团队冲刺博客 领航目标 各个成员在 Alph ...
- maven(二),Linux安装maven3.5.3及配置
Linux系统,ubuntu-16.04.4,安装maven3.5.3 一.创建文件夹 注意Linux用户,这个如果不是root用户,命令前面需要加:sudo //创建一个目录 mkdir /usr/ ...
- go 学习之函数
个人把go函数理解分三种: 1.普通函数 普通函数声明: func name(parameter-list) (result-list) { body} package main import &qu ...
- Docker镜像仓库的搭建--> Harbor篇
简介 Harbor是VMware公司开源的一个企业级Docker Registry项目,项目地址:https://github.com/goharbor/harbor Harbor作为一个企业级私有R ...
- Docker 清理容器 log 日志
原文 Docker 清理容器 log 日志 docker logs <容器ID> 是常用命令,来查看容器运行日志,但时间长了之后,就会发现越来越慢,log 太多了,这时就需要清理一下. 先 ...
- 定时任务crond介绍
定时任务cornd crond介绍: crond是linux系统中用来定期(或周期性)执行命令或指定程序任务脚本的一种程序. 查看crontab帮助: [root@db01 ~]# crontab - ...
- Riverside Curio
Riverside Curio time limit per test1 second memory limit per test256 megabytes Arkady decides to obs ...