本篇主要理解 svg 中的 viewprot 和 viewbox；
<svg class="logo" width="100" height="100" viewBox="10 0 50 50">
在页面中定义一个 宽100 高100 的窗口，也就是viewport；
viewbox="x, y, width, height"
x:左上角开始的横坐标点
y:左上角往下的纵坐标点
width: viewbox的宽度
height: viewbox的高度x 越大，图像位置越偏左，y 越大，图像位置越偏上。这里需要留意我们设置的viewport窗口大小，超出窗口之后图像就不显示了。
（图像：即为 path 中绘画的内容，这里画出的是 twitter 的图标）
<svg width="100" height="100" viewbox="0 0 50 50"></svg>
这句代码的意思是：
1：在 宽100 高100的区域 中 左上角 （0 , 0 ）坐标处为顶点，画出一个 50 * 50 的 viewbox；
2：将viewport 中 宽50 高50 的内容截图；
3：把截图的图像平铺显示在 宽100 高100 的 viewprot中。看到这里我们就能理解上面为什么说： “x 越大，图像位置越偏左” 了；因为 x 是横坐标，x 越大，截图的区域越偏右，图像在截图区域显示的位置就越偏左，所以 viewprot中显示的图像位置就越偏左。
如图，显示区域的 100 * 100即为viewport的窗口大小。
当设置 viewbox中的 width 和 height 越大时，图像显示越小，因为所画图像在页面中显示的比例是一定的，当截取的宽度和高度越大，图像在viewbox中的比例就越小，显示的内容就越小。
不管width和height怎么设置，图像都是保持比例的。设置 坐标和宽高只能移动图像位置和缩放比例，不能改变图像。