如何使用 viewBox 属性将 SVG 正确地嵌入到 img 元素中？

Question

好的，所以我已经做了一段时间了，我在第 3 天试图让它正常工作，但没有这样的运气；我是初学者 Web 开发人员。

我基本上想做的是水平创建一个社交媒体图标栏。我正在尝试使用 svg 图像作为图标，我尝试过使用 PNG 图像作为图标，虽然它可以工作，但它们非常像素化并带有一些锯齿。我什至在 affinity designer 中打开 SVG 图像以调整它们的大小，然后将它们导出为 PNG，结果就是我提到的别名。我希望它们看起来清晰，所以我正在尝试使用 SVG。

我在一个网站上使用了一个程序，它基本上使用 viewBox 来根据 x、y、w、h 属性调整 SVG 的大小，然后我使用生成的代码将其添加到 src url 在图像元素中，但我无法让我的图标显示在 html 中，我非常不确定我应该在 CSS 中做什么来解决这个问题。

这是我的 html 代码：（我还没有费心用链接包装我的图片标签）

<div class="social-container-1">
      <div class="social-container-2">
        <ul>
          <li><img class="test" src="/Resources/Images/Social Media Icons SVG PNG/youtube-icon1.svg#svgView(viewBox(0,0,1136,54))"></li>
          <li><img class="test" src="/Resources/Images/Social Media Icons SVG PNG/soundcloud-icon1.svg#svgView(viewBox(0,0,1136,54))"></li>
          <li><img class="test" src="/Resources/Images/Social Media Icons SVG PNG/bandcamp-icon1.svg#svgView(viewBox(0,0,1136,54))"></li>
          <li><img class="test" src="/Resources/Images/Social Media Icons SVG PNG/facebook-icon1.svg#svgView(viewBox(0,0,1136,54))"></li>
        </ul>
      </div>
    </div>

这是我的 CSS:

.social-container-1 {
  background-color: black;
  height: 100px;
  width: 100%;
  float: left;
}

.social-container-2 {
  float: right;
}

.social-container-1 .social-container-2 li {
  list-style-type: none;
  display: inline-block;
  padding-right: 10px;
}

.test {
  width: 100%;
  height: auto;
}

Answer 1

首先，我想向您展示 svg 文件的外观：

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 72 24" enable-background="new 0 0 72 24" width="24" height="24" xml:space="preserve">
  
  <g id="home">
    <path d='M0 0h24v24h-24z' fill='none'></path>
    <path d='M10 20v-6h4v6h5v-8h3l-10-9-10 9h3v8z'></path>
  </g>

  <g id="ok">
    <path d='M24 0h24v24h-24z' fill='none'></path>
    <path d='M33 16.17l-4.17-4.17-1.42 1.41 5.59 5.59 12-12-1.41-1.41z'></path>
  </g>

  <g id="mail">
    <path d='M48 0h24v24h-24z' fill='none'></path>
    <path d='M68 4h-16c-1.1 0-1.99.9-1.99 2l-.01 12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2v-12c0-1.1-.9-2-2-2zm0 4l-8 5-8-5v-2l8 5 8-5v2z'></path>
  </g>
</svg>

请注意在 svg 元素内有 3 个图标：#home #ok 和 #mail。 #ok 图标在 x 中从 24 延伸到 48，宽度和高度均为 24。

为了将 ok 图标用作图像，您需要使用此 src 值：myIcons.svg#svgView(viewBox(24,0,24,24))

viewBox 中的第一个参数是 from x 表示 svg 元素的内容从 x=24 单位开始。 viewBox 中的第二个参数是 from y 表示 svg 元素的内容从 y=0 单位开始。其他2个参数是宽度（24个单位）和高度（24个单位）

请阅读 viewBox attribute

当您编写 myIcons.svg#svgView(viewBox(24,0,24,24)) 时，您正在将 viewBox 属性从 viewBox="0 0 72 24" 更改为 viewBox(24,0,24,24)。结果，您只选择了 svg 元素的中间部分，如下所示：

如果您对其他图标应用相同的逻辑，结果可能是这样的：

.social-container-1 {
  background-color: gold;
  height: 100px;
  width: 100%;
  float: left;
}

.social-container-2 {
  float: right;
}

.social-container-1 .social-container-2 li {
  list-style-type: none;
  display: inline-block;
  padding-right: 10px;
}

.test {
  width: 100%;
  height: auto;
}

<div class="social-container-1">
      <div class="social-container-2">
        <ul>
          <li><img class="test" src="https://assets.codepen.io/222579/view-box_1.svg#svgView(viewBox(0,0,24,24))"></li>
          <li><img class="test" src="https://assets.codepen.io/222579/view-box_1.svg#svgView(viewBox(24,0,24,24))"></li>
          <li><img class="test" src="https://assets.codepen.io/222579/view-box_1.svg#svgView(viewBox(48,0,24,24))"></li>
        </ul>
      </div>
    </div>

请阅读How SVG Fragment Identifiers Work

此外，请不要在 url 值中使用空格：Is a URL allowed to contain a space?

如何使用 viewBox 属性将 SVG 正确地嵌入到 img 元素中？

How do you properly embed an SVG in an img element using the viewBox attribute?

html

css

svg

image

viewbox