Search the Community

Is it possible to paste .svg files into the document? Or this is possible only using "Place Image Tool"? I use Icon8 application and can't copy SVG icons directly from this application to the Affinity. Thank you.

I have had difficulty with an SVG file that I have exported from AD (.029 RC) If I open the resulting image in Internet Explorer, it displays correctly, but if I try to import it into an external programme (PagePlus, DrawPlus, Xara Photo & Graphic Designer), or back into AD itself, it doesn't display as the original. The same image, exported as a PNG, is OK. I have attached: The SVG in question An AD file showing the original, the re-imported SVG and the PNG versions A screenshot of the above AD file in case the SVG renders correctly on your PC RSPCA Logo.afdesign RSPCA Logo.svg

I have a fairly simple logo created in Adobe Illustrator, which has a number of letters each created by simple paths of about 10 points each. It opens perfectly in Affinity Designer, but when I export it to SVG it creates a really big file (~260KB). SVG export from Illustrator creates an 8KB file. It seems the problem lies with one layer in the original file ("Text outline" layer in logo.ai). It's a path tracing the outline of the letters (still with about 10 points each) with a centre-aligned stroke applied. But Designer seems to interpolate hundreds of intermediate points when exporting to SVG. Is this something I am doing wrong? Or is there an issue with Designer's SVG export tool? logo.ai Illustrator.svg Affinity Designer.svg

Hej, it would be nice to be able to remove the doctype quatsch when exporting SVG files. I regularly embed them directly in HTML and there shall not be more than one doctype in an html file ... apart from that it is not necessary anyway when embedding in html ... <?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"> please! :) cheers

I know you can rename an object by selecting it on the layer panel and then double-clicking on its name. The problem is that if you have a large document with thousands of objects you first need to select the object you want to rename on the document and then spend a looooot of time locating the highlighted item on the layer panel so that you can double-click on its name in order to change it. This should be a lot easier. You just need to add a "rename object" option on the layer menu (and/or the context menu you get for the selected object). We use Affinity Designer to create graphics we then export as SVG files. The name of each object in SVG files is usually VERY IMPORTANT so that you can work with them on web applications. Naming objects should be a lot easier when you have multiple objects on the document. Another way to fix this situation would be that whenever you select a SINGLE object on the document, the layer panel would automatically scroll to that object on the list to make it visible to you (instead of you having to manually look for it on the list, which is a pain if you have hundreds of objects). Once the object has been located for you on the layer panel, you can easily proceed to rename it by double-clicking on its name.

Hi, I found the following problems when exporting SVGs: Opacity values are changed. E.g. 0.3 becomes 0.298039, 0.65 becomes 0.647059, etc. In paths, precisely positioned nodes are not exported with much precision. E.g. 14 becomes 14.001, 13 becomes 12.999, 0 becomes -0.001, etc. Some rectangles are exported as paths instead of rects AD doesn't memorize settings and the chosen preset between exports. I believe these should be memorized between exports and even saved with the document AD crashed when I created a preset name with a hyphen in it. Can't reproduce it again. Sometimes objects are exported with the wrong size. I believe this happens if you change the DPI setting before choosing an SVG preset, but I didn't test it enough to be sure. I'm not sure if these problems are Windows-specific or not, so please feel free to move this topic elsewhere if it is the case.

I’ve been meaning to post this for quite a while but was never sure how to explain it all. But I think I can do it now. This is about exporting a specific type of graphic to SVG but it probably concerns exports to other vector formats as well, even though I only tested it with SVG. So, for starters, here is an example of a graphic I am talking about, a pencil drawing where the stroked line has a variable width and where the line is drawn into a symbol that is mirrored along the vertical axis, then duplicated, rotated 180°, again duplicated and rotated 90°, so the result looks more-or-less cross shaped. Like this: This is the AD file with that design, Cross-167.afdesign. If you export that to SVG, you end up with a huge (for such a simple design) file, namely Cross-167.svg, which is roughly 450 kB in size. If you take a look at it, you will see that it converted the one and only curve in it into eight separate curves. :angry: Yes, the same curve mirrored becomes two identical curves, except one is mirrored. Then duplicating them (and rotating 180°) produces two more for a total of four. Duplicating that (and rotating 90°) produces four more of the same for a total of eight! This despite the fact they are all a part of a symbol, so they all have the same exact shape, albeit one half of them is mirrored and most are rotated. But SVG is perfectly capable of displaying the same shape multiple times, even if moved, mirrored or rotated, without the need to define the shape eight times. Defining it just once and then using duplicates alone would cut down the size of the SVG to one eighth of its size. But wait, there’s more. A lot more, lot, lot more! Examining the SVG in Inkscape shows that AD has exported each of the octuple as a series of very short straight lines, to be exact, 4,474 such lines per shape (so 35,792 line segments altogether, since it does it eight times). Here is what it looks like in Inkscape: Seriously? Such an advanced drawing program cannot figure out how to export the shape as a few curves? Like this: What I ended up doing, what I always end up doing, was edit the SVG myself. First I use the simplify feature of Inkscape and have it save the SVG. Then I lift the first and only the first path from what Inkscape gave me, plant it inside the SVG AD gave me, delete all the others, change the dimensions of the SVG to have the [0,0] coordinate in the middle (which makes mirroring and rotating very easy), and type in the SVG codes to duplicate that one path and mirror it, then to duplicate both the original and the mirror and rotate it 180°, then to duplicate all that and rotate it 90°. I even gave it a title, and I still ended up with an SVG of just 2,108 bytes but still showing the identical graphic. Unfortunately, the forum doesn’t allow me upload the small SVG; fortunately, you can easily download it from openclipart.org. If I can do it, why can’t AD?

Web developer here, bought Affinity Designer in hopes of switching off Adobe completely. The app was great, got the job done, then I go to export the icon as an SVG and... it saves the color black as "fill:#000". Why Affinity why? :( It should save the color black with no fill tag at all, which will still appear as black, but lets web developers like me then alter the color dynamically via CSS. svg { fill: #888; } Am I hopefully just missing this setting somewhere? Kinda breaks the whole process of making svg icons. I don't want to have to use some important rule or something to overrule such a silly mistake.

Currently Affinity Designer can not open SVG files with embedded <style> Tags. All styles that are applied to elements via classes get discarded. I would be great if AD could support that. Another related useful feature would be to enable editing of elements inside a <defs> tag of an SVG file. I have a lot of svg files which have all their elements wrapped inside a defs tag in order to be used as sprite sheet on a web page later on. Currently when editing such a file in AD the artboard is completely empty so I need to remove the defs tag before editing and then add it back in afterwards manually. It would be cool if AD would handle that.

I'm having difficulty figuring out how to obtain the "SVG Code" for an image I've created in Affinity Designer. Any support is appreciated. Thanks! —S.

Hi, When I'm exporting a file as svg in the export persona, the file somehow contains a background layer even though no such thing was defined. I tried different svg options but seem unable to get rid of that layer without manually removing it in another application. Attached is an example AD file and SVG file. Or am I just missing something in the settings. Sample.svg Sample.afdesign

Every time I export from Affinity Designer as an SVG file the resulting file gets scaled up by a factor of over 4x. e.g. My document is Legal sized (215.9mm x 355.6mm) but when I open the resulting SVG file I find that it has been scaled up to 899.6mm x 1481.7mm. Since the final destination for my design is an Epilog laser cutter you can see why this isn't acceptable. Any help is very much appreciated.

There is no glyph menu as in Illustrator to choose. Instead of cut in paste from Illustrator or sketch or changing your keyboard in Unicode. I found an alternative.There is a little mac software called "SVGSUS". You can click and drag an icon from this app to another. Of course, it works on Affinity designer. You need to import your icon as SVG or in a folder with a lot of SVG. Material icon are already imported and for font awesome, I found a repositories where all "characters" had been exported in SVG. Check this out: http://www.svgs.us and for font-awesome: https://github.com/encharm/Font-Awesome-SVG-PNG Max

There is no glyph menu as in Illustrator to choose. Instead of cut in paste from Illustrator or sketch or changing your keyboard in Unicode. I found an alternative.There is a little mac software called "SVGSUS". You can click and drag an icon from this app to another. Of course, it works on Affinity designer. You need to import your icon as SVG or in a folder with a lot of SVG. Material icon are already imported and for font awesome, I found a repositories where all "characters" had been exported in SVG. Check this out: http://www.svgs.us and for font-awesome: https://github.com/encharm/Font-Awesome-SVG-PNG Max

Attached is an svg file that opens fine in the browser; however, when I open the file in affinity the document is blank. Any ideas why? many thanks, Drew 557271.svg

Hello, when I am exporting as svg, my stroked paths are becoming fills. Please see attached screen shots. #1 shows the settings as I create the red stroked paths (I have placed them above the raster image for clarity), #2 shows the file after export as a svg-the stroked paths have become red filled with a black stroke around the paths stroke. The svg is also attached (ice cream). Why is this happening? In the past couple of days I was able to create svgs in which the stroked paths stayed stroked paths- file attached (books) -I can't figure out what has changed. I am a new user, any help is appreciated. Thank you. ice cream.svg 7-books wwhite.svg

Hi, The SVG export writes the tags "Height" / "Width" always in percent. Is there an option to set the values in pixels? I found this post in the forum: https://forum.affinity.serif.com/index.php?/topic/8099-set-svg-tag-heightwidth-to-pixel-dimension-on-export/ Thanks Juergen

Hi, I have some publication figures I need to export without loss of resolution. They *should* be entirely vector graphics, but are nevertheless getting rasterized and appear pixelated. The files are composed of 3-4 PDFs (generated in R and fully vector) plus panel letters (e.g. A-D) added in Affinity Designer. In Affinity Designer I can zoom in all the way and still see crisp text and line art. However, upon exporting as PDF, EPS, or SVG no matter what settings are use I get pixelation, even if I set a very high DPI (say 1000) or do not set DPI with the intention of the image remaining fully vector graphic. I am confused because *all* the elements in these files are fully vector graphics, but nonetheless I get loss of resolution upon exporting from Affinity Designer. I'm attaching an example file to this message. Please help!! ...I need to submit high resolution versions of these images to the journal ASAP. Thanks!! Dan. Figure3.afdesign

When exporting to SVG, even if Use relative coordinates is selected, absolute coordinates are still used to move to the next point within the same path element. I’m not talking about the first move within a path, which, unfortunately, has to be absolute because of the way SVG works, but about any subsequent moves within the same path. For example, take this snippet of SVG code produced by Affinity: ...c0.2,3.201 0.2,6.002 0.2,21.207l0,17.592ZM234.888,7.888c0,-0.8 0.2,-1.2 0.9,-1.4... It contains a relative curveto, a closepath command, an absolute moveto command, followed by a relative curveto command, etc. Everything is relative as it should be (with Use relative coordinates ticked). Everything, that is, except the moveto, which is absolute. Adam

When importing an SVG file which contains a clipPath element, AD ignores the clipping path and displays objects that extend outside the clipping path. This image shows what such a graphic looks like in AD (the bottom star should be cut off at the border with the green stripe but is not): Here is what it is supposed to look like: I wish I could show you the SVG original, but the forum refuses to upload it. Adam

The SVG Export is very overloaded, overcrowded, ...extremly suboptimal. I'll give you an easy sample: Take the Union Jack from the Wikipedia. It has 522 Bytes. That's the code <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 30" width="1200" height="600"> <clipPath id="t"> <path d="M30,15 h30 v15 z v15 h-30 z h-30 v-15 z v-15 h30 z"/> </clipPath> <path d="M0,0 v30 h60 v-30 z" fill="#00247d"/> <path d="M0,0 L60,30 M60,0 L0,30" stroke="#fff" stroke-width="6"/> <path d="M0,0 L60,30 M60,0 L0,30" clip-path="url(#t)" stroke="#cf142b" stroke-width="4"/> <path d="M30,0 v30 M0,15 h60" stroke="#fff" stroke-width="10"/> <path d="M30,0 v30 M0,15 h60" stroke="#cf142b" stroke-width="6"/> </svg> Open it with Affinity Designer. Export it as SVG. It becomes 1528 Bytes. That nearly 3 times more. And the SVG code is just messy. Another sample: Take the Stars and Stripes from the Wikipedia. It has 899 Bytes This is the code <?xml version="1.0" encoding="UTF-8"?> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1235" height="650" viewBox="0 0 7410 3900"> <rect width="7410" height="3900" fill="#b22234"/> <path d="M0,450H7410m0,600H0m0,600H7410m0,600H0m0,600H7410m0,600H0" stroke="#fff" stroke-width="300"/> <rect width="2964" height="2100" fill="#3c3b6e"/> <g fill="#fff"> <g id="s18"> <g id="s9"> <g id="s5"> <g id="s4"> <path id="s" d="M247,90 317.534230,307.082039 132.873218,172.917961H361.126782L176.465770,307.082039z"/> <use xlink:href="#s" y="420"/> <use xlink:href="#s" y="840"/> <use xlink:href="#s" y="1260"/> </g> <use xlink:href="#s" y="1680"/> </g> <use xlink:href="#s4" x="247" y="210"/> </g> <use xlink:href="#s9" x="494"/> </g> <use xlink:href="#s18" x="988"/> <use xlink:href="#s9" x="1976"/> <use xlink:href="#s5" x="2470"/> </g> </svg> Open the SVG with Affinity Designer and export it as SVG. It becomes 13.925 Bytes! That 15 times more!! That caught my breath. Let's try something more complex: the flag of Portugal. (13.160 Bytes) And export it... Result: 53.139 Bytes !!! The files get fat and unreadable. That's totally unacceptable. And that were just simple samples.

I was browsing the forum outside the Beta section and noticed someone offering free AD brushes. So, I downloaded them, just to see if they would install and install they did. Then I just did some scribbles to see how they work. I saved the result, then exported it it to JPG, which worked as expected: Then I exported to SVG, but that only showed the strokes without the brushes: Brushes.svg Brushes.afdesign

Would be great if designer supported the full svg spec. I think what's missing for my particular svgs is supported for nested svgs -- they all show up at the origin rather than with the respective positions defined in the file.

Hi, I've done some artwork in affinity and I used a blur feature. I tried to export it as svg and the artwork looks generaly ok unless the parts where I used blured objects for shading. When I open the file in affinity it looks quite ok but I tried to open it in Inkscape (the Illustrator crashed when I tried to open it) and it looks like in the picture below. I don't know if it's a bug or if I exported it a bad way or it may be common export issue. I didn't found similar topic so sorry if I aks already answered question. MM

Good evening! I try to get used to Affinity Designer and now have a problem to work with nodes from an SVG file. I have a file that gets loaded asa single layer object. I now want to select some nodes and group them as new object or to cut them with ctrl + x but it always cuts the whole big object, not only the selected nodes. I can delete selected nodes. There is the "Divide" tool, that does get most parts separated into own objects, but sometimes has problems with thin lines like with my shield, it makes big filled objects instead of thin lines. Maybe someone can tell me how I can get own objects out of closed nodes? Problem this shield: gets divided to full black objects: HTML5-SVG-SingleObject.svg shild.svg