how to resize a large svg to fit inside a div

javascript html css svg snap.svg
naheed picture naheed · Jan 14, 2014 · Viewed 26.8k times · Source

I have the following div inside <body>.

<div style="width:320px; height:480px;">
    <svg id="svg1"></svg>            
</div>

I want to fit a 640X480 svg inside this div. I have tried this:

var paper=Snap("#svg1");
Snap.load("somesvg.svg",function(f){ 
 paper.append(f);
 }); 
 paper.attr({ 
 width:320, height:480
 })

But the svg is cut off from the right size.

Answer

Ian picture Ian · Jan 14, 2014

I was wondering about adjusting the viewBox for this, so something like...

<div style="width:320px; height:480px;">
    <svg id="svg1" width="100%" height="100%" viewBox="0 0 640 480" preserveAspectRatio="xMaxYMax"></svg>
</div>

jsfiddle http://jsfiddle.net/9zRR8/5/

Related questions

Retrieve the position (X,Y) of an HTML element relative to the browser window

I want to know how to get the X and Y position of HTML elements such as img and div in JavaScript relative to the browser window.

Read More
Set cookie and get cookie with JavaScript

I'm trying to set a cookie depending on which CSS file I choose in my HTML. I have a form with a list of options, and different CSS files as values. When I choose a file, it should be saved …

Read More
Failed to load resource: the server responded with a status of 404 (Not Found)

I can't solve my link problem. Could you help on to this to link CSS and JS File? CSS: <link href="../Jquery/jquery.multiselect.css" rel="stylesheet"/> <link href="../Jquery/style.css" rel="stylesheet" /> <link …

Read More