Jump to content
You must now use your email address to sign in [click for more info] ×

SVG dimensions when exporting from Designer


Recommended Posts

I need to export designs as SVG so that they could be used in a web UI at a specific size (150 x 150 px). By this I mean that the graphic sits in a transparent space of those dimensions. However, even if I create a canvas with those dimensions and select to export the entire document, the SVG I get have dimensions that are based only on the space occupied by the objects inside the canvas and not including the clear space they sit in. I even tried making a rectangle in the background that's 150x150 px and setting opacity to 0% without luck.

In AdobeXD, for example, I can create an artboard that's 150x150px and export it with the resulting SVG being exactly the way I need it to be.

How can I do this in Affinity Designer? I'd like to create all of my SVGs in AD.

Edited by vgaizutis
Link to comment
Share on other sites

Hi and welcome!

Which setup options did you used when exporting/generating the SVG files? - Usually you can afterwards open an SVG file inside a plain text editor and edit it's viewBox settings. So instead of ...

Quote

<svg width="100%" height="100%" viewBox="0 0 150 150" ...

... you can also specify width and height as pixels ...

Quote

<svg width="150" height="150" viewBox="0 0 150 150" ...

 

☛ Affinity Designer 1.10.8 ◆ Affinity Photo 1.10.8 ◆ Affinity Publisher 1.10.8 ◆ OSX El Capitan
☛ Affinity V2.3 apps ◆ MacOS Sonoma 14.2 ◆ iPad OS 17.2

Link to comment
Share on other sites

3 hours ago, vgaizutis said:

Preset: SVG (for export)
Raster DPI: left blank
Area: Whole document

Under the SVG export options (the More... button and the panel which appears then) uncheck the "Set viewBox" setting and retry exporting as SVG again. Then inspect the generated SVG output in a webbrowser for preview and if you want also inside a text editor!

☛ Affinity Designer 1.10.8 ◆ Affinity Photo 1.10.8 ◆ Affinity Publisher 1.10.8 ◆ OSX El Capitan
☛ Affinity V2.3 apps ◆ MacOS Sonoma 14.2 ◆ iPad OS 17.2

Link to comment
Share on other sites

Been fighting the same issue myself. I found somewhat of a solution:

  1. I changed the document resolution to Points, originally in pixels.
  2. Adjusted the size and stroke of my icons: artboard 22 x 22, stroke 1pt.

The viewport of the exported files were somewhat matching the artboard - their viewport was set to 23 x 23. No idea where that came from. I am on grid with all the artboards, both size and location, so not sure why the size increased (I presume it rounded up for some reason).

First I tried following the tip from @v_kyr but it didn't make a difference for my artwork (AD 1.8.6).

Link to comment
Share on other sites

2 hours ago, Gatada said:

Been fighting the same issue myself. I found somewhat of a solution:

  1. I changed the document resolution to Points, originally in pixels.
  2. Adjusted the size and stroke of my icons: artboard 22 x 22, stroke 1pt.

The viewport of the exported files were somewhat matching the artboard - their viewport was set to 23 x 23. No idea where that came from. I am on grid with all the artboards, both size and location, so not sure why the size increased (I presume it rounded up for some reason).

First I tried following the tip from @v_kyr but it didn't make a difference for my artwork (AD 1.8.6).

I am not entirely sure of what you are trying to achieve but one thing you have wrong here is Resolution is in PPI/DPI so many Pixels/Dots Per Inch. A Point is a unit of length, 72 of them to an inch. You changed the document's unit of measurement, not its resolution, to Points, so you have an artboard about a third of an inch square and I don't know what the resolution is.

Mac Pro (Late 2013) Mac OS 12.7.4 
Affinity Designer 2.4.0 | Affinity Photo 2.4.0 | Affinity Publisher 2.4.0 | Beta versions as they appear.

I have never mastered color management, period, so I cannot help with that.

Link to comment
Share on other sites

3 hours ago, Gatada said:

The viewport of the exported files were somewhat matching the artboard - their viewport was set to 23 x 23. No idea where that came from. I am on grid with all the artboards, both size and location, so not sure why the size increased (I presume it rounded up for some reason).

There is always a reason when I tell people to also inspect the generated SVG output inside a text editor! - SVG code is writen as a XML based text format, so the whole all settings, applied commands etc. are directly readable and changable inside an SVG file, which strictly speaking is nothing else as an UTF-8 generated text file with definitions and commands inside.

Further when inspecting a SVG inside an editor, one can immediately see and prove what size (width & height) and viewBox(x y w h) settings have been applied. We can edit and change these to our individual needs here. - There is no magic behind the SVG file format, the whole is a standard and pretty well documented.

The only drawback is, that a bunch of third party applications, like the Affinity apps, can just deal with a minimum subset of the whole SVG standard and thus aren't capable of making use out of everything here that SVG usually offers and supports!

☛ Affinity Designer 1.10.8 ◆ Affinity Photo 1.10.8 ◆ Affinity Publisher 1.10.8 ◆ OSX El Capitan
☛ Affinity V2.3 apps ◆ MacOS Sonoma 14.2 ◆ iPad OS 17.2

Link to comment
Share on other sites

I'm currently creating my SVGs using AdobeXD because it's pretty simple, I get the results I need, and I don't (in my particular case) need to use a text editor to review or modify. I'm already doing other work with XD (primarily UI designs) so it makes sense.

That said, I wish I could just follow a similar workflow in Affinity Designer; just create the design and export. My hunch was that I was simply missing something; a setting or preference. 

Edited by vgaizutis
Link to comment
Share on other sites

7 minutes ago, vgaizutis said:

I'm currently creating my SVGs using AdobeXD because it's pretty simple, I get the results I need, and I don't (in my particular case) need to use a text editor to review or modify.

All fine and good, but in case your SVG results wouldn't look like expected, how do you detect the reason and what might have gone wrong here and what's the cause of all evil and the reason then (no matter here if AdobeXD or Affinity apps or something else)? - You can't always trust blindly what third party tools do generate as SVG output here, especially if it doesn't do what is expected, thus it's good to have the option to examine and detect possible pitfalls then via above mentioned editor method. So you are on the more secure side!

☛ Affinity Designer 1.10.8 ◆ Affinity Photo 1.10.8 ◆ Affinity Publisher 1.10.8 ◆ OSX El Capitan
☛ Affinity V2.3 apps ◆ MacOS Sonoma 14.2 ◆ iPad OS 17.2

Link to comment
Share on other sites

Sadly there aren't any real visual SVG inspectors/debuggers like this created demo example here shows, would be useful to have too ...

☛ Affinity Designer 1.10.8 ◆ Affinity Photo 1.10.8 ◆ Affinity Publisher 1.10.8 ◆ OSX El Capitan
☛ Affinity V2.3 apps ◆ MacOS Sonoma 14.2 ◆ iPad OS 17.2

Link to comment
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.

Loading...
×
×
  • Create New...

Important Information

Terms of Use | 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.