The cursor from the SVG picture is rasterized

4

Some points to consider:

  • Your project doesn’t use an SVG, it uses a GIF
  • Your cursor code isn’t correct, it needs to define a hotspot and a callback:
    element.style.cursor = "url('http://bringerp.free.fr/Files/RotMG/cursor.gif') 0 0, pointer";
  • The SVG variant can work. You can either add this as CSS (with an !important directive) or if you are going to do it the JavaScript route you just need to make sure you properly quote and escape the code… here’s an example (notice the ticks for the url are escaped to \' since the entire value uses single quotes):
    element.style.cursor = 'url(\'data:image/svg+xml;utf8,<svg fill="%23FF0000" height="100" viewBox="0 0 24 24" width="100" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>\') 24 24, auto';
  • From searching around the internet, it appears that SVG cursors in all major browsers are rendered at a @1x resolution so they will not look entirely sharp on retina displays.
2 Likes