CSS Cursor Pointer with Svg Image

CSS Cursor pointer with SVG image

Your image is simply too large. Reduce the width and height to something less than 128px.

Icon size limits for cursors in CSS | MDN

...the limit of the cursor size is 128×128px. Larger cursor images are ignored.

Example:

cursor: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' ...") 16 16, pointer;

https://jsfiddle.net/bx4og7n5/

Edit: Added hotspot (center coordinates) for the cursor (see Dennis Bauszus' comment)

Cursor: pointer; on svg element is not working

As AmeliaBR's comment indicates, you should add this style inside the SVG <object>.

And unless your SVG is very simple, you may have the same issue I had: only seeing a pointer when you are hovering over one of the shapes in the SVG, but not when you're between shapes.

(In some cases you might want that behavior, but for a wordmark, for example, you typically want the whole rectangle to be clickable, not just the individual letters.)

To make the whole rectangle clickable, add svg { cursor: pointer; }. If you just want specific elements clickable, name them by class:

<svg ...>
  <style>
    svg { cursor: pointer; } /* whole rectangle */

    /* OR */

    .element-name { cursor: pointer; } /* specific elements */
  </style>
  ...
</svg>

How to reference inline svg as cursor in css style?

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>