Trying to add a base64 image as a cursor- svg?

[Edrol97]

Hi all,

I'm trying to add an svg sized to 32px by 32px as a cursor pointer alternative in svg. I'm using base64 and have also tried using the path for the file, but the pointer replacement is not showing up. Does anyone have any idea why?

 

[Johna]

Hi there, can you post the code of the SVG file, and the CSS where you're adding the custom cursor.

 

[Zakwan@MTH]

Hey There!
To use an SVG as a custom cursor in your application, you need to apply the correct CSS syntax. Ensure you’re using the following format:

element {
  cursor: url('data:image/svg+xml;base64,[your-base64-encoded-svg]') 16 16, auto;
}

Replace [your-base64-encoded-svg] with the actual Base64-encoded string of your SVG image. The 16 16 specifies the hotspot coordinates within the SVG, which should ideally align with the center of your SVG (e.g., for a 32x32px SVG, use 16 16). If you’re linking to the SVG file directly instead of encoding it, use the path to the file instead of the Base64 string. Ensure the SVG is well-formed, with a defined viewBox, and avoid overly complex code that might not render correctly. It’s also important to check browser compatibility, as not all browsers support SVG cursors. To ensure consistency across browsers, consider adding a fallback like a PNG image and test the cursor in multiple browsers to confirm its functionality.