automatic resize of an SVG

[Sergiy Nesterko]

Hi everyone,

Hope your d3 projects and other things are moving along well. I have a
general question about d3. Here is a quote of Mike Bostock:

On
the other hand, vector-based graphics offer advantages as well, such
as the ability to scale the graphic up to arbitrary sizes. You can
print SVG to PDF to embed it in other documents, or simply increase
the size of the SVG and the graphic will resize automatically.

Is there a way to easily do this without manually updating (invoking
transitions) for all the elements in your d3-controlled SVG? Plain
resizing of an SVG element in an html page would not work, or would
it? Thank you.

Sergiy

[Mike Bostock]

If you set the viewBox attribute, you can then set the width and
height attributes independently, and the content will be rescaled. You
can also adjust the preserveAspectRatio attribute as desired. For
example, say I have an existing SVG that is 600x600. I can make it
wider:

d3.select("svg")
.attr("viewBox", "0 0 600 600")
.attr("width", "1280")
.attr("preserveAspectRatio", "none");

http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute

Mike

[Chris Viau]

Look at this example and try resizing your window: http://christopheviau.com/d3_tutorial/d3_examples/ . Maybe it can help.

[Ian Johnson]

I ran into an issue with getting the transformed coordinates of an object (using it's bbox) when doing things in the resizable way with viewBox and preserveAspectRatio. I got it working so hopefully this code might be of some benefit

http://bl.ocks.org/1276555

On Sat, Oct 15, 2011 at 3:09 PM, Chris Viau <christo...@gmail.com> wrote:

Look at this example and try resizing your window: http://christopheviau.com/d3_tutorial/d3_examples/ . Maybe it can help.

--
Ian Johnson

http://enja.org

[Sergiy Nesterko]

Great, thank you so much. Sergiy

[Atl Ank]

Hi,

Is there anyway svg will dynamically resize when the content size excceds the mentioned SVG width and height?.. Like contetnt overflows and i am not able to see  rest of the content outside the defined SVG width and height range. 

Thanks in adavnce for your reply.

Ank