1892Art
@1892Art
Дизайнер

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

Очень часто бывает так, что в итоге иконки в спрайте приобретают неприятные размытые края (при просмотре в браузере или на самом сайте), хотя в Иллюстраторе всё чётко выровнено.
В чём может быть загвоздка? Есть ли какие-нибудь хитрости, которые нужно учитывать при сохранении SVG-спрайта?
  • Вопрос задан
  • 1168 просмотров
Пригласить эксперта
Ответы на вопрос 3
@GreatRash
Иконка должна попадать в пиксель, в иллюстраторе есть по-моему настройка align to pixel grid. В интернетах есть туториалы на тему.
Ответ написан
maxminimus
@maxminimus
просто или ничего
вродебы способ решения размытости svg - внедрять его в виде base64
Ответ написан
paulradzkov
@paulradzkov
Дизайнер, верстальщик, начальник отдела UI
Когда-то я пытался побороть эту проблему и спрашивал об этом на Хабре https://habrahabr.ru/post/245583/#comment_8183581 (и демка есть).

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

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

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

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