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 教程。

http://www.w3school.com.cn/svg/index.asp

H5 内联 SVG的更多相关文章

  1. HTML5 Canvas、内联 SVG、Canvas vs. SVG

    canvas 元素用于在网页上绘制图形. 什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canv ...

  2. 小强的HTML5移动开发之路（17）——HTML5内联SVG

    来自:http://blog.csdn.net/dawanganban/article/details/18189181 一.什么是SVG 可缩放矢量图形是基于可扩展标记语言(标准通用标记语言的子集) ...

  3. H5内联视频总结

    概述 之前写过h5内联视频,总结了一下当时做微信视频类h5的心得,随着工作中越来越多的接触h5,我有了更多的心得与经验,记下来供以后开发时参考,相信对其他人也有用. 内联视频的播放 内联视频需要用户主 ...

  4. HTML5 学习03——内联 SVG

    什么是SVG? SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用于定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 SVG 图像在放大或改变尺 ...

  5. HTML5学习笔记3 内联SVG

    HTML5支持内联SVG 下面来介绍一下什么是SVG SVG可缩放矢量图形 可缩放矢量是基于可扩展标记语言(标准通用语言的子集),用于描述二维矢量图形的一种图形格式.它由万维网联盟制定,是一个开放标准 ...

  6. HTML5: HTML5 内联 SVG

    ylbtech-HTML5: HTML5 内联 SVG 1.返回顶部 1. HTML5 内联 SVG HTML5 支持内联 SVG. 什么是SVG? SVG 指可伸缩矢量图形 (Scalable Ve ...

  7. H5内联视频

    概述 微信上很多H5页面都会有会动的像视屏的页面,这样的效果很棒.从技术上来说,这个其实就是视屏,不过没有控制播放的按钮罢了.它们还有一个专业的名字--内联视频.下面我把自己对内联视屏的学习记录下来, ...

  8. Html5新增元素中Canvas 与内联SVG的比较！

    SVG与Canvas的区别与比较如下: svg:使用xml描述2D图形,canvas使用javascript描述2D图形. Canvas 是逐像素进行渲染的,在 canvas 中,一旦图形被绘制完成, ...

  9. HTML5 内联 SVG

    SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用于定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 SVG 图像在放大或改变尺寸的情况下其图形 ...

随机推荐

  1. PowerDesigner如何把建好的表导入到数据库中，并且把注释也导入进去

    第一次接触这个软件,经过自己的捣鼓和百度,终于可以顺利的导入数据库中了,好开森,希望可以帮助到更多人. 数据库(mysql)其实和sqlserver差不多,以16.5版本为例 1.选中一个PDM项目, ...

  2. 快速入门Http协议

    本节主要讲解http协议相关的内容,作为后期讲述的一个预备知识.深入了解Http协议,对你今后的JavaSE,JavaEE学习都大有裨益,本节难度不是很大,却很重要. 早期的Http协议是1.0版本的 ...

  3. 华为oj---合并数组

    题目标题: 将两个整型数组按照升序合并,并且过滤掉重复数组元素 详细描述: 接口说明 原型: voidCombineBySort(int* pArray1,intiArray1Num,int* pAr ...

  4. jQuery 学习总结（上）

    第二章:基础选择器 第三章:过滤性选择器 第四章:表单选择器 第五章:jQuery  操作DOM 第六章:jQuery 事件与应用 第七章:jQuery 实现ajax应用

  5. androidTv界面刷新跳动的问题

    今天刚完成老大要求的新模块,在界面刷新的时候遇到了一些问题:一个scrollview动态的添加控件且控件中的数据进行更换的时候,出现的界面跳动的问题 刚开始以为是界面没有展示完全配合scrollvie ...

  6. DllRegisterServer的调用失败的问题解决方法

    1'按键盘上的win+x键调出常用命令. 2'选择“命令提示符(管理员)“ 3'在”命令提示符“中输入”regsvr32 c:\Windows\SysWOW64\comdlg32.ocx“或其他ocx ...

  7. cmake的四个命令:add_compile_options、add_definitions、target_compile_definitions、build_command

    cmake的四个命令:add_compile_options.add_definitions.target_compile_definitions.build_command add_compile_ ...

  8. java基础知识点---equal，==，hashcode

    1.==比较对象之间的地址是否相同 student a=new student(1); student b=new student(1); a==b   false b=a; a==b   true ...

  9. hadoop系列二：HDFS文件系统的命令及JAVA客户端API

    转载请在页首明显处注明作者与出处 一:说明 此为大数据系列的一些博文,有空的话会陆续更新,包含大数据的一些内容,如hadoop,spark,storm,机器学习等. 当前使用的hadoop版本为2.6 ...

  10. Android名片扫描识别系统SDK

    Android名片扫描识别系统SDK 一.Android名片扫描识别系统应用背景 这些年,随着移动互联的发展,APP应用成爆发式的增长,在很多APP中都涉及到对名片信息的录入,如移动CRM.移动端OA ...