This article mainly understands viewprot and viewbox in svg;
<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的高度The larger the x, the leftward the image position, the larger the y, the higher the image position. Here we need to pay attention to the size of the viewport window we set, the image will not be displayed after the window is exceeded.
(Image: it is the content drawn in the path, here is the twitter icon)
<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中。Seeing this, we can understand why it says: "The larger the x, the more left the image position"; because x is the abscissa, the larger the x, the more right the screenshot area, the more the image is displayed in the screenshot area. To the left, so the position of the image displayed in the viewprot is more to the left.
As shown in the figure, 100 * 100 in the display area is the window size of the viewport.
当设置 viewbox中的 width 和 height 越大时，图像显示越小，因为所画图像在页面中显示的比例是一定的，当截取的宽度和高度越大，图像在viewbox中的比例就越小，显示的内容就越小。
不管width和height怎么设置，图像都是保持比例的。设置 坐标和宽高只能移动图像位置和缩放比例，不能改变图像。