Search the Community

I'm making a set of icons in SVG format, and have them all on their own artboard in 1 document. Exporting an artboard to SVG (with no border or fill) includes a <rect> tag named like the artboard. I'd expect the artboard to just set the width/height & viewbox properties of the export, not to have its own rect path. Maybe this could be just a checkbox in the export options?

Hello there, I work in AD. The software is great, thanks for that. I need to export to PDF or SVG or EPS, does not matter to me ... including layers, that I could open the file in Adobe Illustrator and could see the layers. I was trying to find out on affinity forum, but I was not successful. Is there a way to do that please? Unfortunately, exporting to PDF does not do the job. Nothing is rasterized and after opening in illustrator there is just one layer instead of 3 created in AD. And what more, there are separated objects, the ones with fill and the ones with strokes. I mean, in AD it is an object with fill and stroke and after exporting to PDF and opening in AI these are two different objects, one with stroke and one with fill. I don't know why is that ? Thanks for help. I attached a file. 1100235_58_ultra_terno.afdesign

So for some reason, I was trying to export an SVG file and only one or two layers are being exported. I have done others the same way and was able to get all the layers to export. What would be different about this image that all the layers are not being exported? Any help would be appreciated!

How can I export slices as SVG using Export Persona? Using Export menu I can only export one or all artboards :-(.

Hi, I am currently stuggling to export very simple shape with a shadow to SVG using Affinity Designer (Windows). The design is quite simple: It comprises two rectangles - one in red without a border and one in grey. The grey one works as a shadow. Therefore a Gaussian blur was applied ( I know there is an extra function to add shadows, but that one was not used). When trying to export this to SVG, AD wants to convert the grey rectangle to a bitmap. That leaves the SVG useless for me. I am surprised by this behavior as there is a gaussian blur filter in the SVG definition. Just to give an example of the usage of the "feGaussianBlur" in a SVG file: <?xml version="1.0" encoding="ISO-8859-1" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"><svg width="380px" height="370px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <title>The simple feGaussianBlur filter</title> <desc> Example of usage </desc> <defs> <style type="text/css"> <![CDATA[ text {font-family:Verdana,sans-serif; font-size:16px; font-weight:bold;} ]]> </style> <symbol id="smilie"> <desc>ein lachendes Smilie</desc> <circle id="gesicht" cx="20" cy="20" r="15" fill="yellow" stroke="black" /> <circle id="auge-links" cx="15" cy="15" r="2" fill="black" stroke="black" /> <circle id="auge-rechts" cx="25" cy="15" r="2" fill="black" stroke="black" /> <line id="nase" x1="20" y1="18" x2="20" y2="23" stroke="black" stroke-width="2" /> <path id="mund" d="M 13 26 A 5 3 0 0 0 27 26" stroke="black" fill="none" stroke-width="2" /> </symbol><!-- 6 Filter mit feGaussianBlur --> <filter id="f1"> <feGaussianBlur in="SourceGraphic" stdDeviation=".5" /> </filter> <filter id="f2"> <feGaussianBlur in="SourceGraphic" stdDeviation="1" /> </filter> <filter id="f3" x="-20%" y="-20%" width="150%" height="150%"> <feGaussianBlur in="SourceGraphic" stdDeviation="1.5,.5" /> </filter> <filter id="f4" x="-20%" y="-20%" width="150%" height="150%"> <feGaussianBlur in="SourceGraphic" stdDeviation=".5,1.5" /> </filter><!-- zusätzlich mit feBlend, feOffset und feMerge --> <filter id="f5" x="-20%" y="-20%" width="150%" height="150%"> <feGaussianBlur in="SourceGraphic" stdDeviation="5" result="out1" /> <feBlend in="SourceGraphic" in2="out1" mode="darken" /> </filter> <filter id="f6" x="-20%" y="-20%" width="150%" height="150%"> <feGaussianBlur in="SourceAlpha" stdDeviation="2" result="out1" /> <feOffset in="out1" dx="2" dy="-2" result="out2" /> <feMerge> <feMergeNode in="out2" /> <feMergeNode in="SourceGraphic" /> </feMerge> </filter> </defs><!-- die Instanzen des Symbols "smilie" --> <use xlink:href="#smilie" transform="translate(20,10) scale(2.7)" /> <use xlink:href="#smilie" transform="translate(150,10) scale(2.7)" filter="url(#f1)" /> <use xlink:href="#smilie" transform="translate(250,10) scale(2.7)" filter="url(#f2)" /> <use xlink:href="#smilie" transform="translate(150,130) scale(2.7)" filter="url(#f3)" /> <use xlink:href="#smilie" transform="translate(250,130) scale(2.7)" filter="url(#f4)" /> <use xlink:href="#smilie" transform="translate(150,250) scale(2.7)" filter="url(#f5)" /> <use xlink:href="#smilie" transform="translate(250,250) scale(2.7)" filter="url(#f6)" /><!-- Text und Hilfslinien --> <text x="145" y="130">feGaussianBlur</text> <text x="58" y="130">Original</text> <line x1="137" y1="40" x2="137" y2="330" stroke="black" /></svg> Is there a workaround availabe to force AD not to convert objects into a bitmap during export? Thanks, Volker

Hi, is there any chance to add support for meta tags (like <title/>) in SVG file in Export options? It would be nice if <title/> equals file name. I think it would be helpful for front-end developers in some scenarios ;-) What do you think?

Hello, I have an animated GIF that I would like to recreate with an SVG instead. It seems like the easiest academic case for practicing snapping to me: everything is black and white and there are only horizontal and vertical lines. The snap points are easy to find automatically. However after quite some unsuccessful trial and error and reading in the forums it seems like there could be some slightly tricky behaviour about this... So please indulge if I ask now before digging further! ;) Thank you in advance for all hints, gergely FWIW here is the object:

Hi, Please excuse what may seem like very basic questions but I am extremely unexperienced with graphic design. I've used GIMP for a few months and found it clunky and time consuming, so I recently purchased Affinity Photo and I am contemplating purchasing Affinity Designer depending on the answer to my question. I've watched several of the tutorials and have searched the help section and forums but have not found an answer to several of my questions. I own a Cricut cutting machine and I make t-shirts using heat transfer vinyl. I have figured out how to make pngs in affinity and import them into cricut design space. This is pretty easy. However, what I would like to know is if I can create svgs in affinity to import into Cricut design space? I can currently purchase svg files online and when I import them into Cricut design space, I only have to do 1 import and each layer/element that is in a different color is imported in one file. This makes it quick and efficient and then I can edit each layer/element independently in design space. Is there a way for me to make files like this with affinity photo and/or affinity design? Since I use vinyl, I need each color in design space as a separate layer. I have attached a screenshot as an example. I have created this simple text/shape graphic in photo. My designs are super simple, mostly text and shapes. I want to import it as an svg into Cricut design space so that when I open in Cricut design space, the arrow and text are different layers so that I can cut out the text in black and then the arrow in red vinyl. I know how to save each layer as a png, but then I have to import each layer separately. This isn't a big deal for something relatively simple, but if I'm using more than 2 or 3 colors, it gets tedious. Is there a way to do this? I have very basic knowledge and don't know much of the terminology, though I'm spending about an hour each day online learning. But I need a very basic explanation. Thanks, Lynnsey

I am creating some vector illustrations for the web. The image is made up of several layers. When I try to export as an SVG, each option states that some parts will be rasterized. I tried it as is and the whole image is rasterized and becomes unscalable. The whole idea of SVGs are for scaling vector images for various web resolutions. Why can't I do this in Affinity Designer?

Hi, We develop for Autodesk (external) and have a tool that allows users to copy/paste svg into Maya. We've been getting requests from users to better support Affinity so we're testing it out but getting an issue we can't get our head round. Our current workflow (or one of them at least) in Maya is based on the ability to copy SVG info out of e.g. Illustrator/web etc to your clipboard and then paste that directly into Maya (to create 3d geometry). I'm new to Affinity so maybe missing a workflow here but it seems this isn't possible? I've tried copying the clipboard from Affinity into a text editor but that doesn't seem to give any results. What does seem to work is copy/pasting into Illustrator. We also have an 'import svg' function which works fine from Affinity (i.e. File > Export > SVG) so a little in the dark about where the issue lies. Can anyone shed any light on this? i.e. what is actually being copied to the clipboard? Thanks, Chris

There is a bug with DPI settings in the Export Settings dialog: DPI settings are ambiguous after selecting a preset. I've written about this before. Here is how to reproduce it: Open the Export Settings dialog. Click SVG or PDF (I've tested these two formats only). Create a preset (if you still don't have one). Select your custom preset. Select 96 DPI in the DPI drop-down. Now choose another preset, say SVG for export. This will change Raster DPI to 300. Select 96 DPI again. Nothing happens. So... will I get 96 or 300 dpi? I hope this explanation is clear.

When attempting to export a design that has inner shadow on text. the shadow does not appear where it is supposed to. Latest AD for windows.

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.

Hi, I'm newer in Affinity Designer. Adobe illustrator has line segment tool, when i use it, and then export to SVG file in which has <line> tag.But Affinity Designer don't. I use pen tool with line mode, and export to SVG, only <Path> tag. Can Affinity Designer export to SVG file with <line> tag?

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.

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.

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?

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.

Working with simple shapes creates simple SVG files, but the moment I add an outline the path... Well, haha, it becomes a nightmare. TWO objects are exported: the solid fill object, and the outline object (why?). The fill object is fine, but the outline has gone from 10 control points to ~2200. Best I can figure AD is doing this because it doesn't do outlines the same way SVG does, but since SVG supports strokes of different widths and miter types, I don't know what, specifically, the issue is. If I export a solid object, it works as expected, same number of points in AD and Inkscape. Add an outline, and hahaha ouch. I'd love to know what's up with this and whether AD just can't do outlines->SVG without becoming unwieldy.