¿Cómo proporcionar un diseño sensible para svg?

Soy nuevo en raphael Escribí svg tag dentro de div. Por favor vea esta muestrahttp://jsfiddle.net/dhana36/bvs6P/1/

Utilice CTRL + y CTRL- y encontrará la diferencia.

HTML:

<div class="outer">
<svg height="640" version="1.1" width="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100% 640" preserveAspectRatio="xMinYMin" style="overflow: hidden; position: relative; left: -0.625px;" class="stretchBar">
<desc style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
Created with Raphaël 2.1.0
</desc><defs style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></defs>
<path fill="none" stroke="#000000" d="M228,109L228,110Z" stroke-width="200px" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path>

</svg>
</div>

css:

.outer{

    width:30%;
    height:30%;
}

¿Cómo implementar svg responsive con contenido?

Respuestas a la pregunta(1)

Su respuesta a la pregunta