Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Animated SVG not working

  • 9 replies
  • 1 has this problem
  • 3 views
  • Last reply by waffs

more options

Animated SVG not working:

https://codepen.io/Wpitallo/pen/dmOvjO

Works in chrome

Animated SVG not working: https://codepen.io/Wpitallo/pen/dmOvjO Works in chrome

Chosen solution

I tried the image with base64 encoding and that works for me, so this might be an issue with "#" symbols in the code that are known to cause issues with data URIs.

background: url("data:image/svg+xml;utf8;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0MDAnIGhlaWdodD0nNDAwJyB2aWV3Qm94PScwIDAgNDQgNDQnIHN0cm9rZT0nI2ZmZic+PGcgZmlsbD0nbm9uZScgZmlsbC1ydWxlPSdldmVub2RkJyBzdHJva2Utd2lkdGg9JzEnPiA8Y2lyY2xlIGN4PScyMicgY3k9JzIyJyByPScxNy45MzMxJz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSdyJyBiZWdpbj0nMHMnIGR1cj0nMS44cycgdmFsdWVzPScxOyAyMCcgY2FsY01vZGU9J3NwbGluZScga2V5VGltZXM9JzA7IDEnIGtleVNwbGluZXM9JzAuMTY1LCAwLjg0LCAwLjQ0LCAxJyByZXBlYXRDb3VudD0naW5kZWZpbml0ZScvPjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9J3N0cm9rZS1vcGFjaXR5JyBiZWdpbj0nMHMnIGR1cj0nMS44cycgdmFsdWVzPScxOyAwJyBjYWxjTW9kZT0nc3BsaW5lJyBrZXlUaW1lcz0nMDsgMScga2V5U3BsaW5lcz0nMC4zLCAwLjYxLCAwLjM1NSwgMScgcmVwZWF0Q291bnQ9J2luZGVmaW5pdGUnLz48L2NpcmNsZT4gPGNpcmNsZSBjeD0nMjInIGN5PScyMicgcj0nMTkuOTkzNCc+PGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ncicgYmVnaW49Jy0wLjlzJyBkdXI9JzEuOHMnIHZhbHVlcz0nMTsgMjAnIGNhbGNNb2RlPSdzcGxpbmUnIGtleVRpbWVzPScwOyAxJyBrZXlTcGxpbmVzPScwLjE2NSwgMC44NCwgMC40NCwgMScgcmVwZWF0Q291bnQ9J2luZGVmaW5pdGUnLz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSdzdHJva2Utb3BhY2l0eScgYmVnaW49Jy0wLjlzJyBkdXI9JzEuOHMnIHZhbHVlcz0nMTsgMCcgY2FsY01vZGU9J3NwbGluZScga2V5VGltZXM9JzA7IDEnIGtleVNwbGluZXM9JzAuMywgMC42MSwgMC4zNTUsIDEnIHJlcGVhdENvdW50PSdpbmRlZmluaXRlJy8+IDwvY2lyY2xlPjwvZz48L3N2Zz4=");

background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 44 44' stroke='%23fff'><g fill='none' fill-rule='evenodd' stroke-width='1'> <circle cx='22' cy='22' r='17.9331'><animate attributeName='r' begin='0s' dur='1.8s' values='1; 20' calcMode='spline' keyTimes='0; 1' keySplines='0.165, 0.84, 0.44, 1' repeatCount='indefinite'/><animate attributeName='stroke-opacity' begin='0s' dur='1.8s' values='1; 0' calcMode='spline' keyTimes='0; 1' keySplines='0.3, 0.61, 0.355, 1' repeatCount='indefinite'/></circle> <circle cx='22' cy='22' r='19.9934'><animate attributeName='r' begin='-0.9s' dur='1.8s' values='1; 20' calcMode='spline' keyTimes='0; 1' keySplines='0.165, 0.84, 0.44, 1' repeatCount='indefinite'/><animate attributeName='stroke-opacity' begin='-0.9s' dur='1.8s' values='1; 0' calcMode='spline' keyTimes='0; 1' keySplines='0.3, 0.61, 0.355, 1' repeatCount='indefinite'/> </circle></g></svg>");
Read this answer in context 👍 1

All Replies (9)

more options

Did you take a screen of the error in FF?

more options
more options
more options

I am showing you as there are no errors.

That error is a codepen issue, there are no other validation issues with the error that I am showing you.

more options

get rid of this color="#111" it will work fine, you can define color there

Please let us know if this solved your issue or if need further assistance.

more options

Sorry, ignore that error, that is an error with codepen. That has nothing to do with the error that I am illustrating.

If you open this link in chrome you will see an animated svg, in firefox nothing:

https://codepen.io/Wpitallo/debug/dmOvjO
more options

it has nothing to do with color="#111"

more options

Chosen Solution

I tried the image with base64 encoding and that works for me, so this might be an issue with "#" symbols in the code that are known to cause issues with data URIs.

background: url("data:image/svg+xml;utf8;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0MDAnIGhlaWdodD0nNDAwJyB2aWV3Qm94PScwIDAgNDQgNDQnIHN0cm9rZT0nI2ZmZic+PGcgZmlsbD0nbm9uZScgZmlsbC1ydWxlPSdldmVub2RkJyBzdHJva2Utd2lkdGg9JzEnPiA8Y2lyY2xlIGN4PScyMicgY3k9JzIyJyByPScxNy45MzMxJz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSdyJyBiZWdpbj0nMHMnIGR1cj0nMS44cycgdmFsdWVzPScxOyAyMCcgY2FsY01vZGU9J3NwbGluZScga2V5VGltZXM9JzA7IDEnIGtleVNwbGluZXM9JzAuMTY1LCAwLjg0LCAwLjQ0LCAxJyByZXBlYXRDb3VudD0naW5kZWZpbml0ZScvPjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9J3N0cm9rZS1vcGFjaXR5JyBiZWdpbj0nMHMnIGR1cj0nMS44cycgdmFsdWVzPScxOyAwJyBjYWxjTW9kZT0nc3BsaW5lJyBrZXlUaW1lcz0nMDsgMScga2V5U3BsaW5lcz0nMC4zLCAwLjYxLCAwLjM1NSwgMScgcmVwZWF0Q291bnQ9J2luZGVmaW5pdGUnLz48L2NpcmNsZT4gPGNpcmNsZSBjeD0nMjInIGN5PScyMicgcj0nMTkuOTkzNCc+PGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ncicgYmVnaW49Jy0wLjlzJyBkdXI9JzEuOHMnIHZhbHVlcz0nMTsgMjAnIGNhbGNNb2RlPSdzcGxpbmUnIGtleVRpbWVzPScwOyAxJyBrZXlTcGxpbmVzPScwLjE2NSwgMC44NCwgMC40NCwgMScgcmVwZWF0Q291bnQ9J2luZGVmaW5pdGUnLz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSdzdHJva2Utb3BhY2l0eScgYmVnaW49Jy0wLjlzJyBkdXI9JzEuOHMnIHZhbHVlcz0nMTsgMCcgY2FsY01vZGU9J3NwbGluZScga2V5VGltZXM9JzA7IDEnIGtleVNwbGluZXM9JzAuMywgMC42MSwgMC4zNTUsIDEnIHJlcGVhdENvdW50PSdpbmRlZmluaXRlJy8+IDwvY2lyY2xlPjwvZz48L3N2Zz4=");

background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 44 44' stroke='%23fff'><g fill='none' fill-rule='evenodd' stroke-width='1'> <circle cx='22' cy='22' r='17.9331'><animate attributeName='r' begin='0s' dur='1.8s' values='1; 20' calcMode='spline' keyTimes='0; 1' keySplines='0.165, 0.84, 0.44, 1' repeatCount='indefinite'/><animate attributeName='stroke-opacity' begin='0s' dur='1.8s' values='1; 0' calcMode='spline' keyTimes='0; 1' keySplines='0.3, 0.61, 0.355, 1' repeatCount='indefinite'/></circle> <circle cx='22' cy='22' r='19.9934'><animate attributeName='r' begin='-0.9s' dur='1.8s' values='1; 20' calcMode='spline' keyTimes='0; 1' keySplines='0.165, 0.84, 0.44, 1' repeatCount='indefinite'/><animate attributeName='stroke-opacity' begin='-0.9s' dur='1.8s' values='1; 0' calcMode='spline' keyTimes='0; 1' keySplines='0.3, 0.61, 0.355, 1' repeatCount='indefinite'/> </circle></g></svg>");

Modified by cor-el

more options

Awesome that worked thank you :)