Affinity Designer: when exporting a vector image to SVG, an file with an image is generated

[Patrick8639]

Hello,

I'm trying to export a vector image to SVG and Designer generates an SVG file with a JPEG image on it. The content of the file looks as:

<?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 32 32" 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;stroke-miterlimit:1;">
    <use id="icon" xlink:href="#_Image1" x="0" y="1.026" width="32px" height="30.214px" transform="matrix(1,0,0,0.974629,0,0)"/>
    <defs>
        <image id="_Image1" width="32px" height="31px" xlink:href="data:image/jpeg;base64,/9j/....."/>
    </defs>
</svg>

I suppose I'm doing something wrong, but I don't what.

Can someone help me?

Thanks in advance.

Patrick

[MEB]

Hi Patrick8639,

Welcome to Affinity Forums

Are you applying any FX Layer Effect to an object? All Layer Effects are rasterised on export - they are not translated to SVG effects.

[Patrick8639]

Hi MEB,

Thank you for your answer.

I think I don't have any effect on this file. On the effect tab, all the check boxes are unchecked.

[MEB]

And blend modes? Are you using any blend mode other than Normal? Any chance you can attach the original afdesign file?

[Patrick8639]

Hi MEB,

the afdesign file is attached.

Transaction-Duplicate.afdesign

[A_B_C]

You seem to be using one of the Blend modes (Erase) that require rasterisation … 

[MEB]

Hi Patrick8639,

It's the Erase Blend Mode. You have to use the Subtract boolean operations, vector masks or a clipping based construct instead to subtract the shapes, otherwise the output will be rasterised.

[Patrick8639]

Hi A_B_C and MEB,

If I use a Substract boolean operation, this part becomes black instead of transparent...

[MEB]

Hi Patrick8639,

Yes, it's a little more tricky than that because quite a few things are lost when we export to SVG from Affinity in particular the semitransparent area around the blue arrow must be constructed in a very specific way to keep everything as vectors. Unfortunately seems there's a couple more issues/bugs when the layer structure becomes more complex. I will take a look at this more closely during the weekend.

[A_B_C]

Yes, it is somewhat difficult to achieve what you want when exporting to SVG. I must say, I am not entirely sure about the perfect way to do this. I believe, however, that you can systematically use the methods described here:

 

https://forum.affinity.serif.com/index.php?/topic/4069-layer-clipping-vs-layer-masking/#comment-16825

 

For instance, you can clip your objects to transparent vector shapes to achieve the desired effect. I used two parent shapes for that purpose. In my screen shot, I assigned them a red fill in order to make them stand out. But of course, you will set the fill to transparent and keep a semi-transparent white stroke on the parent shape with the arrow. Now, when you restructure your document a little and clip your items to these shapes, you can export without rasterising anything. (I clipped everything to a rectangle in addition and exported to web.)

 

Hope that makes sense … 

Alex

 

 

 

Clip.afdesign

Clip.svg

 

 

[v_kyr]

Jip this would need some layer restructuring in order to apply the wanted look and effect as plain SVG exported vector objects. - Since SVG doesn't have and support any direct erasing commands per se, this would also have to be done via defined clipPaths, mask and opacity settings when hand coded in SVG.

[Patrick8639]

Hello everybody and thank you for your answers.

I will try your suggestions to make my icon work.