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 that you have read and understand our privacy policy and code of conduct.

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