Embed SVG into liquid layout (or Responsive Web Design)

Here are the first tests (windows 7)

Firefox and Opera no problem ;) (only media-queries inside svg don't work with css image background... Update : Seems to work correctly with FF15)

ie9 failed with inline svg (with no width nor height)

Chrome needs some tricks

Safari is the bad guy ... on resize (small screen) the height doesn't change : (

Have a look to this page with different browsers (sorry for the code, not really clean... )

But finally... I've found a solution that works with all those browsers and <img /> , <object> , inline. So the browsers who had some problems with the first tests - Safari, Chrome and ie9 - won the match (media-queries are working with css background)FF 15 update, thanks FF ; ) . Here is the code snippet for embedding SVG into HTML for all browers.

• <img /> (my first attempts, the solution is the third)
• <object>
• inline
• css background (same as this page)

	
#logosvg{
  display:block;
  margin: 0 auto;
  width: 80%;
  height: auto;
  overflow:hidden;
}
	
	

		
#containObject{
  width: 80%;
  height:auto;
  margin: 0 auto;
}
		
		

	
#containSVG{
  width: 80%;
  height: auto;
  margin: 0 auto;
}
svg{
  max-height:100%; /* chrome needs it  */
}