How to use SVG file as custom cursor on macOS browsers (working on Windows)?-CodePudding

I'm trying to use an SVG custom cursor and it actually display successfully using browsers on Windows platform. But when loading the same page, CSS and SVG on macOS browsers, it just will display the default cursor instead of my SVG. Here is the CSS I'm using:

cursor: url(https://judymazzotti.com/wp-content/uploads/2022/12/heel_single.svg), auto;

The SVG I'm using is this one, as you can see from the code.
I loaded a code snippet below to reproduce my code.

html, body {
    cursor: url(https://judymazzotti.com/wp-content/uploads/2022/12/heel_single.svg), auto;
}

<html>
<body>
move your mouse here
</body>
</html>

I also noticed that this codepen taken from a guide loads SVG cursor on Safari browser on macOS, but not on Chrome browser on macOS. On Chrome (macOS) it will only load Base64 PNG and PNG.

How can I make my SVG work on macOS based browsers?

CodePudding user response：

The kind of file shouldn't matter, what matters is the size of the file. Make sure it's 32x32 and I guarantee you any file on any browser will work!

This is what MDN says:

While the specification does not limit the cursor image size, user agents commonly restrict them to avoid potential misuse. For example, on Firefox and Chromium cursor images are restricted to 128x128 pixels by default, but it is recommended to limit the cursor image size to 32x32 pixels.