Как правильно подготовить SVG-спрайт к вёрстке?

Question

[Ovik Mooshlyan]

Очень часто бывает так, что в итоге иконки в спрайте приобретают неприятные размытые края (при просмотре в браузере или на самом сайте), хотя в Иллюстраторе всё чётко выровнено.
В чём может быть загвоздка? Есть ли какие-нибудь хитрости, которые нужно учитывать при сохранении SVG-спрайта?

Answer 1

[GreatRash]

Иконка должна попадать в пиксель, в иллюстраторе есть по-моему настройка align to pixel grid. В интернетах есть туториалы на тему.

Comments

[Ovik Mooshlyan]

В том-то и дело, друг, что в Иллюстраторе я дотошно выравниваю иконки по сетке, а при выходе, в SVG-спрайте, они порой со смазанными краями. Никак не пойму, в чём дело :(

[GreatRash]

Ovik Mooshlyan: Смазанные иконки - это стопроцентное непопадание в пиксель. Нужно смотреть что в вёрстке происходит и на макет иконки глянуть, без этого никак не понять причины.

Answer 2

[Павел Радьков]

Когда-то я пытался побороть эту проблему и спрашивал об этом на Хабре https://habrahabr.ru/post/245583/#comment_8183581 (и демка есть).

Это пока не лечится (я не встречал железобетонного решения). Даже идеальные иконки могут попадать между пикселей в браузере. Потому что, в браузере вычисленные значения высоты и ширины могут быть нецелочисленными. И тут суб-пиксельное сглаживание играет дурную роль: «мы теперь не обязаны округлять начальную позицию иконки до целых пикселей, мы может отрендерить ее прямо здесь, в точке 33.24px 46.05px! ура!»

Без размытия будет когда svg внедряется через тег img, бэкграунд или base64. Но это уже не SVG-спрайт.