Adara
@Adara
front-end

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

Пытаюсь сделать svg иконку в Inkscape. При увеличении она красивая, но чем меньше становится - тем более зубчатые края. Кто знает почему так происходит и как с этим справляться? Как сделать ее такой же гладенькой как, например, иконочные шрифты font-awesome.
a6b57f3eb755423b88a33392d59763ab.png
код иконки pastebin.com/FpaSRwCJ
  • Вопрос задан
  • 1282 просмотра
Решения вопроса 1
Adara
@Adara Автор вопроса
front-end
Прав Евгений о целочисленности.

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

- размеры артборда = минимальный размер иконки.
- Если это 16 на 16 то использовать иконку у себя на сайте - только в кратных по размеру контейнерах - 32х32, 96х96
- В иллюстраторе - смотреть в режиме сетки, также есть опция "привязать к сетке".
- Все что попадает не ровно в пиксель - размывается.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
Petroveg
@Petroveg
Миром правят маленькие с#@&ки
ИМХО редактор формирует ужасный код.
Вот так стоило бы сделать этот пример (совпадение не на 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>
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы