Export Slices to SVG - Final quality is pixelated ?

[Alon]

Hello,
I'm using the latest version of Affinity Designer.
I created buttons for UI they are around 29x29 - and I sliced them so I can export them to .SVG as vectors without pixels (instead PNG files).
Each button is 1 group made with layers inside it.

This is what I did:
1. I selected all the slices, 
2. I tried each time one of the different SVG presets:   (for export), digital high / low, (flatten) 
3. I pressed the "Export Slices" button and it rendered all.

Once I checked them (every time I exported with different SVG preset) part of the buttons looked Pixelated, part of them looked smooth.
It seems like it didn't work on all the layers of each button but only on part of them, and the results are very random.

How do I make sure it will export ALL my slices as smooth SVG non-pixels?

Thanks ahead!
 

I've attached an example:
as you can see the HOVER inside is smooth, but the button layer is pixelated smudged.
While the BASE button is all smooth, that's how I want to export ALL my buttons.

Loop - BASE.svg Loop - HOVER.svg

[GarryP]

Welcome to the forums @Alon
Your SVG contains a raster element, which is the thing that looks pixelated.
The raster probably came about because you used an Effect on one or more layers.
Effects always cause the layer they are applied to to be rasterised, no matter what the export settings.
One way you can make the raster go away is to remove the Effect.

[Alon]

On 9/23/2020 at 11:23 AM, GarryP said:

Welcome to the forums @Alon
Your SVG contains a raster element, which is the thing that looks pixelated.
The raster probably came about because you used an Effect on one or more layers.
Effects always cause the layer they are applied to to be rasterised, no matter what the export settings.
One way you can make the raster go away is to remove the Effect.

Thank you for the explanation I didn't realize Effects are rasters, I'm kind of new to Affinity Designer and still learning it as you can tell.

Can you please suggest me a solution to what is the solution to what I try to do?
1)  The reason for the Effects is the use of OUTLINE.
2)  How do I convert or make an outline that-easy without using the Effects? 

My goal is to make the graphics 100% vectors, but if I cannot use the effects it may slow me down do these manually, is there a faster / easier solution for my goal?

Thanks ahead!

[GarryP]

Selecting the best solution will be dependant on exactly what you want to produce.
If you just want to put a slightly ‘wider’ version of your shape behind the shape, to make it more noticeable, then you can use the Stroke functionality, putting a thick stroke behind the shape, see attached image (A).
If you want to make the ‘wider’ shape an outline which goes round the shape but doesn’t touch it then you can use the Appearance Panel to add two strokes behind the shape, see attached image (B).
There will be many other methods, it just depends on what you want and how you will be using the result.

I've attached the document I used so you can experiment with it.

different-outlines.afdesign

[Alon]

Thank you for the quick reply and example.

What I used was the Outline effect with INSIDE 1 pixel.
I hope I can emulate the same thing with the strokes, I will give it a try.

[GarryP]

You’re welcome.
If you want the stroke to be inside the shape then you can use “Draw Stroke In Front” and “Align Stroke To Inside” (highlighted in red).

[Alon]

1 minute ago, GarryP said:

You’re welcome.
If you want the stroke to be inside the shape then you can use “Draw Stroke In Front” and “Align Stroke To Inside” (highlighted in red).

That's exactly what I was looking for, THANK YOU!

[GarryP]

You're welcome.