Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,706
    Thanks
    6
    Thanked 1,011 Times in 984 Posts

    change SVG fill color with CSS when embedded as background image

    I’ve been experimenting with using SVG lately and it makes a pretty good impression but there is one thing about which I’m stumped: it seems to be impossible to change the fill color (or any styles?) on images that are embedded as background images.

    Let’s take this example:
    Code:
    <div style="background: url(image.svg) no-repeat;background-size: 14px 14px;width: 14px; height: 14px;"></div>
    The SVG looks like this:
    Code:
    <?xml version="1.0" encoding="utf-8"?>
    <?xml-stylesheet type="text/css" href="svg.css" ?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    <svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" height="50" width="50" class="icon" id="info">
      <g>
        <path d="M 25,50q-5.078,0 -9.717-1.978t-7.983-5.322t-5.322-7.983t-1.978-9.717t 1.978-9.717t 5.322-7.983t 7.983-5.322t 9.717-1.978t 9.717,1.978t 7.983,5.322t 5.322,7.983t 1.978,9.717t-1.978,9.717t-5.322,7.983t-7.983,5.322t-9.717,1.978zM 26.563,6.25q-1.953,0 -3.32,1.367t-1.367,3.296t 1.367,3.32t 3.32,1.392t 3.32-1.392t 1.367-3.32 t-1.367-3.296t-3.32-1.367zM 32.861,32.129q-2.93,3.076 -4.297,3.979t-2.686,0.903q-0.732,0 -1.245-0.659t-0.513-1.685q0-2.1 4.004-15.918l-7.568-1.416q-4.932,12.158 -4.932,19.043q0,3.174 1.514,5.273t 3.711,2.1q 3.955,0 12.012-7.91l0-3.711 z"></path>
      </g>
    </svg>
    and there is a stylesheet for the SVG containing .icon {fill: green;}

    When I open the SVG directly in the browser the fill is applied accordingly but embedded as background image it isn’t. Why is that and how can I make it work?

  • #2
    Senior Coder
    Join Date
    Sep 2010
    Posts
    2,049
    Thanks
    15
    Thanked 241 Times in 241 Posts
    I think you may be a victim of the very confusing way that the word 'fill' is used in graphics. Here's code for a little .svg that I experimented with, as you can see style statements can be applied to both the .svg and it contents.
    Code:
    <?xml version="1.0" standalone="no"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" 
    width="420" height="280" style="background: aqua;"
    >
      <rect
      x="55"
      y="55"
      rx="20"
      ry="20"
      width="300"
      height="160"
      style="fill:tan;stroke:darkblue;stroke-width:5;"
      />
    </svg>
    You may need to set a background for the .svg.
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.

  • #3
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,706
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    No, what I mean is that I can’t change the style of the SVG from an external stylesheet when the image is embedded as background image somewhere, I have to do it from within the SVG file for some reason.

    I can apply the fill to the <svg> element like <svg fill="red"> or <svg style="fill: red;"> but I can’t from another stylesheet when the image is set as CSS background. Why is that?

  • #4
    Senior Coder
    Join Date
    Sep 2010
    Posts
    2,049
    Thanks
    15
    Thanked 241 Times in 241 Posts
    I think you have to use the standard XML methods for communicating to change it.

    The XMLHttpRequest, and all that stuff.
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.

  • #5
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,306
    Thanks
    29
    Thanked 277 Times in 271 Posts
    Quote Originally Posted by VIPStephan View Post
    When I open the SVG directly in the browser the fill is applied accordingly but embedded as background image it isn’t. Why is that and how can I make it work?
    Apparently, SVG-based external CSS isn't implemented in Blink- or Gecko-based browsers for SVG images displayed via img elements or CSS. There doesn't appear to be a bug filed on the issue, open or closed, in Bugzilla@Mozilla.

    SVG-based external CSS is implemented in Trident. However, IE10's implementation is buggy: the images load fine initially, but as soon as you hit the refresh button, the external style sheets are unloaded.

    You could opt to use embedded CSS or markup attributes to fix the problem in Blink and Gecko. However, another IE10 bug makes SVG-based CSS backgrounds unusable. IE10's implementation of the background-size property is bugged when applied to SVG-based background images: the images scale based on the size of their container element when you specify a fixed background size. That causes the image to initially appear the wrong size and to change sizes when you resize the window, for example.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #6
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,306
    Thanks
    29
    Thanked 277 Times in 271 Posts
    Quote Originally Posted by VIPStephan View Post
    Code:
    <?xml version="1.0" encoding="utf-8"?>
    <?xml-stylesheet type="text/css" href="svg.css" ?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    <svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" height="50" width="50" class="icon" id="info">
    Also, I would scrap the document type declaration. From the SVG 1.1 spec:

    In particular, DTDs do not handle namespaces gracefully. It is not recommended that a DOCTYPE declaration be included in SVG documents.
    You can specify the SVG version via the version and baseProfile attributes. Here, you would simply use version="1.1". (The SVG spec recommends using the version attribute. I have no clue what's supposed to happen when you don't though.)
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •