How to put a logo in .svg format.

At the moment I put it like this:

 <div class="col-lg-4 col-md-4 col-sm-5 col-xs-12 col-sm-offset-4 logo-inner"> <div class="logo-store" > <a href="<?php echo $home; ?>"> <img src="image/catalog/logo55.svg" title="<?php echo $name; ?>" alt="<?php echo $name; ?>" /> </a> </div> </div>

But it is not displayed. And even if it turns out, then all the proportions are floating. Maybe as a code to set the size and proportions .SVG ?

Questions why .SVG ? Yes, because it looks more worthy in the mobile version of the site. And not a soap logo.

  • Your markup is correct. Just checked - on a blank page, nothing just floats like that. Moreover, I did not even succeed in specifically making the proportions float. Perhaps you have the picture itself initially floated? .. - Pavel Mayorov

2 answers 2

Method # 1 - Using the object tag

 <object type="image/svg+xml" data="image.svg"> Your browser does not support SVG </object>

Method number 2 - using the embed tag

 <embed type="image/svg+xml" src="image.svg" />

Method number 3 - using iframe

 <iframe src="image.svg"> Ваш браузер не поддерживает SVG </iframe>

Method number 4 - using CSS

 #myelement { background-image: url(image.svg); }

Methodo number 5 - using the img tag

 <img src="image.svg">

Supported browsers: IE9 +, Chrome (all), Mozilla (all), Safari 3.0+, Android 3.0+ Successful coding ...

  • The author has a problem with the img tag - and you advise him ... to put the img tag? - Pavel Mayorov
  • Why get personal? I described all the possible ways. For example, the img tag works for me. He does not have. Or img tag can not be used for svg. You can after all. What do you say to that? I see you have nothing to do. - Urmuz Tagizade
  • 2
    The author has a problem not with the display of pictures in general, but with maintaining the correct aspect ratio! The value of your answer is zero. - Pavel Mayorov
  • The purpose of my comment is to show those with a serious problem with the answer. - Pavel Mayorov

I would put it better:

 <svg>код картинки svg</svg>

Then you can insert the necessary attributes, classes into the svg itself, and through the viewbox you can change the required dimensions, etc., all the possibilities inside the svg, and if inserted through the same backgroung or as img, it will not be managed.

  • What does the picture code mean? - Blacksmith Pa
  • svg is the code, and how you see it in the illustrator or sketch is the reproduction of the code, the point is that by inserting svg through the <svg> tag you put the original as it were and you can continue to manage it in any desired form, all the rest options will not give such an opportunity. Learn what svg is and how it works, there is a huge field for a run. In a nutshell, inside the svg image code, each "line" is available to change color, size, state change, animation is available, etc., etc. - Paralerodrom
  • one
    I agree in half - everything that can be done with SVG when inline is added to HTML is just as possible when adding an SVG file via object @Pasha Dark recently appeared in [Yoksel] [ css.yoksel.ru/a11y-for-logotypes/] interesting , a very detailed article on adding a logo to the page. - Alexandr_TT