7

In my case, I have a background-image that's set to repeat x. I was wondering if the background-image could be a svg, and if so, is there a way to control it's nodes via css or javascript?

I have been using the SVGInjection to animate svg images that are inserted with tag, but I haven't been able to find a way to do the same thing when the svg is a background-image.

2 Answers2

1

You can embed it as a background image, for sure, so long as the SVG is kept in a separate file in your file system (edit: or as others have pointed out, as some variation of a data url) and referenced the same way you would any other image format. But SVG isn't really an image format, it's more an XML/script hybrid.

So – nope, it's not possible to control its nodes, and that's a really good thing.

Basically, you can't modify any SVG which isn't embedded on the page (unless its embedded in another page which in turn is then embedded in your page provided it is the same domain), and if you could you'd be opening any domain which allowed that file type to a massive XSS security vulnerability, as the SVG spec allows for script tags to be embedded.

  1. img
  2. image
  3. background-image
  4. content (for pseudos)
Josh Burgess
  • 9,327
  • 33
  • 46
  • 1
    So is there a way to embedded it inside background-image? –  Dec 04 '14 at 22:27
  • @gdaniel – Sure, just like any other image. Either `style="background-image: url(path/to/file.svg);` on the HTML Element or `#my-element { background-image: url(path/to/file.svg);` in your CSS. – Josh Burgess Dec 04 '14 at 22:29
  • It looks like there a way after all -> http://www.svgeneration.com/generate/Steel They use javascript + css + base64 converter to change the svg styles on the fly. –  Dec 04 '14 at 22:32
  • @gdaniel – Haha, not quite the same thing. That's not going to render an `SVG` whose nodes can be manipulated, and all you would be doing is cycling one entirely new `SVG` file for another. Performance, I suspect, would be painfully slow for anything that wasn't very straightforward, as this is essentially a dynamically building animated `.gif` for `SVG` files. Bad idea, in my opinion. – Josh Burgess Dec 04 '14 at 22:35
  • 1
    Good point. It's not exactly the same thing, but it's better than nothing. The only part that might be slow is converting the code to base64 everytime you make a change. –  Dec 04 '14 at 22:38
  • SMIL works fine in SVG as an image in browsers that support SMIL provided the SMIL is not interactive. Non-interactive animations are OK too. You can also modify an SVG that is not embedded in the page if it is loaded via an ` – Robert Longson Dec 04 '14 at 23:48
0

My understanding is this ... background images CAN be SVG if they are loaded from a file, not embedded in the page.

To change the background via JS or CSS, you would have to have access to an embedded version.

There is a means of doing this ...

body { background-image: 
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><linearGradient id='gradient'><stop offset='10%' stop-color='%23F00'/><stop offset='90%' stop-color='%23fcc'/> </linearGradient><rect fill='url(%23gradient)' x='0' y='0' width='100%' height='100%'/></svg>");
      }

... basically, the URL is a string with the SVG embedded. You would need to create a function to rebuild and make your changes each time it is rebuilt.

rfornal
  • 5,072
  • 5
  • 30
  • 42
  • 1
    I'm not sure if you're aware, but you can actually embed an SVG into your style tag or css file! [Check this out](http://stackoverflow.com/a/10768631/1515890) for an explanation. – Zack Huber Dec 04 '14 at 22:42
  • 2
    I was aware of that (forgot, but aware), but the reload can get very awkward since the URL is essentially a string ... that would have to be rebuilt each time. So I guess I was wrong, IT CAN BE DONE as long as the SVG is recreated each time it changes, but I'm not sure I would want to go this route. – rfornal Dec 04 '14 at 22:45
  • Yeah, I wouldn't use it either, normally, but I had to for an optimizely gig recently. The client provided SVGs and no place to upload them, so they went into the CSS. – Zack Huber Dec 04 '14 at 22:47