将 SVG 用于网页上的徽标 - 如何以不同颜色显示此徽标的多个实例？答案

【问题标题】：Use SVG for logo on a webpage - how to have multiple instances of this logo in different colors?将 SVG 用于网页上的徽标 - 如何以不同颜色显示此徽标的多个实例？
【发布时间】：2013-04-25 18:19:22
【问题描述】：

我有一个网页，我将多次重复我公司的标志 - 一次是大尺寸的白色标志；一次是小尺寸，白色标志；一次是小尺寸的橙色徽标。

目前我使用的是 JPG 文件 - 3 个 JPG 都可以。

但我想知道我是否可以在这个用例中使用 SVG，最好不要在页面中复制 SVG 代码。

你有什么线索吗？

谢谢，尼古拉斯

【问题讨论】：

你有looked at this page吗？
您的徽标看起来如何？如果只有一种填充和一种描边颜色在变化，您可以使用内联 SVG，使用 SVG 的 <use> 元素在不同的位置和大小重新使用它，并应用一些不同的 CSS，定义其他的 width/@987654324 @、color、fill 和 stroke 属性。
@Wrikken 非常有用的文章！我学到了很多东西来解决我的问题，谢谢！

标签： html svg

【解决方案1】：

也许这可以作为你的灵感：我在 HTML 中嵌入了一个伪造的徽标 inside 并使用 CSS 对其进行不同的缩放和着色。这是 HTML：

<h1>my page</h1>
<div class="big logo" title="big logo">
  <svg id="logo" viewBox="0 0 50 50">
    <rect x="1" y="1" stroke-width="2" width="48" height="48"/>
    <circle cx="25" cy="25" r="23" fill="currentColor"/>
  </svg>
</div>
<div>some text on my page and a small logo</div>
<div class="logo">
  <svg id="smallLogo">
    <use xlink:href="#logo"/>
  </svg>
</div>
<div>some more text on my page and a differently colored logo</div>
<div class="yellow logo">
  <svg id="smallLogo">
    <use xlink:href="#logo"/>
  </svg>
</div>

还有 CSS：

.logo > svg {
  fill:green;
  stroke:blue;
  color:red;
  height:75px;
  width:75px;
}

.big.logo > svg {
  height:200px;
  width:200px;
}

.yellow.logo > svg {
  fill:yellow;
  color:orange;
  stroke:black;
}

See example on jsFiddle。不幸的是，这似乎只适用于 Firefox 和 Chrome。 Opera 和 Internet Explorer 似乎都不喜欢这样（新版本 9 和 10 也不喜欢）。没试过 Safari。

所以，我想，除非您想将查看者限制在 Webkit 和 Firefox 浏览器或使用 JavaScript 复制 SVG 并修改不同实例的某些属性，否则最好使用三个不同的 JPEG 文件（PNG 将更好），或者两个不同的 SVG 文件（两种不同的颜色——显然你可以毫无问题地重新缩放）。

【讨论】：

【解决方案2】：

如果您不需要将图像用作 CSS 背景，则可以使用SVG Stacks 技术来做到这一点。

Here's an example，一个包含多个不同图标的 svg 文件，其中图像的大小也决定了 svg 的外观。

这里是该 svg 文件的一部分来说明：

<?xml version="1.0" encoding="utf-8"?>
<svg id="icon" class="icon" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <style>
      svg .icon { display: none }
      svg .icon:target { display: inline }

      /* media-queries can control the appearance too */
      #hours {
        fill:none;
        stroke:#850508;
        stroke-dasharray:1,5.28;
        stroke-dashoffset:0.5;
        stroke-width: 1.5px;
      }
      @media screen and (max-width: 128px) {
        #hours {
          stroke-dasharray:1, 17.84;
          stroke-width: 2px;
        }
      }
      @media screen and (max-width: 64px) {
        #hours {
          stroke-dasharray: none;
        }
      }

      /* shared styles */
      .icon * { fill: #850508; }
    </style>
  </defs>
  <svg viewBox="0 0 32 32">
    <g id="clock" class="icon">
      <path d="M16,4c6.617,0,12,5.383,12,12s-5.383,12-12,12S4,22.617,4,16S9.383,4,16,4 M16,0 C7.164,0,0,7.164,0,16s7.164,16,16,16s16-7.164,16-16S24.836,0,16,0L16,0z"/>
            <path d="M21.422,18.578L18,15.152V8h-4.023v7.992c0,0.602,0.277,1.121,0.695,1.492l3.922,3.922
                L21.422,18.578z"/>
      <path id="hours" d="M16,4c6.617,0,12,5.383,12,12s-5.383,12-12,12S4,22.617,4,16S9.383,4,16,4"/>
    </g>
  </svg>
  <svg viewBox="0 0 32 32">
    <g id="star" class="icon">
      <polygon points="22.137,19.625 32,12 20,12 16,0 12,12 0,12 9.875,19.594 6,32 16.016,24.32 26.008,32"/>
    </g>
  </svg>
</svg>

每个图标都可以有不同颜色、渐变等的独特外观（在我的示例中，所有图标共享相同的填充，但它们不必这样做）。

【讨论】：