SVG output is stretched

312 Views Asked by At

The SVG file in the following link is stretched horizontally in a bad way:

http://isometricland.net/svg/openworld_sandbox_nonlinear_venndiagram_bugreport.svg

I was wondering if there were a quick way to fix the file by editing the source?

Unfortunately, the developer of the software GeoGebra which I used to create the file is slow when it comes to fixing bugs and I am in a hurry. I would appreciate any help. Thanks.

[edit]

Here's what it should look like, roughly.

three circles in a square

1

There are 1 best solutions below

3
On BEST ANSWER

Change the viewBox attribute in the root <svg> element to the following.

viewBox="0 0 1605 887"

You may also want to change the width and height attributes to something more suitable. Use

width="100%" height="100%"

if you want it to fit inside a parent <div> or something. Or specify an exact size if you want that. Make sure you use a width and height with the same aspect ratio though (1615/897).

Update

Option 1: To make it display as a square, you need to change the viewBox as above, but also change the preserveAspectRatio setting. Make the following changes to the root <svg> element.

viewBox="0 0 1605 887"
preserveAspectRatio="none"

The diagram will still be very large because the width and height are set to "60cm". If you want it smaller, just change these to something more suitable - eg. "600px". Or, if you want, make them "100%" as above and put them in a square <div>.

Option 2: Or as an alternative to the above, you can add a transform to the first <g> element (that wraps the whole diagram).

<g stroke-linejoin="miter" stroke-dashoffset="0.0000" stroke-dasharray="none"
   stroke-width="1.0000" stroke-miterlimit="10.000" stroke-linecap="square"
   transform="scale(0.474 0.858)">

This transform is equivalent to the implicit transform that the changed viewBox above is causing.

The comments, in Option 1, about changing the width and height, apply here also.