Back

SVG inside <img /> (1)

	
img{
max-width: 100%;
height: auto;
display: block; /* safari needs it, 
sometimes the svg ratio is lost */ 
}

.imgsvg{ /* the container */
  display: inline-block;
  width: 50%;
  vertical-align: middle;
  box-shadow: 0 0 2px #26967C inset;
}

OK :

Fail :

SVG inside <img /> (2)

using height : 0 and padding-bottom : constant ratio w/h for the container

	
.imgsvgNoHeight{
  position: relative;
  display: inline-block;
  width: 50%;
  height: 0;
  padding: 0;
  padding-bottom: 60%; /* ratio from the svg 960/800 = 1.2 */
  vertical-align: middle;
  box-shadow: 0 0 2px #26967C inset;
  overflow: hidden;
}
.imgsvgNoHeight #logosvg2{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}/* opera chrome ie9 need that or a smaller width (90%) ? */

OK :

Fail :

SVG inside <img /> (3) It works ! 

	
.imgsvg3{
  display: inline-block;
  width: 50%;
  vertical-align: middle;
  box-shadow: 0 0 2px #26967C inset;
  position: relative;
  padding-bottom: 60%; /* yes !! ; ) */
 /* different from (2) -> no height: 0;*/ 
}

#logosvg3{
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

OK :