1.目的
理解svg的一些基本概念：width，height、viewBox、preserveAspectRatio。
2.如何理解svg
一个完整的svg写法
<svg width="400" height="200" viewBox="0 0 200 200" preserveAspectRatio="xMinYMin meet" style="border:1px solid #cd0000;">
<rect x="10" y="10" width="150" height="150" fill="#cd0000"/>
</svg>
2.1 理解width和height
width和height可以理解成画布，svg在屏幕占的真实大小。width和height的如果没有指定单位，那么单位就是是px。
在使用svg的时候必须指定宽高，否则会出现莫名其妙的现象。
2.2 理解viewBox
viewBox指定了一个区域，左上角是(0, 0)、右下角是(200, 200)，即200x200。然后将这个区域放大到400x200。
viewBox，这个属性不是必须的。指定宽高就行了。
2.3 理解preserveAspectRatio
使用viewBox的时候，我们需要按照自己的要求去放大，那就可以使用了preserveAspectRatio。preserveAspectRatio就是来控制放大方式的
3.参考地址
下面的链接里面讲的很好了。我就不举实际例子了。
http://www.zhangxinxu.com/wordpress/2014/08/svg-viewport-viewbox-preserveaspectratio/
