PDF / SVG export functionality fully implemented?

[Nichod]

The question is in the title... is PDF / SVG export functionality fully implemented? I ask because in my test cases I'm seeing gradients, and shapes with effects getting clipped + rasterized rather then being fully editable gradients + effects. Ideally any effects should use SVG filters when exported. This was always a problem I had with DrawPlus. I often had to export out at really high DPI to remove any gradient dithering, and import it into Illustrator where I vectorized the rasterized portions. 

 

The results I'm getting right now are disappointing. Though the PNG export from a large vector files is incredibly fast, and clean. Nice work there.

[MattP]

Hi Nichod,

 

Could you please provide a file showing the problem? As I said in your other post, I'm getting correct results for SVG export without it rasterising gradients, so there might be something about your particular example that is causing the rasterisation. Is there any way you could also show an example output of this from another app showing the same thing working that you're seeing as a problem? I think our SVG export works pretty well, I think? :)

 

Cheers,

Matt

[Nichod]

Attached is a composition of exports of a similar object. All were constructed in the same way:

 

1. Insert 300px circle

2. Copy, and resize copy to 200px

3. Subtract front from back

4. Copy new object

5. Move new object behind original

6. Apply radial gradients. (note: colors aren't identical I "eyeballed" it)

 

All were imported into iDraw (which has the best SVG importer/exporter in a "app" that I've used. I often use it as a go-between for Sketch), though I saw the same import results in Inkscape.

 

The first is the object exported from Affinity as a SVG with display checked.

The second is a straight export of SVG from iDraw, and then imported into a new document.

The third is Sketch (yes it fails at this as well. one of my many issues with the app)

The last shows that the shape is there and used the SVG with editable selected. I'm sure I could tweak to get it to display correctly. The display version of the object also had the base shape there.

 

 

[Nichod]

And here is the same object with a gaussian effect on it exported as an SVG. 

 

Ideally this should export it out using SVG filters instead of rasterizing. 

 

OR

 

At least export it so the effect is an overlay blended in some way to product the visual effect, but retaining most of the original vector shapes. The way it's exporting now it's clipping, and cutting up the object in a very odd way that doesn't bode well for editing in another app.

[MattP]

Hi Nichod,

 

Thanks for getting back to me :)

 

I've just tried exactly what you described and this is my result... it's all vector, with a radial gradient in it, so I don't know what the difference between our two setups is? :S

 

 

Is there any chance you could just attach the .afdesign file here so that I can try it on my computer and see where the problem is?

 

Thanks in advance,

Matt

[MattP]

Hi Nichod,

 

I was just talking to TonyB and he mentioned something interesting... iDraw doesn't support winding modes, and hence it doesn't import SVG files correctly that use winding modes. This is why your Affinity and Sketch SVG files don't appear to have worked. If you try opening them in Safari or Inkscape you'll see that the winding modes are honoured and the documents both look as expected. So it's actually iDraw's bug that's showing you the 'problem'.

 

I'll look at changing our boolean operations to automatically reverse curve orientation for holes and this will actually make iDraw import the file correctly (because drawing correctly won't be relying on winding modes).

 

Thanks,

Matt

[Nichod]

Do you mean Winding Rules? Ok. That's good to know. Weird since iDraw generally imports SVGs better than Sketch, but I understand that. And you are correct when I test my files in browser the render correctly.

 

The other issue still remains with rasterization.

[MattP]

Hi Nichod,

 

Thanks for getting back to me :) I agree with your statement that ideally any effects should be exported as SVG effects (I hasten to add this doesn't happen when exporting from Illustrator) but there's a very good reason why it's not happening at present - quite simply the SVG effects are implemented differently to our own and hence they just don't look the same, so we can either rasterise them or ignore them completely on export. We can also potentially offer a third option, which would be a 'best guess' at the parameters - so they're roughly right, but the problem is that if you have any other areas of your document that simply had to be rasterised on export and they intersected with the areas of effects that we were going to output as SVG effects with 'best guess' parameters, then you'd quite clearly see areas where the two didn't line up in your exported image... :(

 

I definitely agree that the way your test had been sliced up was not ideal from an editing perspective... The problem is that you applied a gaussian - that makes an effect larger than the original object - i.e. it would not be possible to crop to the original object to produce some sort of useful vector outline for re-editing, nor should you be able to see any part of the original object because it would interfere with how the blended result would look. Off the top of my head (and it's early on a Saturday, so forgive me if I'm wrong) there's no way a vector could be included in this file that would be in any way helpful? The Gaussian effect definitely can't go out as anything other than rasterised completely, ignored completely (hence the vector shape would go out without its effect) or the 'best guess' version I described above that would have issues with anywhere it intersected other document elements that must be rasterised...

 

Thanks,

Matt

[scooteristi]

Why is it that when I export a vector file as a PSF, the vectors are rasterized instead of exported as vectors?

[MattP]

Hello!

 

There could be many things which would affect whether the vector items are exported as vectors or rasterised. Is there any chance you could attach a .afdesign file showing the problem and we can have a look to tell you what's happening? :)

 

Cheers,

Matt

[JDW]

I am finding Affinity-exported SVGs to be screen resolution bitmaps when created by COPYING & PASTING Illustrator vector data:

 

1. Select and then COPY your vector content in Illustrator CC 2014.

2. Switch to Affinity Designer 1.1.2.

3. File > New > (Type = Web, Set Page Height/Width dimensions)

4. PASTE. (Transparency and object structure should appear identical to Illustrator.)

5. File > Export > SVG > Export for Viewing > Export (button click)

6. View your Affinity-exported SVG in a browser or in Illustrator and note how it is a screen resolution bitmap!

 

I've created an Affinity Designer 1.1.2 document and included the exported "bitmapped" SVG in the following ZIP archive:

 

http://cl.ly/0s161t2V002V

[TonyB]

I am finding Affinity-exported SVGs to be screen resolution bitmaps when created by COPYING & PASTING Illustrator vector data:

 

1. Select and then COPY your vector content in Illustrator CC 2014.

2. Switch to Affinity Designer 1.1.2.

3. File > New > (Type = Web, Set Page Height/Width dimensions)

4. PASTE. (Transparency and object structure should appear identical to Illustrator.)

5. File > Export > SVG > Export for Viewing > Export (button click)

6. View your Affinity-exported SVG in a browser or in Illustrator and note how it is a screen resolution bitmap!

 

I've created an Affinity Designer 1.1.2 document and included the exported "bitmapped" SVG in the following ZIP archive:

 

http://cl.ly/0s161t2V002V

 

 

The Illustrator content contains raster masks so any item with a raster mask would tend to get rasterised when exported from Affinity.

 

We import the PDF stream that is embedded in Illustrator files. This is how other Adobe apps import Illustrator files and we use the same method. 

 

This isn't something that we can fix as the native Illustrator file format is private to Illustrator.

[Dave Harris]

The "screen resolution" part probably happens because we rasterise at the document's DPI. If you created a document from the Web preset, you probably got a default of 96 DPI. If you want SVG export to rasterise at higher resolution, specify higher DPI when you create the document.

[JDW]

The Illustrator content contains raster masks so any item with a raster mask would tend to get rasterised when exported from Affinity.

Well, after I copy in Illustrator, switch to Affinity then Paste, I can zoom in on the pasted content in Affinity and it never gets jagged. (Zooming in on a raster will show jagged pixels at some point.) It looks "vector" to my eyes while displayed in Affinity. Yet after Exporting with Affinity, I see a screen resolution bitmap. That is confusing to me. Again, it looks like a vector in Affinity, so if it is indeed vector, how then can I Export it as a vector rather than a 96dpi bitmap?

 

Again, this seems to be a Copy/Paste issue because I don't have the same "vector to raster" problem when I open an Illustrator generated SVG in Affinity and then Export to SVG from Affinity.

 

The "screen resolution" part probably happens because we rasterise at the document's DPI. If you created a document from the Web preset, you probably got a default of 96 DPI. If you want SVG export to rasterise at higher resolution, specify higher DPI when you create the document.

I don't want my SVGs to rasterize at all. That would defeat the entire purpose of using an SVG on my websites. I want vector data, not a rasterized bitmap.

[TonyB]

The content from Illustrator does have raster masks but when drawn in Affinity they blend with a vector object so look sharp. When we export to SVG we have to rasterise those items for SVG at the moment. We might be able to export a soft mask in SVG in the future but that also depends and browser support of SVG opacity masks.