How to reference inline svg as cursor in css style?

Question

how to reference an inline svg as cursor?

In the code attach, first cursor declaration \"cursor:pointer\" an second (png) works without problems.

Third decl

Answer 1

It works once I cleaned up the syntax a little i.e. the extraneous brackets and semicolons.

The cursor is the one you provided.

.boton {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23FF0000" height="48" viewBox="0 0 24 24" width="48"><path d="M0 0h24v24H0z" fill="none"/><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>'), auto;
}

<?xml version='1.0' encoding='UTF-8'?>
<svg version='1.1' id='project' xmlns='http://www.w3.org/2000/svg'
                                xmlns:xlink='http://www.w3.org/1999/xlink'
>

<rect class="boton" width="100%" height="100%" fill="blue"/>   
</svg>