在网页上使用SVG作为徽标 - 如何使用不同颜色的多个徽标实例？ [英] Use SVG for logo on a webpage - how to have multiple instances of this logo in different colors?

问题描述

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

I have a webpage where I will repeat the logo of my company several times - one time in big size, white logo ; one time in small size, white logo ; one time in small size, orange logo.

目前我正在使用JPG文件 - 所有3个JPG都不错。

For now I'm using JPG files - all good with 3 JPGs.

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

But I wonder whether I can use SVG for this use case, ideally without duplicating the SVG code within the page.

你有什么线索吗？

谢谢，
Nicolas

Thanks, Nicolas

推荐答案

如果你不这样做需要使用图像作为CSS背景，然后可以使用 SVG Stacks 技术要做到这一点。

If you don't need to use the image as a CSS background, then it's possible to use the SVG Stacks technique to do this.

这是一个示例，一个包含多个不同图标的svg文件，其中图像的大小也决定了svg的外观。

Here's an example, a single svg file that contains several different icons, where the size of the image also decides how the svg looks.

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

Here's a part of that svg file to illustrate:

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

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

Each icon can have a unique look with different colors, gradients etc (in my example all the icons share the same fill, but they don't have to do that).

这篇关于在网页上使用SVG作为徽标 - 如何使用不同颜色的多个徽标实例？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！