SVG export quirky (if not buggy)

[abra100pro]

I don't get the idea of SVG-export - whatever I do, in 90% of all cases the result is not usable. Like this one: wanted to make an icon for a website. Left: Safari - right: A-Designer:

 

Problem: Parts are missing, proportions mixed up.

Important: This does not only happen with fonts - but also with simple shapes.

If this is not a bug - can someone please explain how it is supposed to work?

Thanks.

[MmmMaarten]

That's no quirk nor bug, but you're missing a font so it cannot display the text the same way. 

You are exporting the text as editable text, instead of outlines (= curves of the created text). When exporting the text as text you also need to have the same font when displaying the svg, so to use in production environments you normally export the text 'flattened', so your texts as outlines (curves) . To do that: ctr-enter on the text object, or Layer --> Convert to curves. OR better, let Affinity do it automatically during export with 'Export text as curves' to keep the text editable in the design itself and only flatten the output.

 

File --> Export --> Choose SVG --> Click the 'More' button --> check 'Export text as curves'

 

If you really would like to keep the text editable in svg export than it all depends on where you use the Svg to know how to load the font. But 99% of the cases you don't need to edit the text when exported.

[edit] see below for answers to other parts of your question

[Alfred]

7 minutes ago, abra100pro said:

Important: This does not only happen with fonts - but also with simple shapes.

Perhaps you could post an example consisting only of simple shapes.

[MmmMaarten]

@abra100pro To answer the other part of you question, about proportions;

This is also right. SVG stands for Scalable Vector Graphics. Meaning it is made to scale automatically to the size of a window in, for example, the Safari browser you mentioned.

So your export is completely fine, but the resulting svg is displayed in a brower window (or parent HTML element) that is bigger than your design, so it scales to 100% of your browser window / parent element automatically. You can see that when sizing your browserwindow; the svg scales along with it.

When you want a different size in the browser, you just need to know a little about styling with css or set the width and height attributes of the <svg> element in the svg file. Or look for the preserveAspectRatio attribute. But that's a whole different topic.

If you only use Safari or another browser just to test if your created svg is okay, you are fine. Everything, except for the font part, is okay in your output and is exactly as expected.

 

[edit] It's a little difficult for us to answer about 'parts are missing' part in your question as in the example you posted there are no parts missing.
But the only thing I can think of right now is that your design uses raster-graphics (so pixel-based graphics, instead of vector-graphics) next to / inside the vector graphics. If that's the case check your output settings under the 'More' button to be sure your raster graphics get exported too. But better in most cases: don't use raster graphics inside vector graphics if not needed.