0

我有一个网页，我会在其中多次重复我公司的标志——一次是大尺寸的白色标志；一次是小尺寸，白色标志；一次是小尺寸的橙色标志。

现在我正在使用 JPG 文件 - 3 个 JPG 都很好。

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

你有什么线索吗？

谢谢，尼古拉斯

4

2 回答 2

0

如果您不需要将图像用作 CSS 背景，则可以使用SVG 堆栈技术来执行此操作。

这是一个示例，一个包含多个不同图标的单个 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>

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

于 2013-04-26T09:05:39.853 回答
0

也许这可以为您提供灵感：我在 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;
}

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

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

于 2013-04-25T22:23:48.700 回答