Если мы используем SVG в mobile_logo, он масштабируется неправильно:
Я могу (и сделаю) временно заменить его на PNG, но предпочёл бы этого избежать!
Думаю, это тоже можно исправить с помощью правки CSS, но не я же один пытаюсь это сделать.
2 лайка
Я использую SVG-логотип и не сталкивался с проблемами масштабирования. Возможно, я неправильно понимаю суть проблемы: дело в том, что он слишком маленький?
Хочу лишь отметить соотношение сторон 3:1, как рекомендуется в настройках:
Не содержит ли ваш SVG-изображение избыточных прозрачных отступов вокруг логотипа?
Требуется соотношение сторон больше 3:1. PNG-файл с такими же пропорциями работает нормально, поэтому проблема связана конкретно с обработкой SVG.
Как векторный объект, SVG в данном контексте не имеет реального понятия размера. Тот же файл корректно отображается в качестве логотипа сайта.
Изображение на моем скриншоте — это тест, проведенный после обнаружения проблемы на рабочем сайте. Я создал аналогичную строку текста, перевел её в кривые и экспортировал объект. Если бы в файле были какие-либо ошибки, они проявились бы и в логотипе сайта. Отступы отсутствуют:
При более детальном рассмотрении видно, что ваш сайт обрабатывает SVG-логотип иначе, вероятно, благодаря теме оформления:
В то время как этот сайт использует один из стандартных шаблонов и выглядит так:
Похоже, ваш логотип был создан в Inkscape, и его размеры были жестко заданы внутри файла. Это не характерно для всех генераторов SVG:
в сравнении с:
Если на десктопной версии всё работает, нам нужно обеспечить аналогичную обработку для мобильного логотипа.
3 лайка
Вы имеете в виду форум и логотип @piffy? Я не нахожу этой информации в теме, это немного запутанно 
Можете ли вы предоставить ваш «тестовый SVG-логотип», чтобы я мог взглянуть?
1 лайк
Да — они ссылались на свой сайт, поэтому я использовал его в качестве эталона.
SVG не разрешено для публикации на Meta. Вот исходный код:
<?xml version="1.0" encoding="UTF-8"?>
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 62.88 11.02">
<defs>
<style>
.cls-1 {
fill: #fff;
}
</style>
</defs>
<path class="cls-1" d="m1.93,1.04v1.67h1.51v.8h-1.51v3.13c0,.72.2,1.13.79,1.13.28,0,.48-.04.61-.07l.05.79c-.2.08-.53.14-.94.14-.49,0-.89-.16-1.14-.44-.3-.31-.41-.83-.41-1.51v-3.17h-.9v-.8h.9v-1.39l1.03-.28Z"/>
<path class="cls-1" d="m5.15,5.8c.02,1.43.94,2.01,1.99,2.01.76,0,1.21-.13,1.61-.3l.18.76c-.37.17-1.01.36-1.93.36-1.79,0-2.85-1.18-2.85-2.93s1.03-3.13,2.72-3.13c1.9,0,2.4,1.67,2.4,2.73,0,.22-.02.38-.04.49h-4.08Zm3.09-.76c.01-.67-.28-1.71-1.46-1.71-1.07,0-1.54.98-1.62,1.71h3.08Z"/>
<path class="cls-1" d="m10.43,7.44c.31.2.86.42,1.39.42.77,0,1.13-.38,1.13-.86,0-.5-.3-.78-1.08-1.07-1.04-.37-1.54-.95-1.54-1.64,0-.94.76-1.7,2-1.7.59,0,1.1.17,1.43.36l-.26.77c-.23-.14-.65-.34-1.19-.34-.62,0-.97.36-.97.79,0,.48.35.7,1.1.98,1.01.38,1.52.89,1.52,1.75,0,1.02-.79,1.74-2.17,1.74-.64,0-1.22-.16-1.63-.4l.26-.8Z"/>
<path class="cls-1" d="m16.6,1.04v1.67h1.51v.8h-1.51v3.13c0,.72.2,1.13.79,1.13.28,0,.48-.04.61-.07l.05.79c-.2.08-.53.14-.94.14-.49,0-.89-.16-1.14-.44-.3-.31-.41-.83-.41-1.51v-3.17h-.9v-.8h.9v-1.39l1.03-.28Z"/>
<path class="cls-1" d="m21.7,7.44c.31.2.86.42,1.39.42.77,0,1.13-.38,1.13-.86,0-.5-.3-.78-1.08-1.07-1.04-.37-1.54-.95-1.54-1.64,0-.94.76-1.7,2-1.7.59,0,1.1.17,1.43.36l-.26.77c-.23-.14-.65-.34-1.19-.34-.62,0-.97.36-.97.79,0,.48.35.7,1.1.98,1.01.38,1.52.89,1.52,1.75,0,1.02-.79,1.74-2.17,1.74-.64,0-1.22-.16-1.63-.4l.26-.8Z"/>
<path class="cls-1" d="m27,2.71l1.14,3.26c.19.53.35,1.01.47,1.49h.04c.13-.48.3-.96.49-1.49l1.13-3.26h1.1l-2.28,5.8h-1.01l-2.21-5.8h1.13Z"/>
<path class="cls-1" d="m37.24,2.71c-.02.42-.05.89-.05,1.6v3.37c0,1.33-.26,2.15-.83,2.65-.56.53-1.38.7-2.11.7s-1.46-.17-1.93-.48l.26-.8c.38.24.98.46,1.7.46,1.08,0,1.87-.56,1.87-2.03v-.65h-.02c-.32.54-.95.97-1.85.97-1.44,0-2.47-1.22-2.47-2.83,0-1.97,1.28-3.08,2.61-3.08,1.01,0,1.56.53,1.81,1.01h.02l.05-.88h.92Zm-1.09,2.29c0-.18-.01-.34-.06-.48-.19-.61-.71-1.12-1.48-1.12-1.01,0-1.73.85-1.73,2.19,0,1.14.58,2.09,1.72,2.09.65,0,1.24-.41,1.46-1.08.06-.18.08-.38.08-.56v-1.04Z"/>
<path class="cls-1" d="m41.5,0h1.06v8.52h-1.06V0Z"/>
<path class="cls-1" d="m49.58,5.56c0,2.15-1.49,3.08-2.89,3.08-1.57,0-2.78-1.15-2.78-2.99,0-1.94,1.27-3.08,2.88-3.08s2.79,1.21,2.79,2.99Zm-4.61.06c0,1.27.73,2.23,1.76,2.23s1.76-.95,1.76-2.25c0-.98-.49-2.23-1.74-2.23s-1.79,1.15-1.79,2.25Z"/>
<path class="cls-1" d="m55.92,2.71c-.02.42-.05.89-.05,1.6v3.37c0,1.33-.26,2.15-.83,2.65-.56.53-1.38.7-2.11.7s-1.46-.17-1.93-.48l.26-.8c.38.24.98.46,1.7.46,1.08,0,1.87-.56,1.87-2.03v-.65h-.02c-.32.54-.95.97-1.85.97-1.44,0-2.47-1.22-2.47-2.83,0-1.97,1.28-3.08,2.61-3.08,1.01,0,1.56.53,1.81,1.01h.02l.05-.88h.92Zm-1.09,2.29c0-.18-.01-.34-.06-.48-.19-.61-.71-1.12-1.48-1.12-1.01,0-1.73.85-1.73,2.19,0,1.14.58,2.09,1.72,2.09.65,0,1.24-.41,1.46-1.08.06-.18.08-.38.08-.56v-1.04Z"/>
<path class="cls-1" d="m62.88,5.56c0,2.15-1.49,3.08-2.89,3.08-1.57,0-2.78-1.15-2.78-2.99,0-1.94,1.27-3.08,2.88-3.08s2.79,1.21,2.79,2.99Zm-4.61.06c0,1.27.73,2.23,1.76,2.23s1.76-.95,1.76-2.25c0-.98-.49-2.23-1.74-2.23s-1.79,1.15-1.79,2.25Z"/>
</svg>
2 лайка
Спасибо!
Мне удалось воспроизвести проблему.
На рабочем столе:
На мобильном:
Размер логотипа задается следующим кодом:
.d-header .title {
min-width: 36px;
}
Похоже, что если в коде SVG явно не указаны размеры, он устанавливается в 0. Например, я удалил значения ширины и высоты из логотипа Discourse, и вот что получилось:
Однако я не понимаю, почему в этом случае это работает на рабочем столе.
2 лайка
Я попытался найти проблему и, думаю, разобрался.
SVG находится внутри дочернего элемента flexbox <a class="title">, который по умолчанию не расширяется в зависимости от содержимого. Если у SVG-файла не заданы размеры, он не видит «причины» для роста, поэтому его ширина по умолчанию равна 0 пикселей.
Если разрешить контейнеру логотипа расширяться, проблема будет решена:
.d-header .title:not(.title--minimized) {
overflow: hidden;
flex-grow: 1; // добавлено
}
4 лайка
Спасибо за подробный разбор! Действительно, я использовал Inkscape. Перевод моего сайта в безопасный режим не меняет CSS, поэтому я не думаю, что проблема в теме или плагине:
В любом случае, похоже, что CSS здесь лишь отвлекающий манёвр, а виноваты размеры SVG. Мне также удалось воспроизвести вашу проблему, убрав размеры.
Я немного протестирую это, но решение выглядит хорошим… спасибо, что нашли проблему. Моя главная тревога касалась flex-grow и того, как он может взаимодействовать с соседними элементами заголовка, которые иногда добавляются в темах, но, похоже, по умолчанию всё работает отлично!
Эта проблема не возникает на десктопе, потому что у нас указана высота:
.d-header #site-logo {
height: 2.667em;
}
На мобильных устройствах мы предполагаем, что логотип, вероятно, больше доступного пространства, и ограничиваем его размер, чтобы он поместился:
.d-header #site-logo {
max-height: 2.4em;
max-width: 100%;
}
Таким образом, на десктопе SVG без размеров получают размеры через CSS, а на мобильных мы позволяем логотипу определять свой размер (ограниченный max-height или max-width, что сработает раньше). Поэтому, если нет размеров и нет директивы на увеличение, он остаётся крошечным (как предписывает min-width на .title; без него он вообще невидим!).
Другой возможный вариант — обновить max-height для мобильного логотипа до height. Это было бы согласовано с тем, как логотипы обрабатываются на десктопе.
Вероятно, я подготовлю исправление для этого уже завтра, но тем временем добавление размеров к SVG — это простое решение; даже не обязательно указывать точные размеры… если вы просто добавите width="1000" и ничего больше, он растянется, чтобы заполнить пространство, а его максимальный размер будет ограничен CSS.
2 лайка
Самый хитрый момент в том, что приложение, которое создавало SVG без размерностей, — это Illustrator. Пока я просто использовал PNG, но это скоро исправят. Не могу представить, чтобы я кому-то советовал бросить свой вектор в текстовый редактор, чтобы его изменить 
ха-ха
3 лайка
Да, я полагаю, что суть SVG как раз в том, чтобы не иметь фиксированных размеров, но это привнесло небольшую сложность, которой раньше не было у тегов изображений!
Их можно экспортировать из Illustrator с размерами, если в модальном окне опций SVG снять галочку с пункта «Адаптивная область» (это делается через меню Файл → Экспорт → Экспортировать как):
(Ещё одна проблема, с которой я сталкивался и которую можно избежать в модальном окне экспорта: если вы встраиваете SVG-изображение прямо на страницу как разметку, полезно переключить стилизацию на встроенную (inline). Иначе стили разных SVG могут конфликтовать, так как они, скорее всего, будут использовать одинаковые имена классов от Illustrator)
3 лайка
Я могу попробовать сказать им, что они делают это неправильно, но это, скорее всего, всё равно не объяснит, почему на компьютере всё в порядке, а на телефоне — нет 
2 лайка
Я только что объединил исправление, которое решит эту проблему и в целом сделает CSS для логотипов на десктопе и мобильных устройствах более согласованным
3 лайка
Превосходно, спасибо @awesomerobot
4 лайка
Эта тема была автоматически закрыта через 2 дня. Новые ответы больше не принимаются.