I would like to use an URL-encoded SVG for a custom cursor, but it isn't displayed. Its dimensions are 128×128 pixels, so the dimensions shouldn't be the problem here. To check, if the URL-encoded image code is valid, I used it as a CSS background image: if used as a background, it's working! What's the issue here?
div {
width: 50%;
height: 100px;
}
div:nth-child(1) {
background: #abcabc;
cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 128 128'%3E%3Cg fill='none' stroke='%23000' stroke-width='3.374' stroke-linejoin='round'%3E%3Cpath d='M41.6 86.7L36.4 71c-1.2-3.4.7-7.2 4.2-8.4l1.7-.6c3.4-1.2 7.2.7 8.4 4.2l6.5 19.4v-73c0-3.5 2.9-6.5 6.5-6.5h.9c3.5 0 6.5 2.9 6.5 6.5v47.2-13c0-3.5 2.9-6.5 6.5-6.5h.9c3.5 0 6.5 2.9 6.5 6.5v15.9-10.1c0-3.5 2.9-6.5 6.5-6.5h.5c3.5 0 6.5 2.9 6.5 6.5v13-6.5c0-3.5 2.9-6.5 6.5-6.5h.9c3.5 0 6.1 1.7 6.5 6.5s1.1 17.2.7 23.9c-1.5 24.1-11.4 32.2-18.1 35.6-10.1 5.2-22.4 3.5-33.3-.5-14.3-5.3-18.5-26.4-20.1-31.4z' stroke-miterlimit='10'/%3E%3Cpath d='M18.4 13.4h25.5' stroke-linecap='round'/%3E%3C/g%3E%3Cpath d='M4.6 13.4l19.5 7.9-4.6-7.9 4.6-8z'/%3E%3Cpath d='M84.1 13.4h25.5' fill='none' stroke='%23000' stroke-width='3.374' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M123.4 13.4l-19.5 7.9 4.6-7.9-4.6-8z'/%3E%3C/svg%3E") 24 24, auto;
}
div:nth-child(2) {
float: left;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 128'%3E%3Cg fill='none' stroke='%23000' stroke-width='3.374' stroke-linejoin='round'%3E%3Cpath d='M41.6 86.7L36.4 71c-1.2-3.4.7-7.2 4.2-8.4l1.7-.6c3.4-1.2 7.2.7 8.4 4.2l6.5 19.4v-73c0-3.5 2.9-6.5 6.5-6.5h.9c3.5 0 6.5 2.9 6.5 6.5v47.2-13c0-3.5 2.9-6.5 6.5-6.5h.9c3.5 0 6.5 2.9 6.5 6.5v15.9-10.1c0-3.5 2.9-6.5 6.5-6.5h.5c3.5 0 6.5 2.9 6.5 6.5v13-6.5c0-3.5 2.9-6.5 6.5-6.5h.9c3.5 0 6.1 1.7 6.5 6.5s1.1 17.2.7 23.9c-1.5 24.1-11.4 32.2-18.1 35.6-10.1 5.2-22.4 3.5-33.3-.5-14.3-5.3-18.5-26.4-20.1-31.4z' stroke-miterlimit='10'/%3E%3Cpath d='M18.4 13.4h25.5' stroke-linecap='round'/%3E%3C/g%3E%3Cpath d='M4.6 13.4l19.5 7.9-4.6-7.9 4.6-8z'/%3E%3Cpath d='M84.1 13.4h25.5' fill='none' stroke='%23000' stroke-width='3.374' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M123.4 13.4l-19.5 7.9 4.6-7.9-4.6-8z'/%3E%3C/svg%3E");
}<div>cursor should be a custom SVG when hovering over this DIV</div>
<div></div>