CODEWITHSUNDEEP
htmlcsssvg
Donald Zhu
Donald Zhu

Reputation: 855

Why is my svg crisp when imported, but blurry as a cursor?

I was trying to use the following svg image as a cursor for my document: 

<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;
}

But it doesn't matter if I change its size to something big (128px) or small, and it doesn't matter if I'm on Chrome, Firefox, or Safari, it is still somewhat pixelated. It is crisp and clean when I import it into the HTML document, but blurry and pixelated when I use it as a cursor. What am I doing wrong?

Upvotes: 0

Views: 550

Answers (2)

r3mainer
r3mainer

Reputation: 24567

When SVG images are rendered, horizontal and vertical lines that follow integer coordinates will be spread across the two pixels on either side (above/below horizontal lines, and to the left/right of vertical lines). This makes them appear blurry.

To avoid this, create your design using integer coordinates, then offset the results by half a pixel in the X and Y directions. The results will be much sharper.

Also, it would make more sense to draw the cursor at the dimensions you want instead of at a much larger size that you have to scale down.

Here's a simple cursor drawn with and without a half-pixel offset. You should be able to see it much more clearly with the added offset.

<!-- 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>

Example:

This is what the second of these images looks like when used as a cursor (i.e., the one offset by ½ a pixel):

* {
    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;
}

Upvotes: 0

Ahed Kabalan
Ahed Kabalan

Reputation: 855

I've just updated cursor to look like the following, I don't know if that helps:

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;
}

Upvotes: 2

Related Questions