什么是SVG？

  • SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
  • SVG 用于定义用于网络的基于矢量的图形
  • SVG 使用 XML 格式定义图形
  • SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
  • SVG 是万维网联盟的标准

SVG 的优势

与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于：

  • SVG 图像可通过文本编辑器来创建和修改
  • SVG 图像可被搜索、索引、脚本化或压缩
  • SVG 是可伸缩的
  • SVG 图像可在任何的分辨率下被高质量地打印
  • SVG 可在图像质量不下降的情况下被放大

效果图：

<!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:red;stroke:blue;stroke-width:3;fill-rule:evenodd;" />

</svg>

</body>

</html>

【HTML5】SVG内联的更多相关文章

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

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

  2. HTML5学习笔记3 内联SVG

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

  3. HTML5: HTML5 内联 SVG

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

  4. H5 内联 SVG

    HTML5 内联 SVG HTML5 画布 HTML5 画布 vs SVG HTML5 支持内联 SVG. 什么是SVG? SVG 指可伸缩矢量图形 (Scalable Vector Graphics ...

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

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

  6. HTML5 学习03——内联 SVG

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

  7. 学习笔记——关于HTML（含HTML5）的块级元素和行级（内联）元素总结

    1.首先我们要知道什么是块级元素和行级(内联)元素? 块级(block)元素的特点: ①总是在新行上开始: ②高度,行高以及外边距和内边距都可控制: ③宽度缺省是它的容器的100%,除非设定一个宽度: ...

  8. HTML5有语义的内联元素详解

    HTML5有语义的内联元素详解 time标签 time 元素表示一个时间值,比如 5:35 P.M., EST, April 23, 2007.例如: Example Source Code:< ...

  9. 关于HTML（含HTML5）的块级元素和行级（内联）元素总结

    1.首先我们要知道什么是块级元素和行级(内联)元素? 块级(block)元素的特点: ①总是在新行上开始: ②高度,行高以及外边距和内边距都可控制: ③宽度缺省是它的容器的100%,除非设定一个宽度: ...

随机推荐

  1. emmet-vim

    最近啊,我投奔了网页的开发,看了一本<head first HTML and CSS>的书,感觉非常不错,然后又配置了一些vim里面用到的插件,现在我把学习到的东西记录下来! 首先,我不会 ...

  2. （JS高手不用看了！我只是在碎碎念，因为我也不知道面什么）JavaScript的算术运算

    Math.pow(2,53)    //2的51次幂 Math.round(0.6)    //四舍五入 Math.cell(0.6)      //向上求整 Math.floor(0.6)    / ...

  3. 批量删除wordpress垃圾评论留言

    wordpress博客的存在,垃圾评论注定会找上门来.大家还可以用Akismet.Bad Behavior.Spam Karma等一些其他的插件或者直接用程序写个验证码函数对留言进行验证来过滤 垃圾评 ...

  4. zstu.4191: 无向图找环(dfs树 + 邻接表）

    4191: 无向图找环 Time Limit: 5 Sec  Memory Limit: 128 MB Submit: 117  Solved: 34 Description 给你一副无向图,每条边有 ...

  5. XSS攻击：获取浏览器记住的明文密码

    作者:余弦(@evilcos) 0x01. XSS获取明文密码的多种方式 我已经感受到Web潮流带来的巨大革新,尤其是最近HTML5越来越火.浏览器们在客户端瓜分着这个Web OS,只要是对用户体验好 ...

  6. Swift Tour 随笔总结 (4)

    Switch的一个例子: let vegetable = "red pepper" switch vegetable { case "celery": let ...

  7. centos安装配置nginx

    1.安装gcc yum install gcc 2.安装PCRE,zlib,OpenSSL(其中devel,是develop开发包的意思) yum install -y pcre pcre-devel ...

  8. 裸设备和Oracle问答20例

    导读裸设备,也叫裸分区(原始分区),是一种没有经过格式化,不被Unix通过文件系统来读取的特殊字符设备.裸设备可以绑定一个分区,也可以绑定一个磁盘.本文收集裸设备和Oracle问答20例. 1.什么叫 ...

  9. Unity3d iOS基本优化和高级优化

    原地址:http://www.cocoachina.com/bbs/read.php?tid=70395&page=1 分享看见的2篇好文.简单翻译了一下并且放出原文 http://www.c ...

  10. BZOJ 1452 [JSOI2009] Count

    这道题好像有点简单的样子... absi找题目好厉害啊...确实是一道比较裸的2dBIT啊. 水掉吧. 附:2dBIT怎么做: 2dBIT就是BIT套BIT啦. 所以修改loop(x+=lowbit( ...