Jump to content
mcpete

Set svg tag height+width to pixel dimension on export.

Recommended Posts

Hi

 

Just switched to Affinity Designer this week and love the app.

 

I'm a Web/UI designer and need to able to export svg icons for web. I like the export features in AD, but I'm having an issue with the exported SVGs. The svg tag within the the svg file is exported with height and width set to 100%. (eg. <svg width="100%" height="100%" viewBox="0 0 44 44" … ). This is given me problems with creating svg icons to be used as background img in css, which needs specifically defined height & width in pixels. Right now I would have to open the svgs in a text editor and change them manually, which isn't a fun thing to do.

 

So I'd like to see an export option that would set those dimension based on the slice dimensions, in pixels.

 

Thanks for making such a great app. 

-Pete

Share this post


Link to post
Share on other sites

Hi Pete,

 

I think we'd have to make this an option as you said - we used to write simply width and height as pixel dimensions and no viewBox, but it meant that people couldn't use their SVGs easily as scalable elements on their pages, so we defaulted to the current solution. I'll look at adding the option soon :)

 

Thanks for the suggestion,

Matt

Share this post


Link to post
Share on other sites

Hi jardakotesovec,

Welcome to Affinity Forums.

We have already taken note of this request. Up voting features will not change or speed up the order things will be implemented.

There are other factors/constraints that must be taken in consideration during development that may delay (or speed up) the implementation of certain features.

Share this post


Link to post
Share on other sites

As it happens, I implemented this option yesterday, and it should be in the next beta. The choice is between:

  • <svg width="100%" height="100%" viewBox="0 0 40 40"
  • <svg width=40px height=40px

Hopefully one of those will satisfy all parties.

Share this post


Link to post
Share on other sites

As it happens, I implemented this option yesterday, and it should be in the next beta. The choice is between:

  • <svg width="100%" height="100%" viewBox="0 0 40 40"
  • <svg width=40px height=40px

Hopefully one of those will satisfy all parties.

Where is that option? I Only see a checkbox for "set view box", with no further options. 

Share this post


Link to post
Share on other sites

Gotcha, thanks. I guess this is a very specific technical term, but perhaps a friendlier label could be used ("set dimensions as percentages", "relative dimensions"?)

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

Important Information

Please note the Annual Company Closure section in the Terms of Use. These are the Terms of Use you will be asked to agree to if you join the forum. | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.