0

I have an icons folder where I have stored all my SVG icons and art. Since this is the first time I'm using svg icons, I tried using them through an image tag and and 'i' tag. Even thought I am able to change the dimensions of the icon, I would really like to change the color of the icon and that does not seem to work with css.

This is my svg file 

<?xml version="1.0" encoding="utf-8" ?>
<!-- Generator: Adobe Illustrator 16.0.0, 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="Layer_1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px" height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48"
xml:space="preserve">
  <switch>
    <foreignObject requiredExtensions="&ns_ai;" x="0" y="0" width="1" height="1">
      <i:pgfRef xlink:href="#adobe_illustrator_pgf">
      </i:pgfRef>
    </foreignObject>
    <g i:extraneous="self">
      <g>
        <path fill="#007AFF" d="M22,8.9C14..." />
        <path fill="#007AFF" d="M22,0.5..." />
      </g>

    </g>
  </switch>
</svg>

And this is my html file

 <div>    
   <img src="icons/coin_filled.svg" id="coin-filled"></img>
   <img src="icons/coin_filled.svg"></img>
 </div>

I will need to change color's of the icons often. How I do use svg icons in html and how can I style them through CSS?

Mr. Polywhirl
  • 42,981
  • 12
  • 84
  • 132
sushcha
  • 55
  • 7
  • 2
    You cannot modify the contents of an `img` source using CSS. You will have to include the actual svg code wholesale if you want that granularity. (that means: include everything between and including the `` tags) – somethinghere Sep 21 '15 at 13:36
  • Object is indeed the best option, have you tried that? –  Sep 21 '15 at 13:38
  • @Kaiido could be - the iframe solution seems cumbersome, the object one... Not sure. I don't really use `objects` - can you target CSS inside an object tag? – somethinghere Sep 21 '15 at 13:39
  • 1
    Actually I don't think you can style *through* an `object` tag...AFAIK you can only style SVG that are in the actual HTML. Interested to see if that is the case. – Paulie_D Sep 21 '15 at 13:40
  • @Paulie_D Thats what I'm thinking, although I can't back it up. EDIT: apart from this SO post where the comment explains you can't: http://stackoverflow.com/questions/23900633/target-svg-included-as-object-with-css-from-parent-document – somethinghere Sep 21 '15 at 13:40
  • Or this - http://stackoverflow.com/questions/4906148/how-to-apply-a-style-to-an-embedded-svg – Paulie_D Sep 21 '15 at 13:43
  • @Kaiido you could also just load the SVG through JS, actually. With Javascript _a lot_ of things become suddenly possible! But hey, I learned that `object`s dont allow CSS and can be used for SVG! – somethinghere Sep 21 '15 at 13:46
  • @Kaiido kind of wonder what that would result in... Pure oddness I guess. – somethinghere Sep 21 '15 at 13:50
  • @somethinghere objects **do** allow CSS it's just that the CSS of the object contents and the CSS of the parent document are separate. – Robert Longson Sep 21 '15 at 17:49
  • @robertlongson for all intents and purposes, css styling of the object itself (and its children) is therefor not possible. I agree, but only in somuch that iframes can have separate styling. – somethinghere Sep 21 '15 at 17:52

0 Answers0