在看一些漂亮的网页时，看到里面有一些漂亮的图形，然而这又不是图片来的，难道是用代码画的？不，是写的？对，把浏览器当成是画布来画画的方法有：Flash， Canvas， SVG 。今天我就探索一下 SVG 的魅力所在，下面图片中的简单图形是用 SVG 画的：
初学div布局的时候也尝试过用div来实现这个图形，但那可真是十分麻烦，不及 SVG 方便。
SVG 有两种表现形式，一种是单独的文件，后缀是.svg，代码按照xml的格式来写，文件可以嵌套到html文件中；另一种是在html中直接使用<svg>标签来写，不过要求html的版本是html5。
SVG 还可以通过JS动态创建并注入到 HTML DOM 中，这样做的优点是，可以根据各个浏览器对 SVG 的兼容性来选择性显示 SVG 。
文件格式的 SVG 也是用<svg>标签创建画布，标签中必须包含version和baseProfile属性，用来确定 SVG 的版本。当然我认为width和height属性也是必要的，怎么也要确定一下画布的大小吧。还有xmln属性（xml namespace）也是必须的。
这里说一下xmln，xml命名空间。之前学 Android 也有这个属性出现，使用 xml命名空间的原因到底是什么，下面引用维基百科的解释：
一个XML文档可能包括来自多个XML词汇表的元素或属性，如果每一个词汇表指派一个命名空间，那么相同名字的元素或属性之间的名称冲突就可以解决。举一个简单的例子来说，在一个订单的XML文档中需要引用到客户和所购买的产品，customer元素和product元素可能都有一个叫做id的子元素。这时候要引用id元素会造成名称冲突，但是如果将两个id元素放到不同的命名空间中就会解决这个问题。
可见是用来解决元素不唯一的问题
实现题图的图形居中显示的过程中，我发现了一种新的居中方法，CSS代码如下：
使用绝对定位的方式加上margin:auto就可以了，贼方便。