Welcome to Code Forum!

Join a community that supports you and your coding journey from day one. We strive to be a friendly, supportive community that empowers everyone to be better developers. By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.

    GIF shows where to locate </> in the thread and or post editor toolbar.
    To learn more about how to use our BBCode feature, review our "How to post your code into threads" here.

    Thank you, Code Forum.

How to add an svg cursor?

Edrol97

Edrol97

Silver Coder
Hi,

I think my SVG Code is as follows in xml but haven't changed the url so am wondering if I need to change this to my specific file path. How would I add this to create a custom pointer across my site?

Code: 
<?xml version="1.0" encoding="UTF-8"?>
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12.33 14.67">
  <defs>
    <style>
      .cls-1 {
        fill: #fff;
      }

      .cls-2 {
        opacity: .43;
      }
    </style>
  </defs>
  <g class="cls-2">
    <path d="M12.14,5.34c-.12-.44-.36-.88-.83-1.02-.49-.14-.97.09-1.24.47-.27.37-.41.86-.53,1.3-.14.52-.21,1.05-.25,1.59h1.1c.04-.98.18-3.35-1.39-3.35-.65,0-1.13.55-1.37,1.08-.31.7-.46,1.45-.5,2.22-.04.69,1.06.7,1.1.01.05-.78.18-1.71-.09-2.47-.23-.66-.84-1.09-1.55-1.07-.7.02-1.25.46-1.43,1.11-.11.39-.11.83-.13,1.23-.02.46-.02.91,0,1.37h1.1c-.05-1.22-.1-2.45-.17-3.67-.06-1.1-.18-2.23-.7-3.24C5.02.46,4.64,0,4.09,0c-.54,0-.98.39-1.15.87-.19.53-.1,1.16-.09,1.71.01.61.03,1.22.04,1.83.03,1.37.06,2.74.37,4.09.35-.09.71-.18,1.06-.27-.24-.57-.51-1.14-.81-1.68-.26-.46-.53-.96-.93-1.31-.87-.77-2.21-.59-2.54.57h1.06s-.02-.04-.03-.07C.89,5.22-.05,5.24,0,5.88c.03.38,0,.75.13,1.13.15.47.29.93.47,1.4.34.9.69,1.79,1.03,2.69.35.91.66,1.86,1.07,2.75.2.43.58.57,1.02.68.5.12,1.03.21,1.54.11.37-.07.73-.25.99-.51.12-.12.21-.26.29-.42.08-.17.1-.39.19-.55.13-.22.53.09.69.19.44.29.87.64,1.35.88.86.43,1.63-.03,1.86-.85.1-.35.05-.71.1-1.06.05-.39.36-.5.6-.78.32-.38.41-.89.53-1.36.12-.5.24-1,.33-1.51.19-1.11.23-2.22-.03-3.33-.16-.68-1.21-.4-1.05.28.19.82.18,1.67.05,2.5-.12.81-.29,1.65-.55,2.43-.11.31-.35.43-.56.66-.28.29-.38.66-.42,1.05-.03.27,0,.56-.07.82-.02.06-.05.2-.11.24-.11.08-.34-.13-.43-.19-.64-.42-1.32-1.05-2.11-1.12-.35-.03-.7.08-.94.33-.25.26-.27.59-.42.9-.11.22-.36.33-.61.36-.21.03-.44,0-.64-.05-.15-.03-.51-.05-.62-.16.12.11,0-.13-.02-.17-.04-.1-.08-.21-.12-.31-.08-.21-.16-.41-.24-.62-.16-.41-.32-.82-.48-1.23-.35-.9-.7-1.8-1.05-2.71-.16-.42-.31-.85-.44-1.28-.07-.23-.18-.46-.21-.7-.02-.17.02-.33,0-.5-.36.04-.72.09-1.08.13,0,.02.02.05.03.07.18.48.91.54,1.06,0,.2-.7.9.06,1.1.37.41.64.76,1.34,1.06,2.04.27.63,1.23.42,1.06-.27-.29-1.25-.31-2.53-.34-3.81-.02-.66-.03-1.31-.05-1.97,0-.29-.02-.58-.02-.87,0-.16,0-.43.16-.52.04-.01.02-.02-.04,0,.03.02.06.04.08.07.06.13.15.24.22.37.11.23.2.48.26.72.15.55.2,1.12.24,1.68.08,1.3.12,2.61.18,3.91.03.69,1.13.7,1.1.01-.02-.61-.01-1.22.03-1.83.02-.33.03-.78.45-.82.4-.04.52.28.56.62.06.6,0,1.24-.03,1.84h1.1c.02-.47.11-.95.26-1.41.05-.16.27-.85.52-.82.2.03.22.56.23.7.05.52.06,1.05.04,1.57-.03.7,1.06.7,1.1.01.03-.57.14-1.12.31-1.66.08-.24.16-.46.31-.67.05-.06.06.04-.02-.04.06.06.08.2.1.28.18.68,1.24.4,1.05-.28Z"/>
  </g>
  <g>
    <g>
      <path class="cls-1" d="M3.56,13.35c-.93-2.07-1.79-4.16-2.59-6.29-.11-.29-.22-.59-.23-.9s.1-.65.35-.83c.31-.22.76-.16,1.08.04s.54.54.73.87c.36.61.68,1.24.95,1.9-.27-1.16-.29-2.36-.31-3.54-.01-.93-.03-1.85-.04-2.78,0-.27,0-.55.1-.8s.37-.45.64-.41c.25.04.42.26.55.47.55.96.61,2.11.66,3.21.04,1.1.08,2.21.11,3.31-.02-.63,0-1.25.06-1.88.02-.25.05-.51.18-.74.31-.56,1.24-.61,1.61-.09.23.32.24.73.23,1.12,0,.46-.03.92-.06,1.39.03-.63.18-1.25.42-1.82.19-.45.6-.95,1.07-.81.4.12.52.62.56,1.03.05.54.05,1.08.02,1.62.05-.7.21-1.4.47-2.05.08-.2.17-.39.33-.53s.39-.22.58-.13c.22.1.32.35.37.59.35,1.55-.07,3.15-.49,4.68-.08.28-.16.58-.36.8-.13.14-.31.24-.44.39-.27.32-.24.78-.27,1.19s-.22.9-.63.96c-.26.04-.5-.11-.72-.26-.32-.21-.65-.43-.97-.64-.37-.24-.87-.48-1.21-.2-.24.2-.25.55-.39.83-.19.37-.62.58-1.03.62s-.83-.06-1.24-.17c-.09-.02-.19-.05-.26-.11-.07-.07-.11-.16-.15-.25-.61-1.61-1.22-3.23-1.84-4.84-.31-.82-.62-1.65-.63-2.52"/>
      <path d="M4.01,13.09c-.87-1.93-1.68-3.89-2.43-5.88-.14-.36-.43-.9-.28-1.29.11-.29.42-.23.64-.07.33.24.53.67.73,1.02.25.46.49.93.69,1.42.25.61,1.16.4,1.01-.28-.27-1.2-.27-2.43-.29-3.65,0-.6-.02-1.21-.03-1.81,0-.31-.02-.62-.01-.93,0-.17,0-.39.16-.49.04-.01.03-.01-.03,0,.04.02.08.06.11.1.08.09.13.21.18.32.12.24.2.51.27.77.13.51.17,1.04.2,1.56.06,1.25.1,2.5.13,3.74.02.67,1.06.67,1.04,0-.01-.59,0-1.17.05-1.76.03-.35.06-.76.48-.78.37-.01.48.29.5.61.04.57-.01,1.16-.06,1.73h1.04c.03-.47.13-.93.28-1.38.06-.16.27-.79.52-.76.19.02.2.52.21.65.04.5.04,1,0,1.51-.04.67.99.66,1.04,0,.04-.46.12-.91.26-1.36.09-.28.17-.7.43-.87-.11.07-.04-.15-.01.06,0,.03.03.09.03.11.06.2.09.43.11.64.04.47.03.95-.03,1.41-.11.9-.34,1.81-.61,2.67-.12.38-.46.52-.68.82-.25.34-.3.75-.32,1.16,0,.16,0,.62-.17.72s-.66-.34-.8-.43c-.64-.42-1.49-1.11-2.28-.61-.34.22-.44.57-.58.93-.1.28-.32.43-.63.47-.18.03-.37,0-.54-.02-.11-.02-.23-.05-.34-.07-.07-.02-.26-.03-.32-.08.12.11-.04-.2-.04-.21-.04-.12-.09-.23-.13-.35-.09-.23-.17-.46-.26-.69-.38-1-.76-2-1.14-3s-.81-1.93-.83-2.96c-.02-.67-1.06-.67-1.04,0,.03,1.1.44,2.11.82,3.12.41,1.08.82,2.15,1.22,3.23.1.27.2.54.31.81.1.25.17.55.35.76.33.38,1,.45,1.48.5s1.02-.03,1.43-.32.54-.67.72-1.12c.05-.12.05-.14.19-.12.23.05.44.22.64.34.42.28.85.65,1.34.81s.95.01,1.25-.37c.27-.34.36-.77.38-1.2.01-.19,0-.4.07-.58.08-.21.29-.31.44-.46.37-.36.48-.87.61-1.35.29-1.08.56-2.18.56-3.31,0-.89-.21-2.83-1.59-2.29-.56.22-.78.8-.96,1.33-.21.6-.32,1.23-.37,1.86h1.04c.06-.97.22-3.2-1.26-3.2s-1.78,2.13-1.85,3.18c-.04.67.99.66,1.04,0,.05-.73.18-1.59-.03-2.3-.2-.66-.76-1.1-1.46-1.09s-1.24.44-1.42,1.08c-.11.38-.12.81-.14,1.21-.02.43-.03.86-.02,1.29h1.04c-.03-1.18-.07-2.35-.12-3.53-.05-1.05-.14-2.12-.62-3.07-.22-.45-.59-.91-1.14-.92s-.97.4-1.13.89-.08,1.11-.07,1.63c0,.58.02,1.17.03,1.75.02,1.31.04,2.63.33,3.92l1.01-.28c-.36-.88-.77-1.8-1.36-2.56-.53-.67-1.53-1.1-2.27-.49-.79.66-.46,1.71-.15,2.52.37.97.74,1.92,1.14,2.88.45,1.09.91,2.17,1.39,3.25.12.26.49.32.71.19.26-.15.3-.46.19-.71h0Z"/>
    </g>
    <g>
      <path class="cls-1" d="M5.18,8.91c0,.77-.02,1.53-.05,2.3"/>
      <path d="M4.66,8.91c0,.77-.02,1.53-.05,2.3-.01.27.25.53.52.52.29-.01.51-.23.52-.52.04-.76.05-1.53.05-2.3,0-.27-.24-.53-.52-.52s-.52.23-.52.52h0Z"/>
    </g>
    <g>
      <path class="cls-1" d="M6.65,8.81c-.02.64-.04,1.28-.07,1.92"/>
      <path d="M6.13,8.81c-.02.64-.04,1.28-.07,1.92-.01.27.25.53.52.52.29-.01.51-.23.52-.52.03-.64.06-1.28.07-1.92,0-.27-.24-.53-.52-.52s-.51.23-.52.52h0Z"/>
    </g>
    <g>
      <path class="cls-1" d="M8.17,8.77c-.04.72-.04,1.45,0,2.17"/>
      <path d="M7.65,8.77c-.04.72-.04,1.45,0,2.17.01.27.23.53.52.52.27-.01.54-.23.52-.52-.04-.72-.03-1.45,0-2.17.02-.27-.25-.53-.52-.52-.3.01-.51.23-.52.52h0Z"/>
    </g>
  </g>
  <path d="M10.76,5.22s.04,0,.07,0c0,0,.01,0,.02,0,.02,0,.05-.02.06-.03.02-.01.04-.03.05-.05.01-.02.02-.04.02-.07,0-.02,0-.05,0-.07-.01-.05-.04-.09-.09-.11s-.09-.03-.14-.02c0,0-.01,0-.02,0h.05s0,0-.01,0c-.03,0-.05,0-.07.02-.02,0-.04.02-.06.04-.02.02-.03.04-.04.06-.01.02-.02.05-.02.07v.05s.03.06.05.08c.04.03.08.06.13.05h0Z"/>
</svg>
 
Sort by date Sort by votes
As I recall, you would use it as an image file:

CSS: 
.baz {
  cursor: url("hyper.svg"), auto;
}

You can use comma-separated urls to have a fallback image if svg is not supported. A standard cursor keyword is required as last fallback.

See:

cursor CSS property - CSS | MDN

The cursor CSS property sets the mouse cursor, if any, to show when the mouse pointer is over an element.
developer.mozilla.org developer.mozilla.org
 
Upvote 0 Downvote
tomliv said:
As I recall, you would use it as an image file:

CSS: 
.baz {
  cursor: url("hyper.svg"), auto;
}

You can use comma-separated urls to have a fallback image if svg is not supported. A standard cursor keyword is required as last fallback.

See:

cursor CSS property - CSS | MDN

The cursor CSS property sets the mouse cursor, if any, to show when the mouse pointer is over an element.
developer.mozilla.org developer.mozilla.org
Click to expand...
OK, this is working on Safari for me, but on Chromium based web browsers it seems to have issues with this method. Do you know why this might be? It's also not working on Firefox.
 
Last edited:
Upvote 0 Downvote
@Edrol97 The following code works for me in Brave, Chrome, Safari and Firefox:

HTML: 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html, body{
            cursor: url(vector.svg), pointer;
            min-height: 100vh;
        }
    </style>
</head>
<body>
    
</body>
</html>

SVG: 
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="none"><path fill="#1E1E1E" d="M0 0h22v22H0z"/><path fill="#fff" d="M-181-178h405v461h-405z"/><path fill="#D9D9D9" d="M-1-1h24v24H-1z"/><path fill="#BB2929" d="M3.128 14.191 1 1l12.34 2.128L8.234 8.66 21 16.32 16.745 21 8.234 8.66 3.128 14.19Z"/><path stroke="#000" d="M8.234 8.66 3.128 14.19 1 1l12.34 2.128L8.234 8.66Zm0 0L21 16.32 16.745 21 8.234 8.66Z"/></svg>
 
Upvote 0 Downvote
Play Snayk 3+, higher dimensional snake game?

New Threads

Latest posts

Share this page

Buy us a coffee!

Buy me a coffee.
Code Academy Advertisement
DataCamp Advertisement

About Us

Code Forum is a community platform where coding enthusiasts can connect with other developers, engage in discussions, ask for help, and share their knowledge with a supportive community. It's a perfect place to improve your coding skills and to find a community of like-minded individuals who share your passion for coding.

Site links

Stay Connected

Back
Top Bottom