HTML专栏是汇集了一些HTML常常被遗忘的知识，这里算是温故而知新，往往这些零碎的知识点，在你开发中能起到炸惊效果。我们每个人都没有过目不忘，过久不忘的本事，就让这一点点知识慢慢渗透你的脑海。 本专栏的风格是力求简洁明了。
SVG因为体积小，矢量图的缘故，经常会在html页面中引用此种格式的图形。 具体的有以下几种形式：
方法1，直接在html中添加SVG代码
<!DOCTYPE html>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="50" cy="50" r="40" stroke="yellow" stroke-width="2" fill="red" />
</svg>
</body>
</html> 方法2，使用 <embed> 标签
<embed>:优势：所有主要浏览器都支持，并允许使用脚本缺点：不推荐在HTML4和XHTML中使用（但在HTML5允许）
<embed src="circle1.svg" type="image/svg+xml" />
方法3，使用 <object> 标签
<object>:优势：所有主要浏览器都支持，并支持HTML4，XHTML和HTML5标准缺点：不允许使用脚本。
<object data="circle1.svg" type="image/svg+xml"></object>
方法4，使用 <iframe> 标签
<iframe>:优势：所有主要浏览器都支持，并允许使用脚本缺点：不推荐在HTML4和XHTML中使用（但在HTML5允许）
<iframe src="circle1.svg"></iframe>
附识：
（1）SVG在线编辑器
网络上有很多网站提供一种支持在线编辑SVG的JS方法。我们借用成功的经验即可。
www.zuohaotu.com/svg/
c.runoob.com/more/svgeditor/
（2）SVG可用的滤镜
feBlend - 与图像相结合的滤镜
feColorMatrix - 用于彩色滤光片转换
feComponentTransfer
feComposite
feConvolveMatrix
feDiffuseLighting
feDisplacementMap
feFlood
feGaussianBlur
feImage
feMerge
feMorphology
feOffset - 过滤阴影
feSpecularLighting
feTile
feTurbulence
feDistantLight - 用于照明过滤
fePointLight - 用于照明过滤
feSpotLight - 用于照明过滤 （3）示例代码
- <?xml version="1.0" standalone="no"?>
- <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
- "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
- <svg width="100%" height="100%" version="1.1"
- xmlns="http://www.w3.org/2000/svg">
- <ellipse cx="300" cy="150" rx="200" ry="80"
- style="fill:rgb(100,100,150);
- stroke:rgb(0,150,0);stroke-width:3"/>
- </svg>
（4）代码说明
第一行包含了 XML 声明。请注意 standalone 属性！该属性规定此 SVG 文件是否是"独立的"，或含有对外部文件的引用。
standalone="no" 意味着 SVG 文档会引用一个外部文件 - 在这里，是 DTD 文件。
第二和第三行引用了这个外部的 SVG DTD。该 DTD 位于 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"。该 DTD 位于 W3C，含有所有允许的 SVG 元素。
SVG 代码以 <svg> 元素开始，包括开启标签 <svg> 和关闭标签 </svg> 。这是根元素。width 和 height 属性可设置此 SVG 文档的宽度和高度。version 属性可定义所使用的 SVG 版本，xmlns 属性可定义 SVG 命名空间。
HTML是前端页面展示的骨架，应用无处不在，希望某个知识点就能帮助你，欢迎学习GIS的朋友一起交流。
[《 Openlayers 综合示例200+ 》]
[《 leaflet示例教程100+ 》]
[《 Cesium示例教程100+》]
[《MapboxGL示例教程100+》]
