2

I have an issue with this css.
I tried both auto and default but still I see the default cursor.

cursor: url('img/extra/arrow-next.svg'), auto;
cursor: url('img/extra/arrow-next.svg'), default;

Anyone has the same problem or am I doing something wrong?

Federico
  • 1,392
  • 1
  • 17
  • 40

1 Answers1

13

You probably didn't specify the height and width of your SVG file. Therefore, your browser can't use it as a cursor. In order to use this SVG file as a cursor, open it in a text-editor and change it to something similar to this:

<svg height="20" width="20"> ... </svg>

When this is changed, this CSS code should do the trick:

cursor: url('img/extra/arrow-next.svg'), auto;

Thomas van Broekhoven
  • 858
  • 7
  • 18
  • 1
    Thanks so much @Thomas van Broekhoven. It works now! – Federico Oct 12 '17 at 12:18
  • It's funny - this does work, but it took me a while to find the answer and after all that, even SVG cursors are rendered at 1x and don't look super slick on hdpi screens. Looks exactly the same as my 1x PNG solution. – squarecandy Sep 18 '20 at 18:31