saivan

Yep, I made a suggestion here that I think would solve your problem too.

Needs a fair bit of work. I don't see myself ditching affinity any time soon for it

Thanks, I just did that

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...

Well, its a shame because I can't imagine it would be to hard to add this sort of thing. I mean after-all, it would just be an option to attach exportable attributes to particular layers. Its literally just adding text But how exactly would we go about making a feature request anyway?

Sure, I'll make a simple example. Heres a file straight from w3 https://www.w3schools.com/graphics/tryit.asp?filename=trysvg_line If I import it into designer, then save it back out again, heres the new markup: Original <svg height="210" width="500"> <line class="testClass" x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" /> Sorry, your browser does not support inline SVG. </svg> If I open it with designer, and attempt to change only the color of the line and save, it prompts me to save it as an .afdesign file. This doesn't make sense for an svg. But then I understand thats what the export persona is supposed to do. So I go ahead and export with the export persona and I get this markup: Modified <?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 500 210" 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;"> <path d="M0,0L200,200" style="fill-rule:nonzero;stroke:#0072ff;stroke-width:2px;"/> </svg> Now a few things should be noted here: The class I added to the line was gone (less of a problem) the line was converted to a path The width and height I had just changed The browser support text I added is gone I think the export persona should have an svg tab added that imports the extra attributes from each element, and lets us add our own attributes like classes, or even some custom attributes that we might need for our application. That way, when we need to make a change to the artwork, we don't need to painstakingly modify the output code by hand all the time. Just scrolling through the forums, it seems a lot of the users are using designer to author content for the web. Its really the big pain point for me in switching from illustrator, even though I prefer to use designer so much more, its just currently not practical to add to my workflow just yet.

This would be really awesome. Designer has a lot to go when it comes to handling svg exports. Its a shame because there are so many people designing primarily for the web.

I agree that all of the apps might export differently, but just like you can import a jpeg, make changes to the jpeg and save the file out to a jpeg; I'd expect the same thing to work for an svg. If I hand write an svg, it would be nice to open it with designer, change the color of a line and then export it without completely changing my code It just makes working with svgs very difficult if you can't do that. Because if I need to author content for the web, I will need to modify the svg that comes out of designer in some way, then I'm asked to change something with the visual style, so its back to designer, change all the tags, export again, make all changes again. It just makes it impossible to have designer as part of a workflow.

I suppose then this begs a different question. Is there a way to save an svg that I imported after changing it? For example, the most common thing that gets me is the text handling. If I have a text element with a text-anchor set, if I import it into designer, and export it again; the text anchor disappears. Then theres class names, and pretty much any feature that designer doesn't natively export.

I'll describe one, I frequently have to make a grid. Say I want to make a grid with 10 x 10 rows, and then I want to label all of the gridlines so that I get 1, 2, 3, 4, ... I can make the grid pretty easily right now with the transform repeating duplicate feature you have, but I have to manually enter the number... So my current solution is to just open up illustrator and do it there. I want to cut illustrator out of my workflow entirely, because affinity does almost everything else. Let me list a few: - Auto incrementing on copy (eg, designing a calendar, designing a grid as I mentioned) - Drawing complex shapes, I could use the pen tool by hand, but what if I wanted to draw a space filling curve like: (http://www.creativeai.net/posts/pm8peiv5Q4j7A6C3P/hilbert-space-filling-curve-abstract-geometric-art) or (https://en.wikipedia.org/wiki/Space-filling_curve), I don't see myself doing that by hand , my current solution is to write code to make an svg and import it into designer, but I shouldn't need to go to an external tool for that. - Importing data. I've frequently had to make charts from data, it would be so nice to design a nice data point as a layer in designer, and just automatically duplicate the layer and move it to the correct place, creating a complex data plot - again, I'd prefer to use designer to an off the shelf graphing tool because I can make better looking graphics that I can control visually and then let the program take over at the right time. - Generating fractals. I know this one is quite cliche, but it would be pretty cool to take a layer; make a symbol from it and automatically use it to populate a fractal. I have a tendency to make mathematical artworks. But most of all, I could package up any code I write and offer it as a plugin for the application. Allowing for a host of extended functionality.

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?

One thing is, since they are tagging with the `serif:id`, we could easily write a plugin that exports as classes and id's just by choosing layer names like id.classname, which would convert things to id="id" class="classname", then it would just be up to the user to name their layers according to spec. That could be fun.

This is a very important feature that is really making affinity harder and harder to use. Please add the ability to apply classes and simple interactivity to svgs, you'd literally just have to give users the ability to add attributes to particular elements, and export them verbatim. This would make designer much more useful on the web: I am finding myself "fighting" the design choices made by your devs all the time, and this is making it much harder to use affinity in a production environment. If I have a button, I want the user to hover over it to change the colour, and I'd like to do that without making a swathe of changes after I've exported the SVG, because if I need to make a change in designer; I have to go ahead and make all of those changes again! Common use case ============== I have a ball image that I've used throughout my svg and I'd like it to change colours when I click on it. I'd also like to select all of the balls, so I can hide all of them whenever I like. Current solution: - Name all my balls - ball, ball1, ball2, .... - Select everything that matches ball(n) Better solution: - Apply a class to all balls like .ball - Select .ball and apply the style Its much more useful for people using affinity on the web.

I agree with this too, scripting is basically a staple of any professional application. I've found myself in a pickle a few times because of this!

I agree, this is a much needed feature. In order to have simple effects like a hover effect, I need to painstakingly target every element individually in my code. Its just not a very good way to design.

When exporting an svg, we can get issues where the id of an exported element may clash with the id of something else. For example, in one of my files, I could have a layer called "myTest". The problem occurs when I embed this into html, which may also inadvertently have myTest defined as well. This will lead to a name clash, which as you can image; would lead to all kinds of trouble. I'd ask if theres any way to prefix the exported id's with something upon export. For example if I have a file called abc123, upon export, the id will be set to "abc123__myTest", or something like that?

Any ETA on this one? This would be a hugely useful feature.

Same boat here, I think having a primitive line tool would be very useful! For developers, this would make our lives alot easier

I'm having a pretty major problem with the svg exporting features in affinity. When I set up a simple scene with two objects, each with their own drop shadow, the drop shadows are not rendered transparently, This is causing heaps of grief, because when I move the objects around, the shadows are just blocky images that look really bad, as shown: Is there some way to force afinity to render the image with a transparent background? This is really bad when I try to move the objects around on the web with javascript. +1 For svg filters. It would honestly make 90% of these problems go away.

Thanks dave, much appreciated!

Thanks Dave, no it doesn't give me what I would expect. I agree with you R C-R, I will use a concrete example this time: Say I had: Island One Island Two PersonHead Hair Left Eye Right Eye If I wanted to be able to move the person around so that he can visit the islands, I need to be able to translate the group layer for the person. Eventually, the end goal is to output code like this. If I had the person at x=500 and y=200, and his group layer was rotated by 45 degrees, the following is the svg code I would expect to get out of AD: <g id="person" transform="matrix(0.7, 0.7, 0.7, -0.7, 500, 200)"> <path id="head" d="...[coordinates relative to 500, 200 and rotated 45deg]..."/> <path id="hair" d="...[coordinates relative to 500, 200 and rotated 45deg]..."/> <path id="left-eye" d="...[coordinates relative to 500, 200 and rotated 45deg]..."/> <path id="right-eye" d="...[coordinates relative to 500, 200 and rotated 45deg]..."/> </g> Instead, an export right now will have no transformation matrix on the g element, and the paths will be transcribed relative to the original reference frame. As a result, when I want to apply a transformation like a rotation or a shear, it will rotate it about (0, 0), which is not the intended transformation; this will of course produce wild and wonderful effects. My key purpose here is to use the exports as components of an animation; I'm finding that I have to write a lot of code to work around this problem, which I believe should just be the default export behavior of AD. Hope that makes sense :) Sorry if I've been unclear. Saivan.

I also think this is a good point, optimality isn't a huge issue I'd say; i'd much rather be able to read the resulting svg code than to produce single character names than shave a few bytes off of my file size.

So when exporting svg's a transformation matrix is applied to each node. So for example if item A, B, B1, B2, B3 and C are all translated, then they will each have their own "translation" coordinates. The registration point is the little square you have in the transform panel (in affinity designer), it is basically the point that you would rotate your item around. When I say transformations are baked in, I mean that Instead of translating node B to the correct location, then translating B1, B2, and B3 relative to node B, affinity just translates B1, B2 and B3 directly; without moving node B at all. This doesn't allow for proper transformation groupings, and makes it very hard to work with the resulting svg.

I'm sorry to copy this from another thread that I posted in, but I think it's also very important to have here. Another major issue for me are the transformations of groups: Any way we could have an option for that? And what would the time frames be? Thanks again :)

Because of the way designer exports everything. Say I had a document structure like this: Item A Item BItem B1 Item B2 Item B3 Item C Say I wanted to move item B around the canvas, this is made very difficult with designer, because it does not allow me to set up relative transforms. What currently happens, is that items B1, B2 and B3 get their transformations "baked in", so basically, ItemB has no translation information, but items B1, B2 and B3 are positioned absolutely, relative to the canvas. What I would prefer to see, is to see items B1, B2 and B3 positioned relative to the registration point, and then to apply a master transformation to item B to place the registration point in the correct place. This is the most sensible behaviour, because then if I wanted to move an object around the canvas, I could achieve that easily, by simply editing the master transformation. Right now, if I increase the size of the canvas, <B1, B2 and B3> will just be in the wrong place, and that wreaks havoc when trying to apply sensible transformations to the resulting svg.