Animated SVG not working
Solución elegida
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>");
Modificadas por cor-el el
Todas las respuestas (9)
Did you take a screen of the error in FF?
Have a look at the link:
https://codepen.io/Wpitallo/debug/dmOvjO
You will see the SVG in chrome and not firefox
https://validator.w3.org/nu/?doc=https%3A%2F%2Fcodepen.io%2FWpitallo%2Fdebug%2FdmOvjO
waffs said
Have a look at the link: https://codepen.io/Wpitallo/debug/dmOvjO You will see the SVG in chrome and not firefox https://validator.w3.org/nu/?doc=https%3A%2F%2Fcodepen.io%2FWpitallo%2Fdebug%2FdmOvjO https://jigsaw.w3.org/css-validator/validator?uri=https%3A%2F%2Fcodepen.io%2FWpitallo%2Fdebug%2FdmOvjO&profile=css3svg&usermedium=all&warning=1&vextwarning=&lang=en#errors
So is there a reason you are showing the errors and not fixing them ?
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.
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.
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
it has nothing to do with color="#111"
Solución elegida
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>");
Modificadas por cor-el el
Awesome that worked thank you :)