У меня есть «стандартный» фрагмент веб-заголовка lo go, который я использую с SVG lo go по предпочтению, код выглядит следующим образом:
<div class="site-branding">
<a id="logo" href="/">
<img src="/pathto/logo.svg">
</a>
</div>
Размер различных компонентов управляются CSS.
Проблема, с которой я сталкиваюсь, заключается в том, что при визуализации страницы сначала выполняется SVG dr aws, так что она мигает на полную ширину, прежде чем CSS для контейнеров ограничит ее. Кажется, что SVG, как XML без информации о размере, отображается перед изображением и по умолчанию является полной шириной области просмотра. Если я использую PNG, он имеет информацию о собственном размере, поэтому на него не влияют одинаково.
Обычно это не проблема, и, конечно, не после того, как страница кэшируется, но при медленном соединении это может быть очевидным и уродливым. Даже при более быстром соединении часто появляется флаг sh большего изображения.
Что мне нужно сделать, чтобы предотвратить такое поведение? Следует сказать, что жесткое кодирование размера тега img - мой наименее любимый вариант.