-
I ensured my svg size (height, width) is smaller than the limit.
-
I ensured the svg itself is valid by rendering it in html.
I must be missing something because it doesn’t work.
This one works:
.container2 {
width: 50vw;
height: 50vh;
background: green;
cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke="black" fill="white" transform="scale(1 -1)"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"></path></svg>') 12 12, auto;
}
<div class="container2"></div>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke="black" fill="white" transform="scale(1 -1)"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"></path></svg>This one doesn’t work … why?
.container {
width: 50vw;
height: 50vh;
background: gold;
cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000" height="24" width="24" version="1.1" id="Layer_1" viewBox="0 0 330 330" xml:space="preserve"> <g id="XMLID_87_"> <path id="XMLID_88_" d="M325.606,304.394L223.329,202.116c16.707-21.256,26.682-48.04,26.682-77.111 C250.011,56.077,193.934,0,125.005,0C56.077,0,0,56.077,0,125.006C0,193.933,56.077,250.01,125.005,250.01 c29.07,0,55.855-9.975,77.111-26.681l102.277,102.277C307.322,328.536,311.161,330,315,330s7.678-1.464,10.606-4.394 C331.465,319.749,331.465,310.251,325.606,304.394z M30,125.006C30,72.619,72.619,30,125.005,30 c52.387,0,95.006,42.619,95.006,95.005c0,52.386-42.619,95.005-95.006,95.005C72.619,220.01,30,177.391,30,125.006z"/> <path id="XMLID_91_" d="M155.005,110.006h-15v-15c0-8.284-6.716-15-15-15s-15,6.716-15,15v15h-15c-8.284,0-15,6.716-15,15 s6.716,15,15,15h15v15c0,8.284,6.716,15,15,15s15-6.716,15-15v-15h15c8.284,0,15-6.716,15-15S163.289,110.006,155.005,110.006z"/> </g> </svg>') 12 12, pointer !important;
}<div class="container"></div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000" height="24" width="24" version="1.1" id="Layer_1" viewBox="0 0 330 330" xml:space="preserve"> <g id="XMLID_87_"> <path id="XMLID_88_" d="M325.606,304.394L223.329,202.116c16.707-21.256,26.682-48.04,26.682-77.111 C250.011,56.077,193.934,0,125.005,0C56.077,0,0,56.077,0,125.006C0,193.933,56.077,250.01,125.005,250.01 c29.07,0,55.855-9.975,77.111-26.681l102.277,102.277C307.322,328.536,311.161,330,315,330s7.678-1.464,10.606-4.394 C331.465,319.749,331.465,310.251,325.606,304.394z M30,125.006C30,72.619,72.619,30,125.005,30 c52.387,0,95.006,42.619,95.006,95.005c0,52.386-42.619,95.005-95.006,95.005C72.619,220.01,30,177.391,30,125.006z"/> <path id="XMLID_91_" d="M155.005,110.006h-15v-15c0-8.284-6.716-15-15-15s-15,6.716-15,15v15h-15c-8.284,0-15,6.716-15,15 s6.716,15,15,15h15v15c0,8.284,6.716,15,15,15s15-6.716,15-15v-15h15c8.284,0,15-6.716,15-15S163.289,110.006,155.005,110.006z"/> </g> </svg>
3
Answers
I went to this website and pasted in my svg:
Then I copied the
urlpart from the Ready for CSS and pasted it in my css like:You have a syntax error for
cursorproperty. Use this instead:Your first SVG has
fill="black"Your second SVG has
fill="#000000"That # needs to be escaped with
%23because a # has another meaning in URLsand
cursor:url( ... )processes the SVG as if it is a URLIn older browsers you also needed to escape < and >, that is no longer required, but ofcourse old tools will still do so.
All I changed in your code below was one # to %23
Notes:
xmlns:xlink,xml:,version,idcan all be removed, they are relics of older syntax and SVG drawing tools<path d="..."is ridiculous, it is stuffing 1000 "pixels" into 1 only making your CPU work harderUse https://yqnn.github.io/svg-path-editor/# to set
number of decimalsto 0 and minimize thed-path