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.