我有一个使用两个旋转矩形的嵌入式SVG图像定义的自定义光标。虽然可以正常使用，但令我惊讶的是它在Chrome中模糊。有什么我可以做的使边缘锐化吗？
.not-allowed{cursor:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ij48cmVjdCB0cmFuc2Zvcm09InJvdGF0ZSg0NSkiIHg9IjkuMjc2MyIgeT0iLTgiIHdpZHRoPSI0LjA3NDkiIGhlaWdodD0iMTYiIGZpbGw9IiMyMjIiLz48cmVjdCB0cmFuc2Zvcm09InJvdGF0ZSgxMzUpIiB4PSItMi4wMzc0IiB5PSItMTkuMzE0IiB3aWR0aD0iNC4wNzQ5IiBoZWlnaHQ9IjE2IiBmaWxsPSIjMjIyIi8+PC9zdmc+') 8 8, not-allowed}
基于@enxaneta的链接，使其更具可读性：
.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}