Search the Community

Hey guys, I'm trying to create a calendar icon, but my grid - the blank spaces - are not necessarily "center" in my image. How best to do this? Third icon. Thanks

Hi, When AD imports SVG files, it seems to transform any SVG groups into layers. I made several tests and searched the forums, but I found no conclusive responses to this: is there any way that AD would import SVG groups as AD groups instead of AD layers? Thanks in advance for any help.

Hey guys, I've a really quick question. When exporting my SVG's, they're all given a width and height of 100%. And this is causing me huge issues with the program that's using the SVG's. Traditional SVG uses an actual width and height. AI currently has a flag option, 'responsive', however I cannot find one in AFD. Does anybody know how to export the SVG with non responsive width and height?

I'm using AD to create graphics and then export them to SVG format. When working with named layers those layers get exported with an ID set to the name, so it's easy to reference the group from Javascript. Perfect. But SVG format has a lot of different attributes that can be used. How can I add or specify such values so that these get correctly exported into the SVG file?

I really would love to completeley change from AI to Affinity but at the moment, the SVG-export has too much overload for me for web usage as you can see here for one simple icon: AI: <svg xmlns="http://www.w3.org/2000/svg"width="30" height="30" viewBox="0 0 30 30"> <defs><style>.a{fill:#007a53;fill-rule:evenodd;}</style></defs><title>vk4</title> <path class="a" d="M26,7.5h-1.5V27h-5V7.5H18L22,3ZM17.48,25h-5V13.5H11L15,9,19,13.5h-1.5Zm-7-2h-5V11H4L8,6.5,12,11h-1.5Z"/> </svg> Affinity: <?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"> <svgwidth="100%" height="100%" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"> <rect id="ArtBoard1" x="-160" y="-760" width="1280" height="800" style="fill:none;"/> <clipPath id="_clip1"> <rect id="ArtBoard11" x="-160" y="-760" width="1280" height="800"/> </clipPath> <g clip-path="url(#_clip1)"> <path d="M10.475,23l-4.95,0l0,-12l-1.5,0l4,-4.5l3.95,4.5l-1.5,0l0,12Zm7,2l-4.95,0l0,-11.5l-1.5,0l4,-4.5l3.95,4.5l-1.5,0l0,11.5Zm8.5,-17.5l-1.5,0l0,19.5l-4.95,0l0,-19.5l-1.5,0l4,-4.5l3.95,4.5Z" style="fill:#007a53;"/> </g> </svg> Could you make an export option for a super minified svg? Especially all the Artboard stuff is unnecessary... or am I'm doing something wrong here? This would be great and I guess many other people would like this feature too...

Hi, Is it somehow possible to import a SVG into an existing AD drawboard, and make the vectors part of the design, without working on it as an imbedded object?

When exporting to SVG, is it possible to export filters as SVG filters instead of raster images? Thank you in advance.

Hallo Wie erstellt mann im Affinity Designer Vektordateien die für Schneideplotter verwendet werden können? Bin dabei, von Adobe Illustrator zu Affinity Designer zu wechseln. Leider aber funktionieren die Exportierten EPS oder SVG Datein nicht mehr für den Plotter. Was mache ich falsch? Muss ich die irgendwie speziell aufbereiten? Bitte um Hilfe!

I might be missing something really obvious here, but I can't appear to find any answers. Is it possible to add SVG code around shapes or groups such as animation or href tags via the 'export persona' workspace? If so can anybody guide me to information on how to do so? Cheers.

Hello guys (and affinity designer pros), I tried now 8 hours to fix this bug and it makes me crazy!!! First I have to say, I am not into graphic design, so I am only self-taught and everything I don't know how to do, I don not have any clue where to look for or what to google... I made an image with two colors, black and light green (#8EDB8D). Unfortunately because I don't have any clue about color management, when I save my image as JPG or PNG the colors look pale and sickly. I found out that it has something to do with RGB/CMYK conversion of print views and web views. Anyway I found an article in a forum, that I can save my picture as SVG (no rasterize) and open it again and export from new to JPG and then it should work... actually it did! For lots of small graphics consisting of texts and curves, this was a quite useful and effective workaround for noobs like me. Unfortunately, I made also an important big document with text, curves and pixel layers (I bought a Wacom tablet and drew some sketches, mostly shadows on my (boring) curves to have them look more realistic. I am quite happy with my results, because I started two weeks ago with 'graphic design'. Unfortunately, when I now export to SVG (without rasterize), all pixel layers disappear. If I export to SVG format with rasterize, they appear, but most graphics seem to be placed incorrect and stretched, so it seems to be difficult for lots of small pictures to correct them all by hand after a conversion, which should work automatically. So here's my two questions: 1) Does anyone know the official preferred way to convert my image without workaround (SVG conversion) to have the colors not being shale? 2) If not possible, does anyone know a way, how I can use my workaround with SVG conversion without disappearing all handmade pixel layers or having them stretched? BONUS: Does anyone know something else how to fix this? I'll attach my afdesign file (How to Flyer CMYK4) and a another jpg file (U CMYK) that shows, how the color of the light green should look like after conversion (not that pale, slicky one). Sorry for the probably dumb question... Thanks in advance for your support guys! You can't think how much your help will get me hope again, that it is possible with Affinity Designer to do some basic sketches for my homepage... Best regards, Matthias How to Flyer CMYK4.afdesign

It would be great if we could import multiple (svg/eps/pdf/ai/png/jpg/gif/etc) files into the assets panel.

Hi, new guy here. o/ I recently purchased and started using both Photo and Designer after having used Photoshop and Illustrator for many many years, not a heavy user but I know my way around it. Will take a while before I can switch completely, but I like the direction of both Affinity tools. Keep up the good work! First thing I tried with Designer is port some of the assets from AI and use Export Persona for exporting both PNG and SVG. While PNG works fine, SVG not so much. I've searched the forum, but wasn't able to find a concrete answer. Hence this topic. 1. Ability to retain width and height of the artboard as well as the viewbox. Checking off `Set viewbox` option in the export setting does set the height and width attributes, but it also removes the viewbox property, which is not ideal. For example AI handles this through `Responsive` setting in SVG export options; checking it removes width and height, otherwise both are always present. 2. Output SVG contains unwanted (unnecessary perhaps?) clipping elements and references and an empty artboard rect. In the below example only `<path />` is wanted and none of the other stuff. I imagine this is necessary if the slice is smaller than the artboard. But this is exactly what `viewbox` is for — to clip unwanted areas of an SVG. 3. Presentational attributes: `fill="#ebebeb"` instead of `style="fill:#ebebeb;"`. I do believe this was mentioned in one of the topics I found, but there was no clear answer to the issue. Perhaps something similar to AI SVG options where you can select how you want those properties to be exported. 4. Long-shot, but perhaps something similar to SVGO for minification. <svg width="100%" height="100%" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"> <rect id="Artboard1" x="0" y="0" width="200" height="200" style="fill:none;" /> <clipPath id="_clip1"> <rect id="Artboard11" x="0" y="0" width="200" height="200" /> </clipPath> <g clip-path="url(#_clip1)"> <path d="..." style="fill:#ebebeb;" /> </g> </svg>

I searched the forums extensively for this but couldn't find any information. I am sorry if I missed it. I would like to give classes to the shapes I create for export or IDs. Either one would work. For example, I have many objects within different groups called screen. Even though they are in different groups with different names, I notice when I export it consecutively names them so no two are the same. The first path with name will have ID id="screen", the second id="screen1", third id="screen2", id="screen3", and so forth. Basically, how can I customize this or make the IDs the same?

I'm using SVG as an exchange format for a project to get data into Affinity Designer. The SVG standard does not support all blend modes that Designer supports, for instance the very useful "Erase" option is not supported. It would be cool if the SVG importer would simply accept the non-standard blend modes that are supported in Designer but not officially part of SVG instead of reverting to "Normal".

I did an SVG conversion on a jpeg and when I open it in Affinity my machine falls over (memory issue). Machine has 8GB Physical ram and 4GB Video ram. Weirdly, I can open the file and work with it very comfortably in Inkscape Is there anything I can tweak to avoid this issue in future? Are SVG's problematic in Affinity? Is there another format that it might play nicer with? Thanks J memory hog.svg

It would be very useful for the batch function to be able to save as SVG and to be able to select a whole folder as the input rather than individual files

Does the design loose some of it's effect like gradient/shadows when it is exported to EPS or SVG? I exported a design to EPS and SVG. I had a gradient button. I can't edit the features.

Currently exporting masked objects as SVG causes the objects to become rasterized. Disabling rasterization altogether when exporting will cause the mask object to end up visible in the result. Why is this? SVG supports masking after all. Clipping seems to be supported so why not masking?

Hello, as a Designer & Dev (Game & Web) I usually need SVG's quiet often, I usually need to run those SVG's through a Converter (SVG => to Meshes). But now the Problem beginns, for example, if I use curves with brushes on them, then AD converts those brushes to simple images only (I looked through the exported code of the svgs). This is really bad news for me, Illustrator doesn't do that, Illustrator actually converts those brushes (even complex ones) entirely to SVG valid data. Is there a plan to improve the AD SVG Export Options anytime soon to make this work? If this isn't on the AD Roadmap anytime soon, is there a alternative way to do it then (e.g. Vectorizing those Brush Curves)? I am also missing vectorization of curves and other objects in AD in general, that would help out by quiet a lot. [EDIT:] Seems like most AD Brushes are more or less Images (not the simple standard brushes), what makes it impossible to export it as valid SVG Data / Vectors, except if AD has some smart vectorization features in the future. Why are even Image Brushes allowed in AD? It's the opposite concept of a Vector Application, just wondering. Kind regards, DK

When exporting a vector image to SVG, Designer appears to add hundreds of points to a path that aren't there when editing, causing the exported file to balloon many times the size as one exported from illustrator. For example, the Twitter logo contains 20 points on the path in Designer, but after exporting as a SVG it balloons to 1,554 points! Is there anyway to tell Designer to not add points, and to respect the original layout? This is holding me back from dumping Adobe Illustrator completely, so any help would be greatly appreciated. Thanks, Mike

Hi , i was wondering if it would be possible to copy and paste content in SVG code or HTML5 from Affinity Designer to any text editor?

got lost... - I have SVG file that, when imported to Canva.com project, has editable color (within Canva). - When I open that SVG in Designer (with an intention to do some tweaks) and export it (without changing anything) to SVG, then when importing it to Canva, it looks ok, but suddenly the color is not editable. - I have absolutely no idea what I'm doing wrong - or if any of the export setting is not right (I tried so many combination without any effect). Attached files: test-vctr.svg ... original file that I'm importing to Designer (and it works as it is within Canva -- possible to change color) test-aff.svg ... exported above file (without any action) from Designer to SVG (when imported to Canva, color cannot be changed). I know I'm discussing another online tool (Canva) here, but in general it's the export process within Designer that is causing "some" change in the workflow. Anyone? thank you test-aff.svg test-vctr.svg

Hi, I want to export a slice to an SVG file. That works so far, but I have one problem, see screenshot. I assumed that the slice defines the area what gets exported. Since some elements are now outside this area, these get exported too. Rendering my SVG not useable. I would like to avoid, that I have to design everything fitting my export area etc. Any idea what to do?

Hi, when i export a Text as SVG from Affinity and then i import it in a 3d Software, all letters are a curve of their own. How can i export a word as ONE curve that can be changed in a 3D-Software. Thank you.

I'm using Affinity Designer to create SVG icons for a website. And I'm using PostCSS and the plugin "postcss-inline-svg" to use those SVG files and apply CSS to them. The problem is, that Affinity applies background colors like this: <path d="..." style="fill: #123456;"/> The style attribute has the highest priority in CSS though. That means I can't apply extra CSS rules to it. If I remove the style attribute or replace it with this: <path d="..." fill="#123456"/> ...it works fine. Can you add an option to use `fill="#123456"` instead of `style="fill: #123456;"` when exporting SVG? That'd be great. Currently I have to do it manually. Thank you.