Use SVG for logo on a webpage - how to have multip

Question

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.

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

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

Would you have any clue?

Thanks, Nicolas

Answer 1

Maybe this can serve as an inspiration for you: I'm embedding a bogus logo inside the HTML and using CSS to scale and color it differently. This is the 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>

And the 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. Unfortunately, this only seems to work with Firefox and Chrome. Neither Opera nor Internet Explorer seem to like this (also not the new versions 9 and 10). Didn't try Safari.

So, I guess, unless you want to restrict the viewers to Webkit and Firefox browsers or use JavaScript to duplicate the SVG and modify certain attributes of the different instances, you're better off with either three different JPEG files (PNG would be better), or two different SVG files (in two different colors -- you can obviously rescale without problems).

Answer 2

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.

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.

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).