Search the Community

I have recently switched over to Affinity Designer full time from adobe products after dabbling for a couple years. I'm rebuilding a document that I was originally done in Adobe illustrator. I'm exporting it as an svg file to be used with a program call Sure Cuts A Lot (SCAL) which I use to cut designs on a digital cutter. I'm having several problems opening the file in SCAL. First off, the file is more than 2x the size it was designed to be. Secondly, all elements are not visible when opened in SCAL. Thirdly, there is a dot that is appearing on the top right corner of the design which seems to be measured with the size but it isn't part of the design and can't seem to be removed. Precision for the size of the elements I'm cutting is paramount as are the missing elements. I print the document first after designating some lines as print lines and others as cut lines. After the document is printing I then cut the design out. This is a rather large problem that I need to fix, ASAP!! See photos below: The first shows the difference in scale with how it should look vs what appears when imported. Also, see the black dot to the upper left that appears? The second picture shows the preview of the file with text on it but, as you can see when its placed in SCAL the image has no text. The last picture shows the document in affinity designer with all elements as it should be. I hope i'm being clear, and I hope there is a fix that I am just missing when I'm trying to export.

I'm having issues exporting a particular file to SVG and am hoping someone can help me determine what I'm doing wrong. I have two primary issues with my export of this particular file (attached): 1. On export, the black color for all text in the image, specified as #000000 in the AD file, is changed to #030405. I can correct this manually in the code of the SVG, but I'd prefer to not have to. The red color (#ed1c24) of the Flag logo is not being modified during the export. 2. For the elements at the top of the image (flag logo, DiveTag and TM), fill colors are being supplied in the SVG code: style="fill:#030405;fill-rule:nonzero;" For the elements at the bottom of the image, though, (Reward Text, URL), fill colors are NOT being supplied in the SVG code: style="fill-rule:nonzero;" While the SVG renders correctly in a web browser without the fill colors being specified, it does not render properly in the PDF generator control we are using (https://github.com/dompdf/dompdf). It just fails to render the paths without color specified in their styles. Again, I can correct this manually in the code, but I am wondering if there is a way to force AD to specify fill colors for all exported SVG paths? Also, why is it specifying fill colors for some of the paths in my file, but not others? Thanks for any help you can provide! Personalized_tag_contents_750x750.afdesign Personalized_tag_contents_750x750.svg

I cannot find the option for choosing the decimal precision. In Inkscape, you could set the amount of significant digits to 5, for intance, this resulted in the shapes' coordinates looking like this: 5 significant digits: 1.2345 12.345 123.45 1234.5 3 significant digits: 1.23 12.3 123 My whole web application is based around SVG (dragging around on a big SVG map,) so it will probably see a size reduction of at least 25% solely from dropping the three decimals in all coordinate numbers I know you can just do a regex find in an editor and search for \.\d\d\d and just delete all occurrences, but that gets tedious to do manually every time I want to export svg

It would be very handy to have an option to include invisible object in export to SVG and PDF. Main purpose for this is to improve exchanging working files with other applications.

I only found this strange effect after quite a bit of chin stroking and hair pulling with something that was confusing the heck out of me. Workflow to re-create the issue (in Designer for Windows): 1. Create a new document containing an artboard (A5 landscape will be fine). 2. Draw a triangle that almost covers the whole artboard (don't go near the edges so you can see the effect better). 3. Give the triangle a Black stroke colour and a thick stroke width (16pt will be fine). 4. Go the the Export persona and export the artboard as "SVG (for web)". 5. View the exported SVG in a browser. All should look just fine at this point. 6. Go back to the Draw persona. 7. Select the artboard layer - NOT the triangle layer (but it does the same thing either way). 8. Change the Opacity of that layer to 90% (this is the thing I did by accident that was producing the strange problem). 9. Go back the the Export persona and export the artboard as "SVG (for web)" again. 5. View the exported SVG in a browser. The image now looks blurred. It's actually an SVG containing a raster of the triangle. You can prove this by editing the SVG in a text editor. Is this expected behaviour? (It took me ages to figure out what I'd done "wrong".) I did a quick search and only found the following related issue: * https://forum.affinity.serif.com/index.php?/topic/63257-texts-rasterized-when-exporting-to-pdf

Hey everyone. I’m using both Affinity Photo and Designer on iPad Pro 12. I’m also using a Cricut. Does anyone know what the exact SVG export settings are for Cricut Design software compatability? I’m having problems importing files. Getting either blank files or clipping errors. Thank you very much. Screenshot of your exact SVG export setting screen would be extra helpful.

Hello i would like to make suggestions for next release of Affinity Designer. Please forgive if what i ask is already sorted and operational at this stage, be kind to point to where i can be instructed about it please Requests: a- Make more Export profile available. i.e: Export for Web b- Please improve or standardize your SVG output, because those created with ADesigner are black or black when they are opened on other software. c- 3D fx/Emboss fx should be improved too, they are great but they often requires a lot of attention and tuning before it's okay, some standard 3D/Emboss profile/Preset would be of great help for those who like Auto things and the others will keep their By Hand stuffs. d- Clipping mask should be less hard to find or to do but more accessible, adding a button in the bar can be of great help. e- Please improve fonts loading on software start (we are not all using 37 fonts only ). f- the Place tool should be improved, it sometime loose the ration (even shift key pressed doesn't help to maintain it). g- Make it possible for noise to be added into a simple single color, it works on gradient but ... it should also be available for simple color. h- Accessiblity to Compound Path function need to be improved here too, a button in bar when 2 objects are selected should help. i- Artboard tool must show more options and sizes than what we currently have. j- the Pop-Up system used to display the name of a tool or a functionality should be improved to also show a quick description of what the selected tool can do. k- we should be able to round a sharp corners using the corner radius both in/out, sometime it's hard to get the correct curve because the tool make it possible in or out only, both sides should be great. l- Please make the bleed visible (red line or yellow doesn't matter) for with/without Artboard created. m- Color Picker tool should be able to pick gradient too and not just a single color, here couples of small buttons should be added in the bar and displayed when we select the color picker tool, enabling us to select gradient ON/OFF single Color ON/OFF. Well a long list but i've put everything here, those who know how to achieve this or that are welcome. @MEB you know Affinity far better than most of us here, your inputs are welcomed. To all, point me to where solution was brought and i will kindly jump there. Blessings.

Searching for a doable workflow I am trying to develop a workflow in which I can create assets in AD (macOS or iOS), export them as SVG, and import them into Blender for animation. I have discovered, after quite a few failed attempts over the course of many months, that this is not as straight-forward as one would imagine. Breakthrough Yesterday, I stumbled across an old post that turned out to be a breakthrough for me. Apparently, while exporting the assets out of AD, a specific setting must be unchecked, as shared by @Dave Harris here: After playing around with the different settings, I settled upon the following combo that seems to work relatively well: This did indeed allow me to get them into Blender, colors and all. However, I did discover another problem. A New Challenge Here is an admittedly silly little project that I created in AD a while, just for fun: And this is what I got when I import it into Blender (after rearranging the layers for visibility): As soon as I saw this, my response was, "Ah yes, it did exactly what I told it to do, even if it was not what I had expected. Duhhh..." What I want to do What I would like to do is to get each of the letters of our names into Blender so I can extrude them into 3D objects and animate them - that is simple enough. But I also want the colors of each letter to go along with them - not so simple. Is there a way that this can be done? It seems that I will need to flatten out or convert the layer masks to something else before exporting them to SVG. This is where I am stumped. Finally... Kudos for the iPad app! I purchased the iPad app the very moment I received the email. The dev team really outdid themselves with this, big time! I truly enjoy using the Mac app for working, but I am actually LOVING it!

Hi, there is one thing I miss from Illustrator and it's the ability to attach scripts, or some metadata, to elements; layers or groups of layers. It's helpful when creating interactive SVGs. Of course it's possible by naming layer/group and edit the code of the exported SVG but it becomes repetitive when you open the SVG again and the code is stripped of the additional code. So the option to have some extra content in the code of an element and keep it intact on re-opening or saving the document, would be terrific. It does not have to do anything, just a field to type som extra attributes to the element and keep them throughout the workflow.

I am using Affinity Designer to create file to upload into Cricut Explore Air2, to draw embroidery designs on fabric. If I export a png file, the image looks perfect but the Cricut treats each line as an object and outlines it - not what I want. I want a line drawing. After hours with Cricut tech support, I discovered that by exporting my file as an svg, the single line problem was solved, however, the image broke apart into single strokes and scattered over the page. I tried grouping elements in layers and then grouping all the layers together and the file arrived partially intact and the rest scattered and chaotic. I am attaching 2 screen shots. the first is the png file that is plotted as an outline by Cricut. The second is the way the file looks when uploaded as an svg file. (I know why some of the circles are filled in and know how to fix that) If anyone can advise me, I would be so grateful.

It looks like Designer cannot import or export from/to the SVGZ format. I understand that it is simply a compressed version of a plain SVG document which I can compress / decompress myself but it would be more practical if Designer could handle that.

I am trying to export SVG files from Affinity Designer and bring them into a range of programs for generating tabs / notches and then outputting for laser cutting. In Adobe Illustrator it is very simple - you set the document units to mm, design something with specific dimensions, and export your SVG. What comes out will be interpreted by other software, and by the laser cutter at the exact dimensions. With Affinity Designer, I've spent hours troubleshooting and digging through the forums and no matter what I do dimensions seem to vary depending on the DPI and all sorts of other options, and even slices of objects with the same height will export at different dimensions. It makes it practically impossible to predict what size your object will be. (as an aside, I thought DPI was completely irrelevant to vector - why is it even an option in a vector format?!) So is reliable scale something Affinity Designer just can't do? How are people delivering documents for print if they don't know how the printer will interpret the dimensions of their final files? I dumped Creative Cloud, bought the Affinity hoping to replace AI and now am faced with going back to Creative Cloud and getting stung with higher fees as a result of leaving. For my line of work this seems like really simple stuff...

Continuing from this post, I think it would be really cool to have a tab added to the export persona that would allow us to attach exportable attributes to layers, so that when we export an svg, all of our attributes for that layer are preserved. This would solve so many of the problems I've had whilst using designer. It would allow us to: Invoke svg filters defined externally Save class names on elements Add interactivity and styles Better yet, it would be cool to also use empty layers to add some svg markup to the final exported document, so we can define our own symbols, filters and the like. This would solve the issue I keep having (and no doubt others have had) while trying to use affinity designed svgs in production. If somebody asks me to change a colour, its always the same workflow: change color -> export -> make text edits -> repeat...

I have a situation where I create an svg in affinity designer, and then I have to modify some of the resulting svg plaintext by hand. I would then like to open the exported svg into designer, make some changes and then save it out to the same file. The primary issue I'm having is that if I export a new svg, all of my edits are gone. Is there some way to modify an svg and leave all of the elements I don't touch alone?

Hi, I'm facing an issue when I export SVG with Affinity Designer. I'm working on a website and would like to export an SVG in the best way following some guidelines describes here : https://www.sarasoueidan.com/blog/svg-tips-for-designers/. My Issue : I want to export in SVG a shape and move it with code. When I export it, I get a <path d="..."> instead of a <polygon> or <rectangle>. Sadly I'd like to have a <polygon> object in order to move it with Javascript. Can anyone tell me what am I doing wrong ? I would like to do someting like that <polygon points="215, 110 0, 110 0, 0 47.7, 0 215, 0"/> But I get path like this <path d="M1920,0l-1669.99,0l-250.011,0l0,1200l1920,0l0,-305.211l0,-894.789Z" style="fill:#fa9090;"/> animation.svg pos2.svg pos3.svg

this is something I am sure has been brought up about a year or so ago. but could not find it on here. SO this link here is how you can use inkscape to design levels in video games, parsing the SVG data in whatever you are using that can be used for collision, shapes & other such things I really think this would be a fantastic feature for designer, photo, or whatever affinity product that can have SVG output. please look at the link & see how it works & uses the data to build levels. its super awesome & would be even more awesome to have http://www.fierysquirrel.com/post.php?id=705 all the best

Good morning, all. I am new to Affinity and also new to creating SVG files. I feel as though I’ve got the SVG file creation part down. Lol. This is what I need help with, and I will try to explain this by example: Lets say that I import a simple two layer SVG file into affinity. By this I mean, a transparent background (as displayed by the white and grey checkers) and a layer on top holding the vector (as displayed by the shape represented in black so that I can see the transparent background behind the shape). Let’s say that the shape is a black rectangle. Inside the rectangle I would like to write text. Then, I would like to make that text transparent so that it appears to have been cut out of the rectangle, so I can see the checkered transparent background where the words used to be, in the shape of the text. How do I do this? If you could describe it to me in simple steps and assume that I’m a total n00b, I would greatly, greatly appreciate it. Thank you so much for reading my post!

When I take an SVG and scale it down, the exported resulting SVG seems to still use the original path, but applies a transform to scale the path down. Is there a way to cause the path itself to change to the new scaled-down dimension and NOT apply a transform? In other words, I want a new path scaled to the new dimensions, not the original path transformed to the new dimensions. Thanks.

I've just started using Affinity Designer and so far I love it. When I export to SVG I get weird results. Circles get look like they are partially inside a black box, croped objects does not look croped. If I export to EPS everything looks fine. It also depends a bit on the app I use to view the SVG file. Finder in MacOS shows the SVG file as I expect when I preview them. But a bunch of other application does not. Please see the attached image. The symbol to the right is EPS and looks like it should. The symbol to the left is SVG and that's how it looks i most applications when I import it. I'm nor very familiar with SVG, I know there are different versions. Are there settings somewhere I could try or is this a bug?

Rightnow exporting to SVG has all styles inline on all seperate svg-elements. And elements don't have classes or IDs. Using SVGs on web and making interactive animations on a daily basis this way it's impossible to animate elements and use external stylesheets without having to manually add classes and IDs to each element and remlve all inline styling in a text-editor after each export. I don't like to say it, but that makes this workflow impossible to use. Having to stick to inline styling inside the SVGs is another problem: - These days inline-styling is a big nono and validators throw penalties if inline styline is being used. The preferred way is internal style department, or use with external stylesheets. - A lot of layouts use the same styling on multiple elements. With inline styling all these styles got copied for all elements, resulting in a way larger SVG file then needed because of a lot of repetitive redundant data. This can easely be avoided by adding classes to the SVG elements and having one style-rule inside the general section for each different style. That makes the export a lot more efficient and makes it easier for developers like me to just copy the generated styles and move them to an external stylesheet if needed. - When styling is in the general <style> tag inside the SVG, a developer only have to change 1 stylerule if something needs to be changed instead of having to change all objects having all the same inline-styles - Because there are no classes nor IDs added to elements, we are unable to animate the elements with javascript, or again, we have to add IDs to all elements we want to animate each time after an export... A little bit like the Adobe Illustrator advanced settings offer, but that could even be improved to keep the SVG output as small as possible: My suggestion would be to add this to the SVG exporter settings: - A checkbox to add IDs to SVG elements where the layer-name starts with an asterix ('#'), followed by the name of the layer/curve. That way we can decide wich elements get IDs so we can address these elements later with Javascript to animate and so on. And with this we also prevent adding IDs to all elements in the SVG (resulting in a large SVG file with a lot of unused, redundant IDs). And when no # is add to any layer, no IDs are being written to the SVG. So full control here I'd say. - An option to choose one of the following for the SVG Export: - Use inline styles - Put styling inside <style> tag (recommended - mostly resulting in smaller files and less redundancy) (Perhaps to be complete even a: - Put styling inside svg attributes (but not my taste ) ) When a user picks 'Put styling inside <style> tag' the elements get a class attached with the styling in the general <style> tag inside the svg. Long story short: for real / advanced usage of SVG on the web for web development, interactivity and animations (by css and javascript), these options are indespensable! It would be very much appreciated if Affinity developers could look into this! Thanks a lot!

Looking at the SVG output at the moment SVG's always get a 100% width and 100% height, meaning they always scale up or down to a parent-window (in a browser). But there are a lot of usecases we don't want SVGs to scale on websites and if we do it would be nice if we could set how the responsiveness would behave, so to wich windowborder the image would stick and if we want to keep the aspect ratio while scaling. These are all very simple SVG attributes that only have to be added to the svg when we need it. Browsers are doing the rest. At the moment there is no setting in the SVG settings to turn the auto scaling (100% width/height) behaviour off in the SVG, meaning we have to manually take these attributes out of the SVGs each time we export an SVG if we don't want autoscale. It would be a lot easier, faster and less time consuming if we could just set these settings once inside the SVG export options to save it with our own preset. So what I ask for in the SVG export settings dialog is: - A switch to choose between using document width/height (keep size) or 100% width/height (auto scale) - A listbox to choose the 'preserveAspectRatio' attribute in the SVG so we can set this to: - none, xMinYMin, xMidYMin, xMaxYMin, xMinYMid, xMidYMid (the default), xMaxYMid, xMinYMax, xMidYMax, xMaxYMax (as described here: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio) These are important settings for exporting SVGs for Web and not very difficult to add to the dialog cause they only change 3 attributes in the svg tag. But they speed up the process of SVG exports a lot because these changes don't need to be made by hand in a texteditor after each export! Thanks!

Hello, I have a strange issue: exporting SVG as usual to be used on websites, Designer makes a font/svg file instead of a image/svg+xml file. This makes the file unusable in my WP websites. I already compared the SVG files text using TextWrangler but they seem equal. I attach one of them for analysis. What do you think the problem could be? Thanks for your support. LovelyApart 2018.svg

I am aiming to export SVG files with 12 point text (in Affinity) where that text is the same size as the 12 point text in the HTML where the SVG is embedded. As you can see, the text in the SVG and PNG is smaller that the text in the HTML above it. The HTML <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Test</title> <style media="screen"> * { font-size: 12pt; font-family: "Open Sans"; } </style> </head> <body> <p>This is a test of SVG sizes from Affinity Designer.</p> <p>The font on this page is 12 point Open Sans Regular.</p> <p><strong>SVG</strong></p> <p><object type="image/svg+xml" data="1.svg">Your browser does not support SVG.</object></p> <p><strong>PNG</strong></p> <p><img src="1.png" alt=""></p> </body> </html> The SVG <?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="400px" height="300px" 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-linejoin:round;stroke-miterlimit:1.41421;"> <rect x="0" y="0" width="400" height="300" style="fill:#f2f2f2;"/> <text x="10px" y="19.117px" style="font-family:'OpenSans-Regular', 'Open Sans', sans-serif;font-size:12px;">This is 12 point Open Sans Regular.</text> <text x="62.674px" y="162.808px" style="font-family:'OpenSans-Bold', 'Open Sans', sans-serif;font-weight:700;font-size:52.831px;fill:#fff;">400×300px</text> </svg>

As SVG is open source I would appreciate that Affinity support SVG files without having the need to import or export the file. Regards. Camille Desmots

Hello world, Affinity designer has taken me out of complete design noob into semi noob. Any help would be greatly appreciated in this trying time.. In summary, I need to create single line strokes out of some curves/shapes that i've made. I have taken a font, built a shapes over the letters, now I have shapes with hundreds of nodes. If I have the shape of a "P" consisting of dozen nodes, is there anyway to represent that by two single stokes. EG. One stroke for the " I " another for the ")" Any advice or further reading materials would be excellent, although, explicit instructions would be superb. Thank you world, Adam (It's to be used with the following if that's any help) https://maxwellito.github.io/vivus/