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

Question

好的，所以我已经有一段时间了，我正处于尝试让它正常工作的第 3 天，但没有这样的运气；我是一名初级网络开发人员。

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

我在一个网站上使用了一个程序，它基本上使用 viewBox 来调整 SVG 的大小，使其具有 x、y、w、h 属性，然后我使用生成的代码将其添加到图像中的 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?