Can You Animate A Svg "background-image"?

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

Solution 1:

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;
}

<divclass="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:

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

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