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.

SVG inside <img />

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

media-queries inside svg


SVG inside <object>

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

media-queries inside svg


SVG inline

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

media-queries inside css

SVG as CSS background-image

Media-queries into svg are applied differently...

only Firefox needs -moz-background-size: cover; (The SVG keeps the ratio, other browser don't need more...)


Inside svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 800 960"

Containers have a width (80% here)

17175