要独立于SVG图像的缩放大小指定SVG图像内的坐标，请使用
viewBoxSVG元素上的属性来定义图像的边界系统在图像的坐标系中，并使用
width和
height属性来定义SVG图像中的坐标。宽度或高度是相对于包含页面的。
例如，如果您具有以下条件：
<svg> <polygon fill=red stroke-width=0 points="0,10 20,10 10,0" /></svg>
它将呈现为10px x 20px的三角形：
!10x20三角形
现在，如果仅设置宽度和高度，则将更改SVG元素的大小，但不会缩放三角形：
<svg width=100 height=50> <polygon fill=red stroke-width=0 points="0,10 20,10 10,0" /></svg>
!10x20三角形
如果设置了视图框，则将其转换为图像，以使给定的框（在图像的坐标系中）按比例缩放以适合给定的宽度和高度（在页面的坐标系中）。例如，将三角形放大为100px x
50px：
<svg width=100 height=50 viewBox="0 0 20 10"> <polygon fill=red stroke-width=0 points="0,10 20,10 10,0" /></svg>
!100x50三角形
如果要将其缩放到HTML视口的宽度，请执行以下操作：
<svg width="100%" viewBox="0 0 20 10"> <polygon fill=red stroke-width=0 points="0,10 20,10 10,0" /></svg>
!300x150三角形
请注意，默认情况下会保留宽高比。因此，如果您指定该元素的宽度应为100％，但高度应为50px，则实际上它只会放大到50px的高度（除非您的窗口非常狭窄）：
<svg width="100%" height="50px" viewBox="0 0 20 10"> <polygon fill=red stroke-width=0 points="0,10 20,10 10,0" /></svg>
!100x50三角形
如果您确实希望它水平伸展，请使用禁用纵横比保存
preserveAspectRatio=none：
<svg width="100%" height="50px" viewBox="0 0 20 10" preserveAspectRatio="none"> <polygon fill=red stroke-width=0 points="0,10 20,10 10,0" /></svg>
!300x50三角形
（请注意，虽然在我的示例中，我使用了适用于HTML嵌入的语法，而是将其嵌入到另一个SVG中，所以我需要使用有效的XML语法）
