SVG cursors

Daniel Holbert wrote a while ago in svg-as-image that you can use SVG in many new places in Firefox 4. Did you realise that that means that you can use SVG for cursors too?

For an SVG cursor it’s as simple as:

cursor: url(cursor1.svg) , auto;

Browsers that don’t understand SVG cursors should fall back to the non-URL value.

One caveat is that the SVG image must contain a length-valued (not percentage-valued) height and width on its root SVG node. The usual SVG as an image restrictions apply but animation will work so spectacular things should be possible.

For more information see the newly updated MDN article: Using_URL_values_for_the_cursor_property


5 responses to this post.

  1. Great to see this work without any extra effort!

  2. Posted by Huns Warst on December 17, 2010 at 1:09 am

    What about animation using SMIL? 🙂

  3. Why does SVG animation work when GIF animation does not?

    • I don’t know why GIF animation doesn’t work. SMIL animation works in a completely different way though, the SMIL animation controller is notified whenever an xml or html document is loaded by whatever means and controls the animation.

Comments are closed.

%d bloggers like this: