Search code examples
cssgoogle-chromemouse-cursor

Cursor .svg not working in Chrome 61.0.3163.100

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?

Solution

  • 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;