SVG export question on Raster vs Vector (why is it embedding pngs from vector design)

[redesigned]

I've recently created several vector only designs in Affinity Designer.

When I go to export them as SVG instead of being vector svg files they are svgs that contain raster pngs embedded in them and hence don't scale properly.
This is not what I want. 😢

Is there any way to tell affinity designer to export the vector design as only a vector svg not png embedded in svg?

Are there features of the software that force the design to export embedded pngs, and if so is there a refence to which ones so they can be avoided and alternate methods employed?
I've noticed specifically that outer shadow fx seems to trigger this, i'd really like to know which other features trigger this behavior so that i can make svg vector safe resizable designs.

Anyone know a reference to this aspect of Affinity Designer?

Many Thanks. ❤️ 

[Semisphere]

I have the same issue... and it seems to be coming forth from my own ignorance yet please help me to be sure. Using vectors with special fx such as making them appear as brush strokes makes them export in rasterised form... ALWAYS? There's no way around this? I want to get my vectors over to the production people for printing on clothing.... and there's just no way I can do that? Why does the vector even allow rasterised components, I mean, where is it used for if most methods for reproducing the image won't allow for pixel formats?

[v_kyr]

Yes, using FX layer effects goes always hand in hand with a rasterization process here, in order to apply those effects to vector curves. When exporting as SVG such effects will be always embedding as rasterized/bitmap data (base64 encoded in SVG) components. - See also ...

• SVG filter effects

Quote

...
Each filter primitive performs a single fundamental graphical operation (e.g., a Gaussian blur or a lighting effect) on one or more inputs, producing a graphical result. Because most of the filter primitives represent some form of image processing, in most cases the output from a filter primitive is a single RGBA bitmap image (however, it will be regenerated if a higher resolution is called on).
...

 

[thomaso]

2 hours ago, v_kyr said:

When exporting as SVG such effects will be always embedding as rasterized/bitmap data (base64 encoded in SVG) components. - See also ...

... e.g., a Gaussian blur

  ..."always" ? – I am not really experienced with .svg but I would expect not to cause rasterisation at least for certain effects, e.g. blur.

This w3schools page lists some code-only filters / effects, click the "Next" button to experience the blur in svg without rasterisation / bitmap.
If I drag the attached .svg file onto a browser window it shows a blurred rectangle, though the file doesn't contain bitmap but text only. 
What is my misunderstanding?

blur.svg

[v_kyr]

Well in terms of affinity export as said always! - What the SVG spec and to that highly complient SVG engines (parsers/generators) support and what Affinity are sadly two pairs of shoes here!

Your SVG spec conform blur example ...

<svg height="110" width="110" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <filter id="a" x="0" y="0"><feGaussianBlur in="SourceGraphic" stdDeviation="6"/></filter>
  <path d="m0 0h90v90h-90z" fill="#ff0" filter="url(#a)" stroke="#008000" stroke-width="3"/>
</svg>

... when parsed and loaded by AD ...

... and more importantly here, when again exported from Affinity as SVG then ...

<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 110 110" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;">
  <use xlink:href="#_Image1" x="0" y="0" width="108px" height="108px"/>
  <defs><image id="_Image1" width="108px" height="108px" xlink:href="data:image/png;base64,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"/>
  </defs>
</svg>

 

[thomaso]

v_kyr, thank you for clarifying it. – But then, isn't this behaviour a bug and Affinity should respect the svg specifications, – or aren't they so strict or clear and one would say Affinity just doesn't support the SVG format entirely?

[David in Яuislip]

The fx seem to be the culprits and most of them produce raster/"data:image/png;base64.... data in the svg

Proper svg blurring can be achieved using, ironically, fx Gaussian blur - New Live Filter Layer/Blur/Gaussian blur doesn't work
Then Export to svg with Rasterize Nothing set. If it's left on Unsupported properties then the blurs are rasterized

Try the attached file
Export with Rasterize Nothing produces a file of 1.92kb using feGaussianBlur
Export with Rasterize Unsupported properties produces a file of 44kb with raster blurs

 

29 minutes ago, thomaso said:

But then, isn't this behaviour a bug

No because the svg file is valid and can be parsed by a browser, however, I think it's lazy programming as it can and should be done using feGaussianBlur

 

BlurTest.afphoto

[redesigned]

many of these "effects" have vector only equivalent ways of achieving them that are supported natively.
blur, stroke, etc.  so yes they could be programed differently and remain true vector output.

more importantly is somehow identifying when and where a workflow crosses into this unsafe territory.
currently there are ZERO indicators or warnings, no options to convert or remove on export etc, which really breaks the workflow and assumes secret insider knowledge that might not be accessible to new users.

[v_kyr]

On 12/2/2020 at 6:08 PM, thomaso said:

... But then, isn't this behaviour a bug and Affinity should respect the svg specifications, – or aren't they so strict or clear and one would say Affinity just doesn't support the SVG format entirely?

Good point and somehow difficult to tell here how much of the SVG spec support/implementation counts as being partly SVG complient.

I know a bunch of third party tools which only support a minimal part of SVG, so to say only the essentials (the tip of the iceberg), either for parsing (reading in SVG) or generation (writing out SVG). In my experience the best SVG parsers/engines do come (no surprise here) together with webbrowsers, which are mostly implemented strongly after the SVG specification.

The Affinity tools in contrast here are still far away from supporting the whole SVG spec and so just support parts of that. The reason therefor will possibly be, that there are no direct easy to transform 1:1 counterparts available between certain of the Affinity graphics engine and the SVG spec formal graphic routines and primitives.

On 12/2/2020 at 6:08 PM, thomaso said:

...or aren't they so strict or clear and one would say Affinity just doesn't support the SVG format entirely?

Well, that's something that isn't easy to read for marketing and selling purposes, since then could be a knockout criterion for some potential buyers, who need this feature badly, or who have higher demands on it.

[lacerto]

(...)

[Armin Makovec]

Sorry for bringing such an old topic back again, but I've also created a vector only design (simple, really) with no FX applied. Only Fonts (text), Curves and Rectangles.

Upon export, SVG has an embedded image (probably PNG). If I disable rasterize, the SVG keeps throwing me an error when I open it in a browser to preview!

I tried pretty much all combinations for the export, yet the moment I set rasterize: Nothing, I can't open it anymore.

Files attached, any help appreciated.

velikost-povrsine-120x45.svg velikost-povrsine.afpub

[David in Яuislip]

There's a character in the layer name that APub doesn't like, I've changed it to a hyphen and it now displays ok in Chrome

velikost-povrsine.svg

[v_kyr]

46 minutes ago, Armin Makovec said:

Upon export, SVG has an embedded image (probably PNG). If I disable rasterize, the SVG keeps throwing me an error when I open it in a browser to preview!

I tried pretty much all combinations for the export, yet the moment I set rasterize: Nothing, I can't open it anymore.

Hello and welcome to the forum!

I can't look at your afpub-file since I don't have Afpub, but I took a look into the generated SVG code. - The problem there is one character inside the serif:id text ...

Quote

<g id="Velikost-likalne-povr-ine" serif:id="Velikost likalne povrine">    <---?

If you remove that all is fine!

[Armin Makovec]

You are right. Changing that character in Affinity Publisher fixed it in the export as well! Thanks a ton! An oversight on my side, since the file was originally made in AI, which I don't have any more. After importing it in Affinity Publisher and making a few fixes, I tried exporting. And first I thought everything was perfectly OK, until I began enlarging the image and saw it were rasterized... And then I began encountering the above error.

Anyway, @v_kyr thanks a ton!

PS: I know AI had a feature called minify or something, which would pretty much circumvent this problema, while also making svg files smaller (it would generate SVG code with minimal IDs, indents, lines, and white spaces). Would that be possible for Affinity as well? Or am I just missing something?

Edited November 24, 2021 by Armin Makovec

[v_kyr]

14 minutes ago, Armin Makovec said:

...while also making svg files smaller (it would generate SVG code with minimal IDs, indents, lines, and white spaces). Would that be possible for Affinity as well? Or am I just missing something?

Affinity has limited settable SVG output options, but there are other tools which can afterwars finetune the AD SVG output, like ...

• SVGOMG
• svgo
• SVGminify
• Tools for optimizing SVG
• ... etc.

You can find a bunch of those on GitHub (look/search after SVG there)

[R C-R]

4 hours ago, v_kyr said:

I can't look at your afpub-file since I don't have Afpub

Somewhat off-topic but you know you can open an afpub file in AD or AP, right? So for example, in AP part of the layers panel shows this for the afpub file:

I don't know how or why the layer got that name.

FWIW, when I tried to rename my jpeg screenshot to match the Layer name (with the missing character symbol), my Mac would not let me do that, generating an 'unexpected error occurred' message.

[v_kyr]

1 hour ago, R C-R said:

Somewhat off-topic but you know you can open an afpub file in AD or AP, right?

I know, but first of all I prefer to look instead into the generated SVG Code, since that was what the OP couldn't open any more and which by far tells me much more about the generated SVG output than looking into a APub file here. Second, not all Affinity apps have/carry the same bugs here and things which might work in Photo/Designer therefore do not have to behave in the same way in Apub here then.

1 hour ago, R C-R said:

I don't know how or why the layer got that name.

Probably the OP edited it himself accordingly, but might have without noticing it, messed up that specific accent based character "š" into an illegal one.

1 hour ago, R C-R said:

FWIW, when I tried to rename my jpeg screenshot to match the Layer name (with the missing character symbol), my Mac would not let me do that, generating an 'unexpected error occurred' message.

Probably depends on your MacOS system font and language settings, aka SF (San Francisco) vs. SF Pro etc. - The latter (SF Pro) has and supports an expanded list of weights, optical sizes, glyphs and languages. The newer OSes ship with "SF Pro" which has 2324 glyphs compared to "SF" which has just 1585 glyphs.

[Armin Makovec]

7 hours ago, v_kyr said:

Probably the OP edited it himself accordingly, but might have without noticing it, messed up that specific accent based character "š" into an illegal one.

Correct, it was "š" in Illustrator in the original file which I was editing. It appears Affinity Publisher recognized it incorrectly, hence the whole error thingy. By renaming it in Affinity, Affinity does recognize character "š" input properly, so it appears it simply got lost in the conversion process.

Edited November 25, 2021 by Armin Makovec

[SaphrynShikaze]

On 9/21/2020 at 9:45 AM, BofG said:

This is something that keeps coming up, personally I think all of the blend modes and FX etc should only be accessible from the "pixel persona" so it's obvious that the file will no longer be purely vector. However that's not how it is, so you just have to be mindful of what you are doing. 

These replies are absolutely useless, to be completely honest. Please folks, why not just be helpful instead of brain dumping. @redesigned is asking a very simple question: How does one export an Affinity Designer file as a pure SVG/vector, to use in places like Wix Editor X as a logo, etc. He doesn't know how to "be mindful" of what he's doing, and that's THE ENTIRE REASON he's made this very cogent post about a problem that seems to keep arising, which is unwittingly exporting an SVG file that supposedly "contains rasters or images".

Please just answer the damn question. How does one export a simple logo as a pure vector file? Without digging into some kind of extreme backend code.

[Komatös]

9 hours ago, SaphrynShikaze said:

Please just answer the damn question. How does one export a simple logo as a pure vector file? Without digging into some kind of extreme backend code.

Hello and welcome to the forum.

The question has been answered sufficiently. Filters and effects can cause layers to be rasterized because they cannot be reproduced with svg code. 

[SaphrynShikaze]

@BofG, I sincerely apologize. You and @Komatös are right. That was quite a bit of negative energy, and that's completely my bad.

Yes, it is frustrating not understanding why or how exporting pure vectors aren't as simple as exporting say other file types. FYI, rasterization of my exports occur regardless of the fact that I'm not using filters or effects.

Again, you're totally right. I was being a complete asshole.

[Komatös]

2 hours ago, SaphrynShikaze said:

Again, you're totally right. I was being a complete asshole.

Nobody is an asshole (there are political exceptions)!

Sometimes you just overlook a few things. 
Maybe it's because of the export settings you've chosen.

Since four or more eyes see more than two, it would be quite helpful if you could provide us with a screenshot of the export dialog box; and if possible a designer document where the rasterization occurs during export.