Applying CSS from a file to a SVG file through HTML - html

Question

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?

Answer 1

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.