"Моргает" svg. Как исправить?

Question

[infab]

При переходах между страницами на сайте в шапке как бы "моргает" svg логотип. Можно ли как то исправить это?

Comments

[iBird Rose]

а как он у тебя подклчюается? а лучше весь код в студию

[infab]

iBird Rose:

.page-head .logo {
background: url(../images/logo.svg) center left no-repeat;
width: 360px;
height: 96px;

[infab]

iBird Rose: бекграундом для ссылки

[iBird Rose]

infab: все равно код нужен.

[infab]

iBird Rose: написал в ответ

[iBird Rose]

infab: я не вижу косяков. значит дело в самом svg

[iBird Rose]

infab: или косяк идет от какого то другого элемента.

Answer 1

[Максим Тимофеев]

SVG дольше рендерится. Повесьте на него эффект с анимацией после загрузки и это замаскирует Вашу проблему. Вылезание сверху и т.п.
Какой вес у svg? Насколько он оптимален?

Answer 2

[infab]

<div class="container">
        <a class="logo" href="/"></a>
        <div class="slogan">
            <p class="slogan__text">Церковь христиан веры евангельской г. Самара</p>
        </div>
        <div id="search" class="search">
            Поиск...
        </div>
        <div class="social">
            <span class="social__text">Мы в соцсетях:</span>
            <a href="http://vk.com/maranafa_samara" class="social__link--vk" target="_blank"></a>
            <a href="https://www.instagram.com/maranafachurch/" class="social__link--insta" target="_blank"></a>
        </div>

        <div class="clear"></div>
    </div>