Jump to content
redesigned

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

Recommended Posts

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. ❤️ 

Share this post


Link to post
Share on other sites

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. 

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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

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

 


☛ Affinity Designer 1.8.4 ◆ Affinity Photo 1.8.4 ◆ OSX El Capitan

Share this post


Link to post
Share on other sites
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


macOS 10.14.6, Macbook Pro Retina 15" + Eizo 24", Affinity in Separated Mode (documents merged)

Share this post


Link to post
Share on other sites

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

screenshot.jpg.ec221d4a915aa80b3453042fc5e31402.jpg

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

 


☛ Affinity Designer 1.8.4 ◆ Affinity Photo 1.8.4 ◆ OSX El Capitan

Share this post


Link to post
Share on other sites

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?


macOS 10.14.6, Macbook Pro Retina 15" + Eizo 24", Affinity in Separated Mode (documents merged)

Share this post


Link to post
Share on other sites

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


Microsoft Windows 10 Home, Intel i7-9750H CPU @ 2.60GHz, 16 GB RAM, 500GB SSD, 1TB Whirlygig, NVIDIA GeForce RTX 2060
Affinity Photo - 24/05/20, Affinity Publisher - 06/12/20, KTM Superduke - 27/09/10

Share this post


Link to post
Share on other sites
24 minutes ago, David in Яuislip said:

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

Layer blend modes also cause it, even those types which are supported natively in SVG.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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.


☛ Affinity Designer 1.8.4 ◆ Affinity Photo 1.8.4 ◆ OSX El Capitan

Share this post


Link to post
Share on other sites
On 12/2/2020 at 8:14 PM, BofG said:

Layer blend modes also cause it, even those types which are supported natively in SVG.

They cannot be read, either so the shapes where blend modes have been applied are retained as vectors but normal blend mode is applied. To put this in perspective, vector blend modes are not supported in Illustrator CS6 or CorelDRAW 2017 exported SVGs, either (but probably are in later versions of these apps), and both apps open SVG graphics with blend modes using the normal blend mode.

On 12/2/2020 at 6:55 PM, v_kyr said:

Well in terms of affinity export as said always!

The fx themselves are rasterized but it is perhaps worth noting that when using outer shadow or outer glow the shapes where the fx are applied are retained as vectors (while in other blend modes where the effect affects the shapes themselves, the shapes are rasterized, as well). 

 

Share this post


Link to post
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

Please note the Annual Company Closure section in the Terms of Use. These are the Terms of Use you will be asked to agree to if you join the forum. | 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.