resizing a large svg to fit inside a div

8,202 views
Skip to first unread message

naheed arafat

unread,
Jan 13, 2014, 11:04:57 PM1/13/14
to sna...@googlegroups.com
Hi, 
i have the follwing 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 tried this:

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

But the svg is cut off from the right size. 

Thomas Shinnick

unread,
Jan 14, 2014, 12:52:02 AM1/14/14
to sna...@googlegroups.com
When I tried a test it seemed as though the svg element defaulted to 300 wide by 150 high.  You want to force the svg element to occupy the whole size of the outer div.

  <div style="width: 320px; height: 480px; border: 1px solid red;">
    <svg id="svg1" height="100%" width="100%">

But then you will need to worry more.  You said the loading svg was 640x480, but your div is only 320x480 ?  So.... you want to resize the div with the size of the loaded svg?

naheed arafat

unread,
Jan 14, 2014, 1:23:32 AM1/14/14
to sna...@googlegroups.com
thanks for your reply.
So.... you want to resize the div with the size of the loaded svg?
no, i want the opposite. i want to resize the svg with the size of the div or you can say, scale the svg such that it fits inside the div. The thing is i want to maintain a fixed hight/width ratio of the svg irrespective of the hight-width of the outer div. 

naheed arafat

unread,
Jan 14, 2014, 1:24:11 AM1/14/14
to sna...@googlegroups.com

Ian

unread,
Jan 14, 2014, 5:20:02 AM1/14/14
to sna...@googlegroups.com
How about something like this... http://jsfiddle.net/9zRR8/5/

naheed arafat

unread,
Jan 14, 2014, 12:24:28 PM1/14/14
to sna...@googlegroups.com
adding viewBox attribute worked. Thanks. 
Reply all
Reply to author
Forward
0 new messages