CSS Cursor pointer with SVG image

Question

I'm trying to apply a custom cursor pointer with an SVG image but it's not working, instead if I use a png image everything is working fine.

Here's my code.

.container {
  /* not working one */
  cursor: url("/images/icon-cross.svg"), auto;
  /* working one */
  cursor: url("/images/icon-cross.png"), auto;
}

Is there any trick/workaround to make it working also with SVG or it's something which is not supported?

Thanks

UPDATE

Here's the svg code:

 <?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="512px" height="512px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<path d="M443.6,387.1L312.4,255.4l131.5-130c5.4-5.4,5.4-14.2,0-19.6l-37.4-37.6c-2.6-2.6-6.1-4-9.8-4c-3.7,0-7.2,1.5-9.8,4
    L256,197.8L124.9,68.3c-2.6-2.6-6.1-4-9.8-4c-3.7,0-7.2,1.5-9.8,4L68,105.9c-5.4,5.4-5.4,14.2,0,19.6l131.5,130L68.4,387.1
    c-2.6,2.6-4.1,6.1-4.1,9.8c0,3.7,1.4,7.2,4.1,9.8l37.4,37.6c2.7,2.7,6.2,4.1,9.8,4.1c3.5,0,7.1-1.3,9.8-4.1L256,313.1l130.7,131.1
    c2.7,2.7,6.2,4.1,9.8,4.1c3.5,0,7.1-1.3,9.8-4.1l37.4-37.6c2.6-2.6,4.1-6.1,4.1-9.8C447.7,393.2,446.2,389.7,443.6,387.1z"/>
</svg>

what's in the SVG file? Does it have height and width attributes on the root element that are not percentages? — Robert Longson, Aug 30 '17 at 13:51
Possible duplicate of [How to use a svg as the cursor](https://stackoverflow.com/questions/37954356/how-to-use-a-svg-as-the-cursor) — That Brazilian Guy, Oct 02 '17 at 16:34

score 55 · Accepted Answer · edited Jun 21 '23 at 06:16

55

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;

.container {
  width: 50vw;
  height: 50vh;
  background: gold;
  cursor: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 512 512'%3e%3cg transform='rotate(45 256 256)'%3e%3crect id='r' x='16' y='216' width='480' height='80' rx='14'/%3e%3cuse href='%23r' transform='rotate(90 256 256)'/%3e%3c/g%3e%3c/svg%3e") 16 16, pointer;
}

<div class="container"></div>

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

edited Jun 21 '23 at 06:16

Gangula

5,193
4
30
59

answered Aug 30 '17 at 17:43

Sphinxxx

12,484
4
54
84

Thanks! It's working fine! In the fiddle I saw you move the svg inside the CSS, is it the base64 encode? – Alessio Aug 30 '17 at 21:20
2

It's actually not base64 (although that would also be an option). This is the SVG's XML as-is with only a few characters encoded to make it readable while still being valid CSS. This article explains the technique: https://codepen.io/tigt/post/optimizing-svgs-in-data-uris – Sphinxxx Aug 30 '17 at 21:57
2

i just had the same issue. but in my case, the svg was compressed and did not have width & height attribute, only viewBox. once i set those, they were working fine. – honk31 Sep 03 '18 at 16:40
2

Nice example. You might want to add the clampoints x, y, to center the icon though. – Dennis Bauszus Sep 16 '20 at 09:07
@honk31 Thanks! Funnily enough the width/height don't have any affect, but need to be present. – kontur May 12 '21 at 08:27
Handy library, and in-browser utility, to do what @Sphinxxx mentioned: https://npm.runkit.com/mini-svg-data-uri – floer32 Aug 03 '21 at 03:34

score 2 · Answer 2 · answered Mar 12 '22 at 07:30

2

You can also use a Blob URL to insert inside the url function of CSS.

const blob = new Blob([**your SVG String**],{type: 'image/svg+xml'});
const URL = window.URL.createObjectURL(blob);

Now you can use this URL variable and can insert inside the url function of CSS to obtain desired cursor pointer.

answered Mar 12 '22 at 07:30

Gautam Arora

35
4

Could you do a demo of your answer? The relationship between JavaScript and CSS is not clear to me. I tried your answer using the jsFiddle example posted by Sphinxx above. [Here is the (non-working) jsFiddle with your code idea](https://jsfiddle.net/sfjyvd0a/). – cssyphus Dec 13 '22 at 16:08
You can see a demo here https://github.com/Gautam-Arora24/nixty – Gautam Arora Dec 13 '22 at 20:14
I did not see the demo to which you are referring -- I examined all the files in your nixty repo but did not see anything similar to what I was expecting. Please consider modifying the jsFiddle that I linked in my comment, and then posting that modified (fixed) jsFiddle into your answer so that future readers will see the solution and upvote your answer. *(Please use an SVG image very different from anything in this answer thread so that readers will clearly see and understand your method.)* – cssyphus Dec 13 '22 at 21:38

CSS Cursor pointer with SVG image

2 Answers2

Linked