0

Good Evening,

I have multiple SVG files and need to dynamically change their fill color. Preferably using CSS.

HTML:

    <div>
       <svg width="100%" height="100%" viewbox="0 0 64 64" preserveAspectRatio="xMinYMin meet">
          <image xlink:href="http://imgh.us/export_1.svg" width="64" height="64" />
       </svg>
    </div>

CSS:

    div {
        width: 64px;
        height: 64px;
    }

    svg, svg * {
        fill: #000000 !important;
    }

SVG:

    <?xml version="1.0" encoding="utf-8"?>
    <!-- Generator: Adobe Illustrator 15.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    <svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         width="72.121px" height="59.209px" viewBox="0 0 72.121 59.209" enable-background="new 0 0 72.121 59.209" xml:space="preserve">
    <g>
        <path fill="#ff0000" d="M71.53,36.664L57.56,22.705c-0.57-0.57-1.43-0.74-2.18-0.43c-0.74,0.31-1.23,1.04-1.23,1.84v5.59h-4.32
            v-12.6c0-0.53-0.22-1.05-0.609-1.43L33.6,0.564c-0.22-0.21-0.47-0.36-0.75-0.45c-0.1-0.04-0.2-0.06-0.31-0.08
            c-0.06-0.01-0.12-0.02-0.18-0.02h-0.08c-0.06-0.01-0.13-0.01-0.19-0.01H2c-1.1,0-2,0.89-2,2v55.2c0,1.11,0.9,2,2,2h45.83
            c1.101,0,2-0.89,2-2v-10.75h4.32v5.591c0,0.81,0.49,1.54,1.23,1.85c0.25,0.1,0.51,0.15,0.77,0.15c0.521,0,1.03-0.2,1.41-0.58
            l13.97-13.971c0.38-0.38,0.59-0.88,0.59-1.409C72.12,37.545,71.91,37.045,71.53,36.664z M45.83,55.204H4v-51.2h26.21v13.1
            c0,1.11,0.89,2,2,2h13.62v10.6H34.91c-1.1,0-2,0.9-2,2v12.75c0,1.11,0.9,2,2,2H45.83V55.204z"/>
        <path fill="#ff0000" d="M32.28,0.015c-0.06-0.01-0.13-0.01-0.19-0.01h0.12C32.23,0.004,32.26,0.015,32.28,0.015z"/>
    </g>
    <g>
        <path fill="#ff0000" d="M32.21,0.004h-0.12c0.06,0,0.13,0,0.19,0.01C32.26,0.015,32.23,0.004,32.21,0.004z"/>
    </g>
    </svg>

Here's a fiddle.

My problem is simple. Instead of the fill color in the CSS, the SVG-files fill color is used. Which makes sense, since it's a different document.

For various reasons I can not edit the SVG files.

Is there a solution and what would it look like?

K.C.
  • 3
  • 1
  • If you used an `` or ` – Robert Longson Jun 24 '15 at 16:16
  • Injecting the the style was the catchword that inspired my final solution. Sadly i may not post it, since it's backend-code. The selected answer is the correct answer to my original question. I'm now using the java-spring backend to edit the SVG files at runtime, before delivering them to the client. – K.C. Jun 26 '15 at 10:22

1 Answers1

0

If you want to use the SVG and Image tag alone you'll need to use javascript to manipulate/recreate the image to use the filters/colors/css:

How to change color of SVG image using CSS (jQuery SVG image replacement)?

If you want to use pure CSS you need to embed the SVG directly in the page.

Community
  • 1
  • 1
MiiinimalLogic
  • 820
  • 6
  • 11