Question

我有一个网页，我会多次重复我公司的标识 - 一次大尺寸，白色标识;一次性小尺寸，白色标识;一次性的小尺寸，橙色标志。

目前我使用的是JPG文件 - 3个JPG都很好。

但是我想知道我是否可以在这个用例中使用SVG，理想情况下不会在页面中复制SVG代码。

你有什么线索吗？

谢谢，尼古拉斯

Answer 1

也许这可以作为你的灵感来源：我在HTML中嵌入了一个伪造的徽标，并使用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文件（两种不同的颜色 - 你可以显然重新缩放没有问题）。

Answer 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>

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

在网页上使用SVG作为徽标 - 如何使用不同颜色的多个徽标实例？

2 个答案: