Trying to make svg icon in Inkscape. With the increase it is beautiful, but the smaller it becomes - the more jagged edges. Who knows why this is happening and how to cope with it? How to make it as smooth as, for example, font-awesome icon fonts.

here is an example

icon code :

<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="59.373" height="70.2689" viewBox="0 0 59.37 70.27" enable-background="new 0 0 59.37 70.27" xml:space="preserve"> <path fill="#333333" fill-opacity="1" fill-rule="evenodd" stroke-width="0.2" stroke-linejoin="round" d="M 26.8958,4.16879C 16.0117,5.98438 9.13739,15.5433 10.5566,25.7589C 11.9616,35.874 20.9792,43.4679 32.252,42.2301C 41.7734,41.1842 50.1374,32.0057 48.7162,20.7295C 47.4941,11.0365 38.3203,2.2627 26.8958,4.16879 Z "/> <path fill="#333333" fill-opacity="1" fill-rule="evenodd" stroke-width="0.2" stroke-linejoin="round" d="M 1.32813,70.2689L 57.8223,70.2689C 55.7057,62.8742 52.9219,57.6071 48.3594,52.9546C 44.5645,49.085 37.8913,44.5731 29.6244,44.6789C 14.3906,44.8735 5.29428,57.1497 1.32813,70.2689 Z "/> <path fill="#111111" fill-opacity="1" fill-rule="evenodd" stroke-width="0.2" stroke-linejoin="round" d="M 26.8958,4.16879C 16.0117,5.98438 9.13739,15.5433 10.5566,25.7589C 11.9616,35.874 20.9792,43.4679 32.252,42.2301C 41.7734,41.1842 50.1374,32.0057 48.7162,20.7295C 47.4941,11.0365 38.3203,2.2627 26.8958,4.16879 Z "/> <path fill="#111111" fill-opacity="1" fill-rule="evenodd" stroke-width="0.2" stroke-linejoin="round" d="M 1.32813,70.2689L 57.8223,70.2689C 55.7057,62.8742 52.9219,57.6071 48.3594,52.9546C 44.5645,49.085 37.8913,44.5731 29.6244,44.6789C 14.3906,44.8735 5.29428,57.1497 1.32813,70.2689 Z "/> <path fill="#FFFFFF" fill-opacity="1" fill-rule="evenodd" stroke-width="0.2" stroke-linejoin="round" d="M 22.4369,16.9998C 23.9212,16.9998 25.1244,18.2033 25.1244,19.6875C 25.1244,21.1717 23.9212,22.3752 22.4369,22.3752C 20.9525,22.3752 19.7494,21.1717 19.7494,19.6875C 19.7494,18.2033 20.9525,16.9998 22.4369,16.9998 Z "/> <path fill="#FFFFFF" fill-opacity="1" fill-rule="evenodd" stroke-width="0.2" stroke-linejoin="round" d="M 36.7044,16.9998C 38.1888,16.9998 39.3919,18.2033 39.3919,19.6875C 39.3919,21.1717 38.1888,22.3752 36.7044,22.3752C 35.2201,22.3752 34.0169,21.1717 34.0169,19.6875C 34.0169,18.2033 35.2201,16.9998 36.7044,16.9998 Z "/> <path fill="#111111" fill-opacity="1" fill-rule="evenodd" stroke-width="0.2" stroke-linejoin="round" d="M 0,0L 3.5,0L 3.5,0.000335693L 11.5007,0.000335693L 11.5007,3.50015L 3.5,3.50015L 3.5,11.4998L 0,11.4998L 0,0 Z "/> <path fill="#111111" fill-opacity="1" fill-rule="evenodd" stroke-width="0.2" stroke-linejoin="round" d="M 0,45.2503L 3.5,45.2503L 3.5,45.25L 11.5007,45.25L 11.5007,41.7502L 3.5,41.7502L 3.5,33.7503L 0,33.7503L 0,45.2503 Z "/> <path fill="#111111" fill-opacity="1" fill-rule="evenodd" stroke-width="0.2" stroke-linejoin="round" d="M 59.373,45.2506L 55.873,45.2506L 55.873,45.2503L 47.8724,45.2503L 47.8724,41.7505L 55.873,41.7505L 55.873,33.7506L 59.373,33.7506L 59.373,45.2506 Z "/> <path fill="#111111" fill-opacity="1" fill-rule="evenodd" stroke-width="0.2" stroke-linejoin="round" d="M 59.373,0.000335693L 55.873,0.000335693L 55.873,0.000640869L 47.8724,0.000640869L 47.8724,3.50049L 55.873,3.50049L 55.873,11.5003L 59.373,11.5003L 59.373,0.000335693 Z "/> <path fill="#FFFFFF" fill-opacity="1" fill-rule="evenodd" stroke-width="0.2" stroke-linejoin="round" d="M 36.7858,30.6061C 36.9662,30.8688 37.0638,31.1455 37.0638,31.4316C 37.0638,33.1229 33.6836,34.495 29.5156,34.495C 25.3464,34.495 21.9668,33.1229 21.9668,31.4316C 21.9668,31.1984 22.0313,30.972 22.153,30.7536C 23.0664,31.6066 25.9655,32.2303 29.4011,32.2303C 33.0319,32.2303 36.0638,31.5337 36.7858,30.6061 Z "/> </svg>
  • Maybe you drew it wrong? After all, when drawing, proportions are multiples of powers of two. Like, I created a straight line of eight pixels, squeezed it in two and it became four, squeezed it and it became two ... And if you create seven pixels, then how the monitor draws a half pixel ? Like a half excavator. - vas
  • To be honest, I didn’t draw it but exported it from expression design .. but what are you writing about how to fix it? - Adara Hv
  • As far as proportions are concerned, you are probably right, how to implement it - artboard sizes are comfortable 16 by 16, 32 by 32, etc. and pixel-by-pixel grid - Adara Hv

2 answers 2

The right commentators and respondents about integer and meshes.

How to solve this problem for yourself:

  • artboard size = minimum icon size.
  • If it is 16 by 16 then use the icon on your site - only in multiples of 32x32, 96x96 containers
  • In the illustrator - look in the grid mode, there is also an option "snap to the grid".
  • Anything that does not fit exactly in a pixel is blurred.
    1. With the svg code, everything is fine, even though it is a bit non-optimal.
    2. You did not write how you want to use the image - file format, image size.
    3. If you saved it as svg and look in the image preview, then often you see not svg, but png generated by this view with cogs. It is svg that can be seen by feeding it to the browser, or in the same vector editor.
    4. If the export is in png, the quality depends on the size of the image, so in Inkscape set the required page size, the size of which you want to get the png icon and scale your vectors on it. With sizes smaller than 64x64, turn on the pixel-by-pixel grid — you can see which parts of the contours are not optimally located, and then, if necessary, with handle-pens ...
    • Yeah, I would like to use the svg format, the size is 32 by 32 pixels. I look through the browser. In the png I do not need, but I'll try your 4th item. Following the results I will write. - Adara Hv
    • You are right about the pixel-by-pixel grid, although I never figured out how to configure it conveniently in inkscape - Adara Hv