Почему при уменьшении svg иконки — ее края становятся зубчатыми? И как этого избежать?

Question

[Китана]

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

код иконки pastebin.com/FpaSRwCJ

Comments

[Евгений Петров]

Код иконки бы привели.

[Китана]

Евгений Петров: вот pastebin.com/FpaSRwCJ

Answer 1

[Китана]

Прав Евгений о целочисленности.

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

- размеры артборда = минимальный размер иконки.
- Если это 16 на 16 то использовать иконку у себя на сайте - только в кратных по размеру контейнерах - 32х32, 96х96
- В иллюстраторе - смотреть в режиме сетки, также есть опция "привязать к сетке".
- Все что попадает не ровно в пиксель - размывается.

Answer 2

[Евгений Петров]

ИМХО редактор формирует ужасный код.
Вот так стоило бы сделать этот пример (совпадение не на 100%:).
Использование SVG в качестве картинки и фона с разными размерами.

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

Comments

[Китана]

спасибо вам за ваш труд и время. однако мне кажется, в вашем варианте четкость края особо не изменилась.

[Евгений Петров]

Проблема с уменьшением может упираться в конечные значения параметров. Дробные рассчитанные величины заставят браузеры прибегать к разным способам сглаживания преобразования в растр.

Можно попробовать прописать целочисленные координаты для небольшого размера (изначально формируя холст не 250х250, а, скажем, 20х20), только помнить о том, что при увеличении итоговая картинка может выглядеть не совсем так, как с маленькими размерами.

[Китана]

Евгений Петров: да, возможно вы правы. проверю и напишу.