SVG into liquid layout
or Responsive Web Design

css snippet for all (modern) browsers and all embed modes ( <img /> , <object> , inline <svg> ) 

		
.my-svg-container{
 display: inline-block;
 position: relative;
 width: 50%;
 padding-bottom: 60%; /* depends on svg ratio, for my zebra height/width = 1.2 so padding-bottom = 50% * 1.2 = 60% */
 
 vertical-align: middle; /* top | middle | bottom ... do what you want */
}


.my-svg{ /* svg into : object, img or inline */
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; /* only required for <img /> */
}

.svg file settings : I removed the width and height attributes and added : 

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

Without viewBox preserveAspectRatio has no effect

If you know a better way to do that, tell me ! @eQRoeil or eqroeil[at]gmail.com

And if you want to see my first attemps, SVG as a CSS background-image or links with SVG in <object>, have a look.

Object <object class="my-svg" >

Image <img class="my-svg" />

Inline svg <svg class="my-svg" preserveAspectRatio= "xMinYMin meet" viewBox="0 0 800 960" >

Why are you talking about media-queries ?

SVG media-queries

We can add media-queries to the svg file into a <style> tag. Then we can hide/show elements (path, circle, text...) depending on the screen size (not really the screen size but the width of the embedded svg, needs some tests and maths).

I made a ugly tag that says "You can use SVG in Responsive Web Design" on large screen, or "Use SVG in RWD" on smaller ones. Give it a try and resize your window. (And you can hide this ugly tag when it's done... ).

I used an <object> with callback (png). This time I used position: absolute onto the container (yes, display: inline-block is not required...)

The zebra is red when the svg is small, then green, then blue for inside svg media-queries.

CSS media-queries

In wide screens the svg and the notes are side by side. When the line width is too small, the notes go under the svg (nothing new). The width of the svg container is changed (bigger : from 50% to 80%) at this breakpoint.

The zebra is dark gray or light gray with inline embedding, this time the fill: color is changed with CSS MQ (the #path3087 in the source)

1194