Logo (in svg) appears in Mozilla and not in Chrome

Asked

Viewed 1,172 times

1

Imagem do problema

As you can see in the image, the logo is appearing in Mozilla and not in Chrome.
I even tested it in Internet Explorer and also appears, which leads me to believe that the problem happens exclusively in Chrome.

Does anyone have any idea what it might be?

An excerpt from my code:

HTML:

<header id="main-Header">
<div id="wrapper">
    <div class="main-Logo">
        <img src="img/logo.svg">
    </div>
    <div class="main-Title">
        <h1>Lamonier</h1>
        <p>Web Design inteligente e com alta performance,</p>
        <p>utilizando as melhores tecnologias atuais</p>
    </div>
</div>

CSS:

#main-Header{
height: 0px;
background: rgb(89,103,255);
background: -moz-linear-gradient(top, rgba(89,103,255,1) 0%, rgba(144,65,255,1) 100%);
background: -webkit-linear-gradient(top, rgba(89,103,255,1) 0%,rgba(144,65,255,1) 100%);
background: linear-gradient(to bottom, rgba(89,103,255,1) 0%,rgba(144,65,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5967ff', endColorstr='#9041ff',GradientType=0 );
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}

#main-Header .main-Logo{
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
  • Stackoverflow offers a variety of solutions to this problem, such as: (1) https://stackoverflow.com/q/10737166/8133067 , (2) https://stackoverflow.com/q/41195669/8133067 , (3) https://stackoverflow.com/q/5321984/8133067

  • I will varify and then communicate the result. Thank you for your attention!

  • Resolved, Thank you!

  • If you can put an answer (to your own question), describing which method you used to solve the problem, it is documented and can help other people. You’re welcome!

1 answer

2


The problem was the way I treated the image, IMG

<img src="img/logo.svg">

Apparently Chrome does not handle svg formats using the tag IMG

The solution was to treat as an object as follows:

<object data="img/logo.svg" type="image/svg+xml"></object>

Browser other questions tagged

You are not signed in. Login or sign up in order to post.