Use SVG sprite as mouse cursor

Question

I have an SVG sprite:

      <svg xmlns="http://www.w3.org/2000/svg" style="display:none;">
        <symbol id="ailMouseIco" viewBox="0 0 51.2 76.5">
          <path fill="#FFF" stroke="#000" stroke-width="3" d="M47.5 48.6l-46-45v62l14-13 10 22 10-4-10-22h22z"/>
        </symbol>
      </svg>

Elsewhere, I use that sprite as follows:

          <svg width="30" height="30">
            <use xlink:href="#ailMouseIco"></use>
          </svg>

I need to use this sprite as a mouse cursor (CSS).

I've tried:

html *, html:hover {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3E%3Cuse xlink:href='%23ailMouseIco'%3E%3C/use%3E%3C/svg%3E"),default !important;
}

and

html *, html:hover {
    cursor: url("#ailMouseIco"),default !important;
}

and several other, similar options, but no joy.

Any ideas?

You can't use external references in a cursor so you'd have to inline the sprite instead of using a use element. — Robert Longson, Mar 07 '23 at 13:24
Does this answer your question? [CSS Cursor pointer with SVG image](https://stackoverflow.com/questions/45962081/css-cursor-pointer-with-svg-image) — 0stone0, Mar 07 '23 at 13:27
@RobertLongson so I'll need to repeat the SVG - once for the button to activate the cursor, once for the cursor itself? It's a shame, but at least it's a relatively tiny svg (195b). Still, it makes the code more unwieldy. I figured since I can refer to an external svg URL, I should be able to refer to an svg sprite, no? — nagumi, Mar 07 '23 at 13:34
@0stone0 Afraid not - that one is for embedding svg's - I'm looking to use an svg sprite. Thanks! — nagumi, Mar 07 '23 at 13:34

Yziaf_07 · Answer 1 · 2023-03-07T13:54:19.913

0

#ailMouseIco:hover{
 cursor: url(‘path-to-image.svg’), auto;
}

Try this one

edited Mar 07 '23 at 13:54

answered Mar 07 '23 at 13:53

Yziaf_07

7
2
6

This does not work when referencing a sprite: – nagumi Mar 07 '23 at 15:02

score 0 · Accepted Answer · answered Mar 07 '23 at 16:33

As pointed out by Robert Longson:
you can neither use external file nor inlined <defs> or <symbol>s references in a data URI.

Workaround: You can save your cursor sprite in an external svg file.

But you also need to add a visible/rendered <use> element referencing the cursor <symbol>.
Otherwise the cursor won't show up:

External svg file: cursor.svg

<svg xmlns="http://www.w3.org/2000/svg" width='32' height='32' viewBox="0 0 51.2 76.5">
  <symbol id="ailMouseIco" viewBox="0 0 51.2 76.5">
    <path fill="#FFF" stroke="#000" stroke-width="3" d="M47.5 48.6l-46-45v62l14-13 10 22 10-4-10-22h22z" />
  </symbol>
  <!-- cursor icon needs rendered use istance-->
  <use id="useCursor" href="#ailMouseIco" />
</svg>

Css:

html,
body {
    height: 100%;
    width: 100%;
    background: #eee;
    cursor: url("cursor.svg") 16 16, default;
}

HTML usage

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.2 76.5" width="30" height="30">
    <use href="cursor.svg#ailMouseIco"></use>
</svg>

Your svg needs to be hosted on same domain - otherwise CORS rules will prevent the svg from loading/rendering.

score 0 · Answer 3 · answered Mar 07 '23 at 18:42

Just adapt your SVG to url syntax...

div {
  margin : 1em;
  width  : 20em;
  height : 10em;
  background : lightgreen;
  cursor : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='52px' height='76px' viewbox='0 0 51.2 76.5'%3E%3Cpath fill='%23FFF' stroke='%23000' stroke-width='3' d='M47.5 48.6l-46-45v62l14-13 10 22 10-4-10-22h22z'/%3E%3C/svg%3E") 3 3, pointer;
}

<div></div>

score 0 · Answer 4 · answered Mar 08 '23 at 07:55

Modern browsers need less escaping, you only need to

escape all # with %23
replace all " with a single-quote
no need for old xlink notation either

The inline SO snippet won't run it properly;

div {
  margin : 1em;
  width  : 20em;
  height : 10em;
  background : lightgreen;
  cursor : url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='52px' height='76px' viewbox='0 0 51.2 76.5' style='background:red'><path fill='%23FFF' stroke='%23000' stroke-width='3' d='M47.5 48.6l-46-45v62l14-13 10 22 10-4-10-22h22z'/></svg>") 3 3, pointer;
}

<div></div>

Use SVG sprite as mouse cursor

4 Answers4

External svg file: cursor.svg

Css:

HTML usage