Loading svg images responsively in a bootstrap panel - svg

Question

I have a panel into which I want to embed an SVG image. On clicking on the panel body I want to open a modal window displaying the svg image full screen.
What ever the size of the SVG image be, I want it to fit - by compression or stretch - in both panel and the modal window, which would be full screen.
Here is the html
<div class="panel-body" data-toggle="modal" data-target="#myModal">
<embed src="test.svg" id="testsvg" type="image/svg+xml"/>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Some Name</h4>
</div>
<div class="modal-body">
<div class="svg-container">
<embed src="test.svg" id="testsvg" type="image/svg+xml"/>
</div>
</div>
</div>
</div>
</div>

Answer 1

I got help from this library
Here is an example
<div class="panel-body" id="SVGPanel">
<embed src="1.svg" id="testsvg" name="testsvg" type="image/svg+xml"/><!--</object>-->
</div>
And the java script
function elastic(newsvgPanelWidth)
{
var windowwidth = newsvgPanelWidth;//$(window).width();
var windowheight = $(window).height();
var imageheight;
var imagewidth;
var svgfile=document.getElementById("testsvg");
var SvgDoc;
SvgDoc=svgfile.getSVGDocument();
if(SvgDoc==null)
{
SvgDoc=svgfile.contentDocument;
}
alert("SVG contentDocument Loaded!"+SvgDoc);
var allSvgElements = SvgDoc.getElementsByTagName('svg');
for(var i = 0; i < allSvgElements.length; i++)
{
var element = allSvgElements[i];
alert(element);
if(element.getAttribute("width")!=null)
{
imagewidth=element.getAttribute("width");
}
if(element.getAttribute("height")!=null)
{
imageheight=element.getAttribute("height");
}
}
$("#SVGPanel").width(windowwidth);
$("#SVGPanel").height(windowheight);
var $section = $('#SVGPanel');
var $elem =$section.find('#testsvg');
var $panzoom = $elem.panzoom(
{
startTransform: 'scale(1.0)',
maxScale: 100,
increment: 0.5,
contain: true
}).panzoom('zoom', true);
var offsetwidth =1+ ((windowwidth-imagewidth)/imagewidth);
var offsetheight = 1+((windowheight-imageheight)/imageheight);
var twidth = imagewidth*((offsetwidth-1)/2);
var theight = imageheight*((offsetheight-1)/2);
$elem.panzoom("setMatrix", [ offsetwidth, 0, 0,offsetheight, twidth,theight ]);
//$elem.panzoom("setMatrix", [1, 0, 0, 1, 0,0 ]);
$elem.panzoom('option', 'contain', false);
}
What I did was I took the screen width and Height and found the difference and thus the percentage to width and height of the actual SVG file to be increased and used the library to set those params.
With little bit more tweak and math the svg image would perfectly fit the parent component.