AD: SVG exportdialog: Add options to turn on/off autoscale and choose preserveAspectRatio-mode

[Friksel]

Looking at the SVG output at the moment SVG's always get a 100% width and 100% height, meaning they always scale up or down to a parent-window (in a browser).

But there are a lot of usecases we don't want SVGs to scale on websites and if we do it would be nice if we could set how the responsiveness would behave, so to wich windowborder the image would stick and if we want to keep the aspect ratio while scaling. These are all very simple SVG attributes that only have to be added to the svg when we need it. Browsers are doing the rest.

 

At the moment there is no setting in the SVG settings to turn the auto scaling (100% width/height) behaviour off in the SVG, meaning we have to manually take these attributes out of the SVGs each time we export an SVG if we don't want autoscale. It would be a lot easier, faster and less time consuming if we could just set these settings once inside the SVG export options to save it with our own preset.

 

So what I ask for in the SVG export settings dialog is:

- A switch to choose between using document width/height (keep size) or 100% width/height (auto scale)

- A listbox to choose the 'preserveAspectRatio' attribute in the SVG so we can set this to:

      - none, xMinYMin, xMidYMin, xMaxYMin, xMinYMid, xMidYMid (the default), xMaxYMid, xMinYMax, xMidYMax, xMaxYMax (as described here: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio)

 

These are important settings for exporting SVGs for Web and not very difficult to add to the dialog cause they only change 3 attributes in the svg tag. But they speed up the process of SVG exports a lot because these changes don't need to be made by hand in a texteditor after each export! 

Thanks!

[mark-h]

The preserveAspectRatio attribute is definitely a feature I would like too. I'm editing too many individual images with notepad just to add this in.

[MEB]

Hi Friksel,

Regarding the first issue, untick Set viewBox (More button on the Export dialog) when exporting the SVG.

[Friksel]

Thanks for your reaction @MEB. I saw the viewBox-setting and that unticking the viewbox-checkbox indeed sets the width and height to exact dimensions, but viewbox and width/height attributes are two different things. Viewbox is meant to set the window which defines which part of the image will be shown on the viewport/output, while width/height (basically the viewPORT) set the dimensions of the output. One has nothing to do with the other.

 

For example for animations I control the viewbox to pan, tilt and zoom (or even stretch) the image with Javascript, while the width/height of the output stay the same.

 

What's happening right now is that the output of the image always gets renderered to 100% of the window size when viewBox is ticked and if the viewBox is unticked there is indeed a fixed image size, but there suddenly is no viewbox anymore. That's not right.
 

To illustrate this a little more I just created an illustration. (Don't look at the awful design, it's just to get the point accross).

Here you can see the SVG with all its graphical elements, in this case 2 circles. The viewbox defines the region of the svg it would show on the output. 

On the bottom right you see the viewPORT, which is defined in the SVG output by 'width' and 'height' attributes.

It's important to know that the width and height of the output(viewPORT) doesn't have to be the same as the width and height of the viewBOX. And that's important, because of this:

- sizing the viewPORT (so the bottom right rectangle in the illustration) will change the size of the output

- sizing the viewBOX (so the top left rectangle in the illustration) will change the visible area-position and scaling of the image.
  If the viewBOX is set smaller the image gets scaled up (zoomed in), if the viewBOX is set larger the image gets scaled down (zoomed out), while the viewPORT remains the same and keeps the same output-size

 

Hopefully this helps to get my point accross. Both attributes are very important attributes to have in the SVG-output and can't be left out for responsive and interactive use on websites.

Right now we have to enter these values in a text editor for all SVGs and each and every time again after a change in designer. That's not a very efficient workflow. Especially because Designer has all data it needs, it only needs to output in the export.

[mark-h]

For another practical example, I need to add

preserveAspectRatio="xMinYMin"

to SVGs when they're used as background images in CSS to ensure they can be correctly positioned and stay consistent in all browsers.

[outline4]

I need this too. At least as an option. I have to manually add preserveAspectRatio="xMinYMid" on every svg I create in order to be able to use it as a background image in Internet Explorer. 

It's easy to forget...

[Friksel]

Just a bump on thisone. To me, and I guess more companies working with (interactive) SVG, this is an important feature to have. It doesn't seem difficult or a big gamechanger to add to the exportmenu, so I was hoping this would make it in 1.7, but so far it's not there. It would be great if this could get some love and be implemented in Designer! Right now after each save we need to add these svg attributes in a text editor afterwards.

[alexander.s.farley]

Just ran into this issue yesterday. Setting preserveAspectRatio on export or document settings would be very helpful for web design work.

[dominik]

Hello Alexander,

welcome to the forum. Just a friendly suggestion. Don't use a real email adress as a user name. It is very likely that spam robots are picking this up. You can change your user name in the account settings on the top right of this page.

Cheers,
d.

[fde101]

2 hours ago, dominik said:

Don't use a real email adress as a user name.

And yet by quoting him you have arranged for the email address to stick around in a place where that user can't edit it?

[dominik]

1 hour ago, fde101 said:

And yet by quoting him you have arranged for the email address to stick around in a place where that user can't edit it?

Yes, this was really stupid by me. Please excuse this. I removed the quote.

d.