Why does an icon's edges become jagged when svg is scaled down? And how to avoid it?

Question

Design

I'm trying to make an svg icon in Inkscape. When enlarged, it is beautiful, but the smaller it becomes, the more jagged edges. Does anyone know why this happens and how to deal with it? How to make it as smooth as, for example, font-awesome icon fonts.

icon code pastebin.com/FpaSRwCJ

Answer 1

Eugene is right about integers.
How I solved this problem for myself:
- artboard dimensions = minimum icon size.
- If it's 16 by 16 then use the icon on your site - only in containers that are multiples of size - 32x32, 96x96
- In illustrator - look in grid mode, there is also the "snap to grid" option.
- Everything that does not fall exactly into the pixel is blurred.

Answer 2

IMHO the editor generates terrible code.
This is how it would be worth doing this example (coincidence is not 100% :).
Using SVG as an image and background with different sizes.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 240 240">
  <defs>
    <style>
      .line,
      .circle {
        fill: #333;
        fill-rule: evenodd;
      }
      .c2 {
        transform: translate(240px, 0) rotateZ(90deg);
      }
      .c3 {
        transform: translate(240px, 150px) rotateZ(180deg);
      }
      .c4 {
        transform: translate(0, 150px) rotateZ(-90deg);
      }
    </style>
    <symbol id="corner">
      <path d="m 0,0 l 50,0 0,10 -40,0 0,40 -10,0 z"/>
    </symbol>
  </defs>
  <g class="line">
    <use class="c1" xlink:href="#corner"/>
    <use class="c2" xlink:href="#corner"/>
    <use class="c3" xlink:href="#corner"/>
    <use class="c4" xlink:href="#corner"/>
  </g>
  <g class="circle">
    <path d="m 60,75 a 60 60 0 0 1 120 0 a 60 60 0 0 1 -120 0 m 30,-10 a 10 10 0 0 1 20 0 a 10 10 0 0 1 -20 0 m 40,0 a 10 10 0 0 1 20 0 a 10 10 0 0 1 -20 0 m -40,35 a 40 40 0 0 0 60 0 a 70 70 0 0 1 -60 0"/>
    <path d="m 30,240 a 110 200 0 0 1 180 0 z"/>
  </g>
</svg>