请问如何导出SVG才能按照原本的尺寸导出？

[Shimotsuki_affinty]

论坛上的各位好，不好意思我英文不多好，只能用中文问问题。

我在 Affinty Design 上，画好一批 28x28 大小的 icon，

现在想通过导出界面导出成SVG，

但是我怎么设置都只能导出 1x1 的SVG。😭

请问怎么样才能导出源尺寸的SVG呢？

[thomaso]

Hi @Shimotsuki_affinty,
Welcome to the Affinity Forums!

It seems the 28 x 28 of your Affinity document have the unit "pixels" – whereas the 1 x 1 in the other application does not look like pixels but like a different unit.

So it appears the SVG was exported correctly in 28 x 28 px size. – I think you should find out what unit the 1 x 1 has or refers to. If it would be pixels I assume it would display black only and no drawing at all.

[Shimotsuki_affinty]

2 hours ago, thomaso said:

Hi @Shimotsuki_affinty,
Welcome to the Affinity Forums!

It seems the 28 x 28 of your Affinity document have the unit "pixels" – whereas the 1 x 1 in the other application does not look like pixels but like a different unit.

So it appears the SVG was exported correctly in 28 x 28 px size. – I think you should find out what unit the 1 x 1 has or refers to. If it would be pixels I assume it would display black only and no drawing at all.

figma里面应该是PX。

我应该怎么设置Affinty Design文档中的单位，使其输出我需要figma用到的icon呢？

Edited September 18, 2022 by Shimotsuki_affinty

[Palatino]

47 minutes ago, Shimotsuki_affinty said:

我应该怎么设置Affinty Design文档中的单位，使其输出我需要figma用到的icon呢？

Either 28px x 28px or doesn't matter. See screenshots:

1. Export as SVG
2. Open SVG file in an editor and resize it (original size was 100px).

[thomaso]

5 hours ago, Shimotsuki_affinty said:

figma里面应该是PX。

If the hints of @Palatino don't work sufficiently you might ask a Figma support or forum, because your screenshot appears to tell confusing info for Figma: While it reports a width & height of 1 px this image shows all details of your Affinity drawing (SVG), which in my understanding would not be possible in 1 x 1 pixel. So maybe Figma does not interpret incoming data correctly?

 

@Palatino, kann hier die Dokument bzw. die Export-Auflösung eine Rolle spielen?

• Wenn ich ein SVG mit 28x28 px / 1 dpi als 72 dpi exportiere wird es in einem 300 dpi .afpub riesig platziert,
• während ein 28x28px / 72 dpi als 72 dpi exportiert dann mini platziert wird, identisch wie 28x28 / 1 dpi > 1 dpi bzw. 28x28 / 28 > 28 Export,
• und ein 28x28 / 72 dpi > 28 dpi am kleinsten platziert wird. (jeweils als 100% platziert)

[Palatino]

35 minutes ago, thomaso said:

@Palatino, kann hier die Dokument bzw. die Export-Auflösung eine Rolle spielen?

Affinity exportiert immer mit width="100%" und height="100%" – unabhängig von dpi-Vorgaben (dpi ist keine SVG-Größe, siehe Programmfenster von Boxy SVG oder SVG-Definitionen).

[Palatino]

57 minutes ago, thomaso said:

While it reports a width & height of 1 px this image shows all details of your Affinity drawing (SVG), which in my understanding would not be possible in 1 x 1 pixel. So maybe Figma does not interpret incoming data correctly?

Just to remind you: SVG is a vector format. 😉

[thomaso]

31 minutes ago, Palatino said:

Affinity exportiert immer mit width="100%" und height="100%" – unabhängig von dpi-Vorgaben

... aber offensichtlich mit unterschiedlichen Ergebnissen, hier zB mit anderer Ausgabegröße wenn bei identischer Dokumentgröße die Dokument- und Export-Auflösung unterschiedlich sind:

Vermutest du denn also einen Fehler von Figma beim Lesen des OP's files – oder einen Fehler beim Export – oder sollte man für Affinity SVGs grundsätzlich die % in px umtippen um sicher zu gehen?

[v_kyr]

19 minutes ago, thomaso said:

oder sollte man für Affinity SVGs grundsätzlich die % in px umtippen um sicher zu gehen?

You don't have to do that at all, you can instead export from ADe for SVGs without viewbox settings, so that only width/height are written as px.

However, the question is more how Figma treats certain SVG contents here and how it would expect -a by any third party tool generated SVG code- to look like instead, so it can interpret it the right way from ground up!

[Palatino]

29 minutes ago, v_kyr said:

You don't have to do that at all, you can instead export from ADe for SVGs without viewbox settings, so that only width/height are written as px.

That's right, I forgot.

[Palatino]

53 minutes ago, thomaso said:

Vermutest du denn also einen Fehler von Figma beim Lesen des OP's files – oder einen Fehler beim Export – oder sollte man für Affinity SVGs grundsätzlich die % in px umtippen um sicher zu gehen?

Keine Ahnung, ich vermute gar nichts. Für mich war das bisher kein Problem, weil ich jedes SVG (kommt jetzt nicht so oft vor) sowieso manuell überarbeite. Mit dem, was mir Affinity beim Export liefert, bin ich eigentlich zufrieden.

[thomaso]

26 minutes ago, v_kyr said:

export from ADe for SVGs without viewbox settings, so that only width/height are written as px.

Ah, nice!

So, this possibly can solve the issue for @Shimotsuki_affinty. If this avoids the issue in Figma it appears useful to create a preset with the viewBox option unselected.

[Shimotsuki_affinty]

18 hours ago, Palatino said:

Either 28px x 28px or doesn't matter. See screenshots:

1. Export as SVG
2. Open SVG file in an editor and resize it (original size was 100px).

我按照你说的方式导出其中一个画板，svg文件在记事本里面是这样的：

 

[Shimotsuki_affinty]

10 hours ago, thomaso said:

Ah, nice!

So, this possibly can solve the issue for @Shimotsuki_affinty. If this avoids the issue in Figma it appears useful to create a preset with the viewBox option unselected.

好了，谢谢！

[Shimotsuki_affinty]

10 hours ago, thomaso said:

Ah, nice!

So, this possibly can solve the issue for @Shimotsuki_affinty. If this avoids the issue in Figma it appears useful to create a preset with the viewBox option unselected.

另外我想问一下，导出的时候直接就是SVG，不带文件夹怎么设置？现在导出的时候会有一个file，我不想要这个file。

[thomaso]

4 hours ago, Shimotsuki_affinty said:

另外我想问一下，导出的时候直接就是SVG，不带文件夹怎么设置？

If you don't use the "Export Persona" but export with the menu File > Export ... > SVG then no folder gets created.

[v_kyr]

How does a content wise by Figma correct interpreted SVG file looks like? - Apply/attach one such example SVG file here, so we can take a look at that and determine any possible SVG code/command differences in contrast to what ADe generates!

BTW, that looks at least w/h size wise to be correctly interpreted ...

... but what's about it's x/y origin here?

[Shimotsuki_affinty]

1 hour ago, v_kyr said:

How does a content wise by Figma correct interpreted SVG file looks like? - Apply/attach one such example SVG file here, so we can take a look at that and determine any possible SVG code/command differences in contrast to what ADe generates!

BTW, that looks at least w/h size wise to be correctly interpreted ...

... but what's about it's x/y origin here?

已经放在附件里面。

x/y 的原点在哪里我也不清楚，figma一直都是这样，不影响。

correct.svg no correct.svg

[v_kyr]

So the main difference between those SVG files is here the omission of the SVG viewbox and certain group/transform settings. - If you export your in ADe created SVGs the way last shown (aka without enabled "Set viewbox" settings on the checkbox under the SVG export more options) and without any setup groupings in your drawings, you should get generated SVG code which looks like in the correct file result here!

For the x/y positioning etc. I can't tell, since I don't use Figma, since that's more something used by Frontend-/Fullstack- and Webdesigners, instead of Backend developers like me.