在 HTML 中如何调整 SVG 的大小-之路教程

具有 HTML 属性的解决方案

在此代码中，我们可以了解如何在 HTML 中调整 SVG 的大小。

为此，我们需要更改宽度和高度属性。

使用文本编辑器打开 SVG 文件。
它将显示如下代码行：

<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">

其中我们可以看到可以替换为我们需要的值的高度和宽度属性。

在 HTML 中使用 SVG 图像的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
  </head>
  <body>
    <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
      <g clip-path="url(#clip0)">
        <path d="M21.3933 40H18.6067C8.33091 40 0 31.1351 0 20.2008V19.7992C0 8.86486 8.33091 0 18.6067 0H21.3933C31.6691 0 40 8.86486 40 19.7992V20.2008C40 31.1351 31.6691 40 21.3933 40Z" fill="#F2D03B" />
        <path d="M2.55461 15.4131C2.49655 15.4131 2.4385 15.4131 2.38044 15.3822C2.06114 15.2896 1.85795 14.9189 1.94503 14.5483C3.51252 8.83399 7.60541 4.23167 12.8884 2.25484C13.2077 2.13128 13.5561 2.31661 13.6722 2.65638C13.7883 2.99615 13.6141 3.3668 13.2948 3.49036C8.38915 5.34364 4.58654 9.60619 3.13516 14.9189C3.07711 15.2278 2.81586 15.4131 2.55461 15.4131Z" fill="white" />
        <path d="M29.5794 2.00769C34.0787 5.62159 36.9814 11.3359 36.9814 17.7915V18.193C36.9814 29.1274 28.6505 37.9922 18.3748 37.9922H15.5881C12.6563 37.9922 9.86969 37.2818 7.40234 35.9845C10.5083 38.4865 14.398 39.9691 18.607 39.9691H21.3936C31.6694 39.9691 40.0003 31.1042 40.0003 20.1699V19.7683C40.0003 11.9845 35.7623 5.25093 29.5794 2.00769Z" fill="#E8B938" />
        <path d="M14.8911 18.1003C14.3686 18.1003 13.9622 17.6679 13.9622 17.1119V16.5251C13.9622 15.5366 13.2075 14.7027 12.2495 14.7027C11.2626 14.7027 10.4789 15.5058 10.4789 16.5251V17.1119C10.4789 17.6679 10.0725 18.1003 9.54998 18.1003C9.02748 18.1003 8.62109 17.6679 8.62109 17.1119V16.5251C8.62109 14.4247 10.2176 12.7258 12.1915 12.7258C14.2234 12.7258 15.8199 14.4247 15.8199 16.5251V17.1119C15.8199 17.637 15.4135 18.1003 14.8911 18.1003Z" fill="#3D3813" />
        <path d="M30.4789 18.1003C29.9564 18.1003 29.5501 17.6679 29.5501 17.1119V16.5251C29.5501 15.5366 28.7953 14.7027 27.8374 14.7027C26.8505 14.7027 26.0667 15.5058 26.0667 16.5251V17.1119C26.0667 17.6679 25.6604 18.1003 25.1379 18.1003C24.6154 18.1003 24.209 17.6679 24.209 17.1119V16.5251C24.209 14.4247 25.8055 12.7258 27.7794 12.7258C29.8113 12.7258 31.4078 14.4247 31.4078 16.5251V17.1119C31.4078 17.637 31.0014 18.1003 30.4789 18.1003Z" fill="#3D3813" />
        <path d="M20.0288 32.2162C11.6979 32.2162 9.05635 26.4402 8.94024 26.1931C8.70802 25.6989 8.91121 25.112 9.37565 24.8649C9.84009 24.6178 10.3916 24.834 10.6238 25.3282C10.7109 25.5444 12.946 30.2085 20.0288 30.2085C27.1986 30.2085 29.4047 25.3591 29.4337 25.3282C29.6659 24.834 30.2175 24.6178 30.6819 24.8649C31.1463 25.112 31.3495 25.6989 31.1173 26.1931C31.0012 26.4402 28.3597 32.2162 20.0288 32.2162Z" fill="#3D3813" />
      </g>
      <defs>
        <clipPath id="clip0">
          <rect width="40" height="40" fill="white" />
        </clipPath>
      </defs>
    </svg>
  </body>
</html>

现在，让我们更改 SVG 图像的宽度和高度。

在 HTML 中调整 SVG 图像大小的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
  </head>
  <body>
    <svg width="200" height="200" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
      <g clip-path="url(#clip0)">
        <path d="M21.3933 40H18.6067C8.33091 40 0 31.1351 0 20.2008V19.7992C0 8.86486 8.33091 0 18.6067 0H21.3933C31.6691 0 40 8.86486 40 19.7992V20.2008C40 31.1351 31.6691 40 21.3933 40Z" fill="#F2D03B" />
        <path d="M2.55461 15.4131C2.49655 15.4131 2.4385 15.4131 2.38044 15.3822C2.06114 15.2896 1.85795 14.9189 1.94503 14.5483C3.51252 8.83399 7.60541 4.23167 12.8884 2.25484C13.2077 2.13128 13.5561 2.31661 13.6722 2.65638C13.7883 2.99615 13.6141 3.3668 13.2948 3.49036C8.38915 5.34364 4.58654 9.60619 3.13516 14.9189C3.07711 15.2278 2.81586 15.4131 2.55461 15.4131Z" fill="white" />
        <path d="M29.5794 2.00769C34.0787 5.62159 36.9814 11.3359 36.9814 17.7915V18.193C36.9814 29.1274 28.6505 37.9922 18.3748 37.9922H15.5881C12.6563 37.9922 9.86969 37.2818 7.40234 35.9845C10.5083 38.4865 14.398 39.9691 18.607 39.9691H21.3936C31.6694 39.9691 40.0003 31.1042 40.0003 20.1699V19.7683C40.0003 11.9845 35.7623 5.25093 29.5794 2.00769Z" fill="#E8B938" />
        <path d="M14.8911 18.1003C14.3686 18.1003 13.9622 17.6679 13.9622 17.1119V16.5251C13.9622 15.5366 13.2075 14.7027 12.2495 14.7027C11.2626 14.7027 10.4789 15.5058 10.4789 16.5251V17.1119C10.4789 17.6679 10.0725 18.1003 9.54998 18.1003C9.02748 18.1003 8.62109 17.6679 8.62109 17.1119V16.5251C8.62109 14.4247 10.2176 12.7258 12.1915 12.7258C14.2234 12.7258 15.8199 14.4247 15.8199 16.5251V17.1119C15.8199 17.637 15.4135 18.1003 14.8911 18.1003Z" fill="#3D3813" />
        <path d="M30.4789 18.1003C29.9564 18.1003 29.5501 17.6679 29.5501 17.1119V16.5251C29.5501 15.5366 28.7953 14.7027 27.8374 14.7027C26.8505 14.7027 26.0667 15.5058 26.0667 16.5251V17.1119C26.0667 17.6679 25.6604 18.1003 25.1379 18.1003C24.6154 18.1003 24.209 17.6679 24.209 17.1119V16.5251C24.209 14.4247 25.8055 12.7258 27.7794 12.7258C29.8113 12.7258 31.4078 14.4247 31.4078 16.5251V17.1119C31.4078 17.637 31.0014 18.1003 30.4789 18.1003Z" fill="#3D3813" />
        <path d="M20.0288 32.2162C11.6979 32.2162 9.05635 26.4402 8.94024 26.1931C8.70802 25.6989 8.91121 25.112 9.37565 24.8649C9.84009 24.6178 10.3916 24.834 10.6238 25.3282C10.7109 25.5444 12.946 30.2085 20.0288 30.2085C27.1986 30.2085 29.4047 25.3591 29.4337 25.3282C29.6659 24.834 30.2175 24.6178 30.6819 24.8649C31.1463 25.112 31.3495 25.6989 31.1173 26.1931C31.0012 26.4402 28.3597 32.2162 20.0288 32.2162Z" fill="#3D3813" />
      </g>
      <defs>
        <clipPath id="clip0">
          <rect width="40" height="40" fill="white" />
        </clipPath>
      </defs>
    </svg>
  </body>
</html>

请注意，在我们的示例中，我们使用了 viewBox 属性。
它是 <svg> 标签根上的一个可选属性。

如果没有 viewBox 属性，我们只能获得实际图像的一小部分。

在 HTML 中如何调整 SVG 的大小

日期：2020-06-02 22:15:11 来源：oir作者：oir

←HTML显示字符串时如何保留空格和换行符

如何使用 CSS 向右对齐按钮→

具有 HTML 属性的解决方案

在 HTML 中使用 SVG 图像的示例：

在 HTML 中调整 SVG 图像大小的示例：

目录