Почему мой SVG четкий при импорте, но размытый как курсор?

Question

Я пытался использовать следующее изображение svg в качестве курсора для моего документа:

<svg height="128" width="128" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 135.92"><defs><style>.cls-1{fill:#ef0000;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M72,135.92,52.25,103c-.54-.91-.59-7.11.32-8.23l1-1.16,8.06,1.18V78.2H42.18l1.17,7.53-.81.93c-1.47,1.69-7.86.93-8.27.75L0,68,34,48.6c.6-.29,6.9-.9,8.34.48l1,1-1.18,7.61H61.63V41.1l-8.1,1.21-1-1.17c-.91-1.11-.86-7.32-.33-8.21L72,0,91.75,32.91c.5.85.68,7-.3,8.23l-1,1.17-8-1.19V57.7h19.36L100.61,50l1.08-1c1.41-1.27,7.62-.73,8-.54L144,68,110,87.3c-.65.3-6.95,1-8.42-.54l-.91-1,1.17-7.55H82.37V94.8l8.12-1.19,1,1.16c1,1.22.8,7.38.31,8.21Zm-14.82-35L72,125.58l14.82-24.7c0-.36,0-.85,0-1.35L77.05,101V73h31l-1.45,9.37H108L133.24,68l-25.3-14.4h-1.38L108,63H77.14V35l9.67,1.44c0-.51,0-1,0-1.36L72,10.34,57.18,35c0,.36,0,.85,0,1.36L67,34.92V63H36l1.45-9.4H36L10.76,68l25.3,14.37h1.38L36,72.88H66.91v28.06L57.2,99.52C57.19,100,57.18,100.52,57.18,100.89Z"/></g></g></svg>
<svg height="16" width="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 135.92"><defs><style>.cls-1{fill:#ef0000;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M72,135.92,52.25,103c-.54-.91-.59-7.11.32-8.23l1-1.16,8.06,1.18V78.2H42.18l1.17,7.53-.81.93c-1.47,1.69-7.86.93-8.27.75L0,68,34,48.6c.6-.29,6.9-.9,8.34.48l1,1-1.18,7.61H61.63V41.1l-8.1,1.21-1-1.17c-.91-1.11-.86-7.32-.33-8.21L72,0,91.75,32.91c.5.85.68,7-.3,8.23l-1,1.17-8-1.19V57.7h19.36L100.61,50l1.08-1c1.41-1.27,7.62-.73,8-.54L144,68,110,87.3c-.65.3-6.95,1-8.42-.54l-.91-1,1.17-7.55H82.37V94.8l8.12-1.19,1,1.16c1,1.22.8,7.38.31,8.21Zm-14.82-35L72,125.58l14.82-24.7c0-.36,0-.85,0-1.35L77.05,101V73h31l-1.45,9.37H108L133.24,68l-25.3-14.4h-1.38L108,63H77.14V35l9.67,1.44c0-.51,0-1,0-1.36L72,10.34,57.18,35c0,.36,0,.85,0,1.36L67,34.92V63H36l1.45-9.4H36L10.76,68l25.3,14.37h1.38L36,72.88H66.91v28.06L57.2,99.52C57.19,100,57.18,100.52,57.18,100.89Z"/></g></g></svg>

html {
    cursor: url(cursor/move.svg), auto;
}

Но не имеет значения, изменю ли я его размер на что-то большое (128 пикселей) или маленький, и не имеет значения, включен ли я Chrome, Firefox или Safari, он все еще несколько пиксельный. Он четкий и чистый, когда я импортирую его в документ HTML, но размытый и пиксельный, когда я использую его в качестве курсора. Что я делаю не так?

Answer 1

Я только что обновил курсор, чтобы он выглядел следующим образом, не знаю, помогает ли это:

html {
  width: 50vw;
  height: 50vh;
  background: gold;
  
  cursor: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='128px' height='128px' viewBox='0 0 512 512' style='enable-background:new 0 0 512 512;' xml:space='preserve'%3E %3Cpath d='M72,135.92,52.25,103c-.54-.91-.59-7.11.32-8.23l1-1.16,8.06,1.18V78.2H42.18l1.17,7.53-.81.93c-1.47,1.69-7.86.93-8.27.75L0,68,34,48.6c.6-.29,6.9-.9,8.34.48l1,1-1.18,7.61H61.63V41.1l-8.1,1.21-1-1.17c-.91-1.11-.86-7.32-.33-8.21L72,0,91.75,32.91c.5.85.68,7-.3,8.23l-1,1.17-8-1.19V57.7h19.36L100.61,50l1.08-1c1.41-1.27,7.62-.73,8-.54L144,68,110,87.3c-.65.3-6.95,1-8.42-.54l-.91-1,1.17-7.55H82.37V94.8l8.12-1.19,1,1.16c1,1.22.8,7.38.31,8.21Zm-14.82-35L72,125.58l14.82-24.7c0-.36,0-.85,0-1.35L77.05,101V73h31l-1.45,9.37H108L133.24,68l-25.3-14.4h-1.38L108,63H77.14V35l9.67,1.44c0-.51,0-1,0-1.36L72,10.34,57.18,35c0,.36,0,.85,0,1.36L67,34.92V63H36l1.45-9.4H36L10.76,68l25.3,14.37h1.38L36,72.88H66.91v28.06L57.2,99.52C57.19,100,57.18,100.52,57.18,100.89Z'/%3E %3C/svg%3E"), pointer;
}

Answer 2

При рендеринге изображений SVG горизонтальные и вертикальные линии, следующие за целыми координатами, будут распределены по двум пикселям с каждой стороны (выше / ниже горизонтальных линий и слева / справа от вертикальных линий). Это делает их размытыми.

Чтобы избежать этого, создайте свой дизайн, используя целочисленные координаты, а затем сместите результаты на полпикселя в направлениях X и Y. Результаты будут намного четче.

Кроме того, было бы разумнее нарисовать курсор в тех размерах, которые вам нужны, а не в гораздо большем размере, который вам нужно уменьшить.

Вот простой курсор, нарисованный со смещением на полпикселя и без него. С добавленным смещением вы сможете увидеть это намного яснее.

<!-- Lines following integer coordinates -->
<svg height="16" width="16" viewBox="0 0 16 16">
<path d="M8,1L10.5,4L9,4L9,7L12,7L12,5.5L15,8
         L12,10.5L12,9L9,9L9,12L10.5,12L8,15
         L5.5,12L7,12L7,9L4,9L4,10.5L1,8L4,5.5
         L4,7L7,7L7,4L5.5,4L8,1Z" fill="none"
         stroke="#e00" stroke-width="0.8"
         stroke-miterlimit="2"/>
</svg>

<!-- Lines offset by half a pixel -->
<svg height="16" width="16" viewBox="0 0 16 16">
<path d="M8.5,1.5L11,4.5L9.5,4.5L9.5,7.5
         L12.5,7.5L12.5,6L15.5,8.5L12.5,11
         L12.5,9.5L9.5,9.5L9.5,12.5L11,12.5
         L8.434,15.5L6,12.5L7.5,12.5L7.5,9.5
         L4.5,9.5L4.5,11L1.5,8.5L4.5,6L4.5,7.5
         L7.5,7.5L7.5,4.5L6,4.5L8.5,1.5Z"
         fill="none" stroke="#e00"
         stroke-width="0.8" stroke-miterlimit="2"/>
</svg>

Пример:

Вот как выглядит второе из этих изображений при использовании в качестве курсора (т. Е. Смещение на ½ пикселя):

* {
    cursor: url("data:image/svg+xml,%3Csvg  xmlns='http://www.w3.org/2000/svg' height='16' width='16' viewBox='0 0 16 16'%3E%3Cpath d='M8.5,1.5L11,4.5L9.5,4.5L9.5,7.5L12.5,7.5L12.5,6L15.5,8.5L12.5,11L12.5,9.5L9.5,9.5L9.5,12.5L11,12.5L8.434,15.5L6,12.5L7.5,12.5L7.5,9.5L4.5,9.5L4.5,11L1.5,8.5L4.5,6L4.5,7.5L7.5,7.5L7.5,4.5L6,4.5L8.5,1.5Z' fill='none' stroke='#e00' stroke-width='0.8' stroke-miterlimit='2'/%3E%3C/svg%3E") 8 8, move;
}