Jump to content

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

Recommended Posts

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! :)



Share this post

Link to post
Share on other sites

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.

Share this post

Link to post
Share on other sites

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.

viewbox viewport.jpg


Share this post

Link to post
Share on other sites

For another practical example, I need to add


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

Share this post

Link to post
Share on other sites

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...

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now