Patrick8639 Posted March 23, 2018 Share Posted March 23, 2018 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 Quote Link to comment Share on other sites More sharing options...
Staff MEB Posted March 23, 2018 Staff Share Posted March 23, 2018 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. Quote A Guide to Learning Affinity Software Link to comment Share on other sites More sharing options...
Patrick8639 Posted March 23, 2018 Author Share Posted March 23, 2018 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. Quote Link to comment Share on other sites More sharing options...
Staff MEB Posted March 23, 2018 Staff Share Posted March 23, 2018 And blend modes? Are you using any blend mode other than Normal? Any chance you can attach the original afdesign file? Quote A Guide to Learning Affinity Software Link to comment Share on other sites More sharing options...
Patrick8639 Posted March 23, 2018 Author Share Posted March 23, 2018 Hi MEB, the afdesign file is attached. Transaction-Duplicate.afdesign Quote Link to comment Share on other sites More sharing options...
A_B_C Posted March 23, 2018 Share Posted March 23, 2018 You seem to be using one of the Blend modes (Erase) that require rasterisation … Quote Link to comment Share on other sites More sharing options...
Staff MEB Posted March 23, 2018 Staff Share Posted March 23, 2018 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. Quote A Guide to Learning Affinity Software Link to comment Share on other sites More sharing options...
Patrick8639 Posted March 23, 2018 Author Share Posted March 23, 2018 Hi A_B_C and MEB, If I use a Substract boolean operation, this part becomes black instead of transparent... Quote Link to comment Share on other sites More sharing options...
Staff MEB Posted March 23, 2018 Staff Share Posted March 23, 2018 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. Quote A Guide to Learning Affinity Software Link to comment Share on other sites More sharing options...
A_B_C Posted March 24, 2018 Share Posted March 24, 2018 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 Quote Link to comment Share on other sites More sharing options...
v_kyr Posted March 24, 2018 Share Posted March 24, 2018 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. Quote ☛ Affinity Designer 1.10.8 ◆ Affinity Photo 1.10.8 ◆ Affinity Publisher 1.10.8 ◆ OSX El Capitan ☛ Affinity V2.3 apps ◆ MacOS Sonoma 14.2 ◆ iPad OS 17.2 Link to comment Share on other sites More sharing options...
Patrick8639 Posted March 26, 2018 Author Share Posted March 26, 2018 Hello everybody and thank you for your answers. I will try your suggestions to make my icon work. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.