How to use a svg as the cursor

Question

Im trying to use a svg image as the cursor when hovering over a certain div but I cant get it working. Ive read that it should be as simple as adding this :

cursor: url(http://elusivethemes.com/assets/down.svg), auto;

But it wont seem to work. The strange thing is it works if i use a different svg image from a different url.

Any ideas ?

Thanks in advance.

Answer 1

According to the Mozilla Developer Network

Starting with Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1), Gecko also supports the SVG image format for cursors. However, the SVG image must contain a length-valued (not percentage-valued) height and width on its root SVG node. JavaScript, CSS animation, and declarative SMIL inside an SVG image are ignored; you can't use SVG to create an animated cursor, for example.

Therefore, you should explicitly declare the height and width in your .svg file.

The .svg you provided has no dimensions declared as you can see:

<svg xmlns="http://www.w3.org/2000/svg" id="Capa_1" viewBox="0 0 320.995 320.995" x="0px" y="0px" height="200" xmlns:xml="http://www.w3.org/XML/1998/namespace" xml:space="preserve" viewbox="0 0 320.995 320.995" version="1.1">

If you add the width and height attributes, you should be fine.
Just make sure you don't declare the dimensions with percentages