Поддержка Проблемы и решения Некорректное отображение логотипа в SVG

  • Всем привет! Есть сайт, который создавали на теме Publisher в WP. Изначально логотип был выполнен в формате .png, он текстовый, поэтому из-за пикселизации был «замылен». Я переделал картинку в svg, добавил в WP плагин SVG support и вставил в логотип — всё отлично работает (у меня Chrome, Windows 10 Pro, Dell ноут).

    Но тут мне другой человек прислали скриншот, что логотип вообще отображается некорректно: шрифт с засечками, совсем другой, не центрирован. У него комп стационарный, Win 10 Pro тоже. У меня на другом ноуте — HP Win 8.1 — та же история. Подскажите, пожалуйста, кто сталкивался с таким: от чего это зависит и как можно поправить.

    • Тема изменена 10 месяцев, 3 недели назад пользователем italexey.
Просмотр 7 ответов — с 1 по 7 (всего 7)
  • Судя по всему, шрифт используется системный. На основном компьютере он установлен, поэтому при рендеринге картинки подгружается и отображается корректно. Но на других компьютерах этого шрифта нет в системе, поэтому используется дефолтный (раз с засечками — значит Times, serif).

    Как решить?

    1. Попробовать включить шрифт в SVG. Можно с помощью <style> @import или <style> @font-face. Это проще всего, позволит легко изменить текст внутри SVG если понадобится. Минус — размер загружаемых данных: весь шрифт будет либо грузиться отдельным файлом при @import, либо размер файла будет большим при @font-face.
    2. Можно перед сохраниением SVG превратить текст в кривые. Например в Figma за это отвечает чекбокс Outline Text при экспорте.

    У вас скорее всего в svg файле есть текст, для которого задан шрифт. Этот шрифт есть на одном компьютере и отсутствует на другом. Вам надо преобразовать текст в кривые или весь лого в png.

    https://habr.com/ru/articles/159017/

    @cadic , @efess Спасибо большое за идеи! ) Да, действительно, несмотря на то, что WP включает логотип в тег img, шрифты нужны всё равно и на машинах, на которых этих довольно экзотических шрифтов нет, всё и «съехало»… Изначально логотип и был в .png, но он из 2-х строк текста, поэтому даже на обычном разрешении без масштабирования он был «замылен» слегка. Мне это не понравилось и я решил переделать в вектор и… Да, гораздо проще было бы, если бы я сам начинал проект. Ко мне он попал на доделку, а я не сильно дока в WP, к тому же, сайт переносили на WP исключительно через админку WP, и теперь разобраться в файловой структуре и что-то менять там нереально — полный хаос. В итоге действительно превратил текст в вектор и всё заработало, причём по сравнению с исходным размер файла значительно сократился, несмотря на разросшийся код самой svg ))

    Попробуйте использовать программу svg cleaner для уменьшения размера логотипа. Уменьшите до минимума (1 знак после запятой) «точность» всех параметров.

    Кстати, png тоже может быть вполне себе немыльный, за счет использования ретины. главное, коэффициент увеличения сделать ровный — 2х например

    @efess Я пропускал готовый SVG через SVGOMG. Интересно, что после пропуска текст (там небольшой шрифт) начинает как бы частично блёкнуть при 100% масштабе в браузере и меньше. Если увеличить масштаб — да, он проступает чётко. А вот в обычных условиях — вот так (картинка). Я пробовал играться с точностью в SVGOMG, но это не решает эту проблему. А если не чистить — то всё отображается хорошо (картинка)

    • Ответ изменён 10 месяцев, 3 недели назад пользователем italexey.

    если проблему с текстом в лого до сих пор не решил, выложи где нибудь свою свг-шку, только до ее обработали клинерамм.

    Может кому пригодится, искал ответ на свой вопрос, наткнулся на эту тему в поиске. Не отображался логотип в формате svg, нужно посмотреть класс логотипа в коде и прописать его размер в дополнительных стилях.

    .custom-logo-link img { width: 100%!important; }

Просмотр 7 ответов — с 1 по 7 (всего 7)
  • Тема «Некорректное отображение логотипа в SVG» закрыта для новых ответов.