1

Пытаюсь сделать svg иконку в Inkscape. При увеличении она красивая, но чем меньше становится - тем более зубчатые края. Кто знает почему так происходит и как с этим справляться? Как сделать ее такой же гладенькой как, например, иконочные шрифты font-awesome.

вот пример

код иконки:

<?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>
3
  • Возможно Вы её неправильно нарисовали? Ведь при рисовании очень важны пропорции кратные степени двойки.. Типа, я создал прямую из восьми пикселей, сжал её в двое и она стала четыре, сжал ещё и она стала два... А если создать из семи пикселей, то как монитор нарисует полпикселя? Как полтора землекопа.
    – vas
    25 апр 2015 в 13:44
  • честно говоря я ее не рисовала а экспортировала из expression design.. а вот то о чем вы пишете как можно исправить?
    – ada
    25 апр 2015 в 14:43
  • насчет пропорций видимо вы правы, как это реализовать - размеры артборда удобные 16 на 16, 32 на 32 и т.д. и попиксельная сетка
    – ada
    3 июн 2015 в 15:02

2 ответа 2

1

Правы комментаторы и отвечающие о целочисленности и сетках.

Как решила эту проблему для себя:

  • размеры артборда = минимальный размер иконки.
  • Если это 16 на 16 то использовать иконку у себя на сайте - только в кратных по размеру контейнерах - 32х32, 96х96
  • В иллюстраторе - смотреть в режиме сетки, также есть опция "привязать к сетке".
  • Все что попадает не ровно в пиксель - размывается.
0
  1. С кодом svg всё нормально, хоть он немного и неоптимален.
  2. Вы не написали, как хотите использовать изображение - формат файла, размер изображения.
  3. Если сохранили как svg и смотрите в просм-ке изображений, то, зачастую видите не svg, а сгенерированный этим просм-ом png c "зубчиками". Именно svg можно увидеть скормив его браузеру, или в том же векторном редакторе.
  4. Если экспорт в png, качество зависит от размера изображения, поэтому в Inkscape задавайте необходимый размер страницы, тот, размера которого хотите получить png иконку и масштабируйте на ней свои векторы. При размерах меньших 64x64, включайте попиксельную сетку- увидите какие части контуров неоптимально расположены, ну а дальше, при необходимости, ручками-ручками...
2
  • Ага, я хотела бы использовать в формате svg, размер 32 на 32 пикселя. Смотрю через браузер. В png мне не надо, но попробую ваш 4-й пункт. По итогам напишу.
    – ada
    28 апр 2015 в 6:44
  • вы правы насчет попиксельной сетки, правда я так и не разобралась как ее удобно настроить именно в inkscape
    – ada
    3 июн 2015 в 15:01

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.