0

I have a custom cursor defined using an inline SVG image of two rotated rectangles. While it works, I'm surprised to find it blurry in Chrome. Is there something I can do to sharpen the edges?

.not-allowed{cursor:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ij48cmVjdCB0cmFuc2Zvcm09InJvdGF0ZSg0NSkiIHg9IjkuMjc2MyIgeT0iLTgiIHdpZHRoPSI0LjA3NDkiIGhlaWdodD0iMTYiIGZpbGw9IiMyMjIiLz48cmVjdCB0cmFuc2Zvcm09InJvdGF0ZSgxMzUpIiB4PSItMi4wMzc0IiB5PSItMTkuMzE0IiB3aWR0aD0iNC4wNzQ5IiBoZWlnaHQ9IjE2IiBmaWxsPSIjMjIyIi8+PC9zdmc+') 8 8, not-allowed}

Made more readable based on @enxaneta's link:

.not-allowed{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'%3E%3Crect transform='rotate%2845%29' x='9.2763' y='-8' width='4.0749' height='16' fill='%23222'/%3E%3Crect transform='rotate%28135%29' x='-2.0374' y='-19.314' width='4.0749' height='16' fill='%23222'/%3E%3C/svg%3E") 8 8, not-allowed}
GFL
  • 1,278
  • 2
  • 15
  • 24
  • Does not look blurry to me at all in chrome: https://codepen.io/ArSn/pen/KKpyRWV - can you post a screenshot of the blurry one? – ArSeN Mar 07 '20 at 18:52
  • This is what it looks like in Chrome on Windows. https://imgur.com/a/BU0Uq7u – GFL Mar 07 '20 at 19:15
  • Do you by any chance have a very large cursor configured and/or a low screen resolution? The contents of your SVG seem to be pixel-sizes instead of percentages (which would make the SVG actually scalable). My recommendation is therefore to rework the SVG and use percentages and see if the problem persists for you – ArSeN Mar 07 '20 at 19:43
  • please take a look at this answer: https://stackoverflow.com/questions/45962081/css-cursor-pointer-with-svg-image#45966695 Also don't forget to open the exampe: https://jsfiddle.net/xhk4zo8y/ – enxaneta Mar 07 '20 at 20:09
  • @ArSeN default cursor configs and a 4k monitor with 250% scaling. Maybe that might be the issue for me. I'm interested in using percents instead of pixels, but I can't find how to do that. Do you share a link to something that uses percents? – GFL Mar 07 '20 at 22:57
  • 1
    @enxaneta The final answer is actually blurry on my setup too. It's showing up where as that guy's wasn't, it's just blurry. The link on the post to https://codepen.io/tigt/post/optimizing-svgs-in-data-uris was really informative and something I'm going to incorporate. – GFL Mar 07 '20 at 22:58
  • @GFL here is a good guide on making SVGs scalable: https://css-tricks.com/scale-svg/ - please report back whether this solves your problem or not. Also, if you reset scaling to 100% (so no upscaling) I am guessing the effect will vanish for you. Still none the less I recommend making the SVG scalable so it always works – ArSeN Mar 08 '20 at 00:01

0 Answers0