Can you animate a svg "background-image"?

Question

I want to center a svg-image horzontal and vertical responsive to my window. So I decided to integrate the image in a div background. Now when i want to add stroke-dasharray's and animations with stroke-dashoffset to my svg it doesn't work.

Is this posibble to animate a svg background image?

The svg-image consists only out of many lines. Here my svg file (there are much more lines with only different x and y values):

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1920 1200"  xml:space="preserve">
<g id="Layer_1">

<line class="path" stroke-linecap="round" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-miterlimit="10" x1="960" y1="600" x2="2346.139" y2="-42.064"/>

</g>
</svg>

And here my Html and Css files:

html, body {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
  background-color: red;
}

.Container {
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background-image: url(Space.svg);
  background-size: cover;
  background-position: center;
}


.path {
  stroke-dasharray: 20;
}

  <body>
    <div class="Container">
    </div>
  </body>

This is worth a look https://github.com/jrummyapps/AnimatedSvgView — Jon Goodwin, Jan 29 '17 at 23:42
/search?q=svg+animate+transform or /search?p=svg+animate+transform did you search ? :) — G-Cyrillus, Jan 29 '17 at 23:47
You must put the CSS in the SVG image file itself and not in the container HTML file or a separate CSS file. — Robert Longson, Jan 30 '17 at 07:07
I don't see any attempt to animate anything in the question so I can't really create an answer showing you what to do as I don't really know what it is you're trying to do. — Robert Longson, Jan 30 '17 at 07:10
Its very much possible to animate SVG background. This website http://myapic.com does an awesome job with the animation — BiJ, Sep 18 '17 at 06:18

Ruskin · Accepted Answer · 2019-05-15T03:58:50.193

35

You can animate ... but only in browsers that support it - out you go IE and some other browsers (Edit, as of 2018 Edge now supports this).

This example uses CSS for the animation ... I have successfully used <animate> tags but have not tested extensively.

.svg {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg width='300' height='70' viewBox='0 0 300 70' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle type='text/css'%3E %23a%7Banimation:x .5s ease alternate 14%7D%40keyframes x%7Bfrom%7Bfill:%23c2c2c2%7Dto%7Bfill:%23fff%7D%7D%3C/style%3E%3Crect id='a' x='14' y='23' width='28' height='28' fill='%23c2c2c2' /%3E%3Crect x='52' y='33' width='100' height='11' fill='%23c2c2c2' /%3E%3C/svg%3E");
  background-repeat: no-repeat;
  min-height: 200px;
}

<div class="svg">Look at my background</div>

Note the actual encoded SVG used above (that I have used in production for an inline UX improvement for a slow-loading google recaptcha iframe) is:

<svg width="300" height="70" viewBox="0 0 300 70" xmlns="http://www.w3.org/2000/svg">
    <style type="text/css">
        #a { animation: x .5s ease alternate 14; }

        @keyframes x {
           from { fill: #000; }
             to { fill: #fff; }
        }
    </style>
    <rect id="a" x="14" y="23" width="28" height="28" fill="#000" />
    <rect x="52" y="33" width="100" height="11" fill="#000" />
</svg>

edited May 15 '19 at 03:58

answered Jan 30 '17 at 12:16

Ruskin

5,721
4
45
62

1

Ok cool. It works now, thanks. So my fault was that i tried to animate it in the css file, but you wrote the "style" into the image code. I actually didn't know that you could do that. But is there a way to control the animation from outside, so for example when you click a button the animation should start/stop? – 5rsly Jan 30 '17 at 18:56
1

Not with a background image ... an alternative would be to swap a class that has a bg with a non-animated version of the image ... the css will gzip very well. – Ruskin Jan 30 '17 at 20:21
you could try SVG-SMIL animation ... but that does not work in IE or Edge either. – Ruskin Apr 19 '17 at 13:30
8

Anyone interested, I used my tool at https://codepen.io/elliz/pen/ygvgay to encode the SVG into CSS. – Ruskin Oct 30 '17 at 02:14
2

Works great, thank you for the answer and for the encoding tool, really pro tool. – EPurpl3 Apr 03 '19 at 15:58
This is another [tool for encoding SVG to CSS (with live preview)](https://yoksel.github.io/url-encoder/) – Numb Erc Jan 23 '21 at 04:30

Can you animate a svg "background-image"?

1 Answers1

Linked