SVG dimensions when exporting from Designer

[vgaizutis]

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 January 7, 2021 by vgaizutis

[v_kyr]

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

 

[vgaizutis]

I had the following:

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

[v_kyr]

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!

[Gatada]

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

[Old Bruce]

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.

[v_kyr]

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!

[vgaizutis]

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 January 8, 2021 by vgaizutis

[v_kyr]

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!

[vgaizutis]

I agree. Checking is the only way to know for sure.

[v_kyr]

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