什么是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. C++中map的基本操作和使用；

    注:本文来自sina live 的博文 Map是c++的一个标准容器,她提供了很好一对一的关系,在一些程序中建立一个map可以起到事半功倍的效果,总结了一些map基本简单实用的操作!1. map最基本 ...

  2. 优化MySQL，还是使用缓存？读一篇文章有感

    今天我想对一个Greenfield项目上可以采用的各种性能优化策略作个对比.换言之,该项目没有之前决策强加给它的各种约束限制,也还没有被优化过. 具体来说,我想比较的两种优化策略是优化MySQL和缓存 ...

  3. 响应式js幻灯片代码一枚

    网站搭建经常会用到js幻灯片轮播,放上几张上档次的美图,为你的爱站增添大气元素.经常看到一些js幻灯片代码,但是感觉不是很美观,有的也不支持自适应缩放,也即是响应式,现在智能手机的普及以及移动浏览器技 ...

  4. HLG2040二叉树遍历已知前中，求后

    二叉树的遍历 Time Limit: 1000 MS Memory Limit: 32768 K Total Submit: 60(34 users) Total Accepted: 34(30 us ...

  5. BZOJ 1452 [JSOI2009] Count

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

  6. iOS 中的frame，bounds，center，transform关联

    这里有一篇好文章 http://www.winddisk.com/2012/06/07/transform/ 先看几个知识点,UIView 的frame,bounds,center,transform ...

  7. php 字符串负值判断

    2014年9月9日 11:54:54 $a = '-1'; $b = (int)$a; $c = is_numeric($a); if ($a) { echo 1; //echo 1 } else { ...

  8. 升级Windows10后Apache服务器启动失败的解决方法

    升级windows10系统后,微软内置了ASP.NET的web高级服务,默认安装了IIS服务器和MSSQL数据库,因为80端口被占用的原因,导致Apache服务器无法正常启动,但是MySQL服务一切正 ...

  9. 第十一章 TClientDataSet

    第十一章 TClientDataSet 与TTable.TQuery一样,TClientDataSet也是从TDataSet继承下来的,它通常用于多层体系结构的客户端.TClientDataSet最大 ...

  10. Java for LeetCode 200 Number of Islands

    Given a 2d grid map of '1's (land) and '0's (water), count the number of islands. An island is surro ...