この記事は主に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が大きいほど、画像位置が高くなります。ここでは、設定したビューポートウィンドウのサイズに注意する必要があります。ウィンドウを超えた後は、画像は表示されません。
（画像：パスに描かれたコンテンツです。こちらが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は、ビューポートのウィンドウサイズです。
当设置 viewbox中的 width 和 height 越大时，图像显示越小，因为所画图像在页面中显示的比例是一定的，当截取的宽度和高度越大，图像在viewbox中的比例就越小，显示的内容就越小。
不管width和height怎么设置，图像都是保持比例的。设置 坐标和宽高只能移动图像位置和缩放比例，不能改变图像。