joed1035 Posted February 10, 2017 Share Posted February 10, 2017 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? Quote Link to comment Share on other sites More sharing options...
Staff Callum Posted February 10, 2017 Staff Share Posted February 10, 2017 Hi Joed1035, The Layers names you give the objects in Affinity will be treated as the IDs when you export to .SVG. You will have to give each object a unique ID. Thanks C joed1035 1 Quote Please tag me using @ in your reply so I can be sure to respond ASAP. Link to comment Share on other sites More sharing options...
robert_muench Posted April 8, 2017 Share Posted April 8, 2017 Ok, this is the same questions as mine: https://forum.affinity.serif.com/index.php?/topic/38523-svg-export-attributes-etc-and-javascript-access/ Are there are any plans to add a feature to name by class or ID, or specify more attributes per layer? IMO very important these days. Quote Link to comment Share on other sites More sharing options...
dopry Posted December 29, 2017 Share Posted December 29, 2017 You can name all your groups/layers as if they were classes. Then export to SVG. Each element will get a unique id="" based on the layer name and a serif:id="" with the original layer name. then you can search for serif:id and replace it with class. voila css addressable SVG to drop into your html documents. Quote Link to comment Share on other sites More sharing options...
robert_muench Posted December 30, 2017 Share Posted December 30, 2017 What's the difference between "layer name" and "original layer name"? Where can I see them within Affinity? Quote Link to comment Share on other sites More sharing options...
v_kyr Posted December 30, 2017 Share Posted December 30, 2017 Well you can't see them within Affinity, but instead in the generated SVG code when opened inside a text editor ... ... will give you ... <svg ...> <rect id="objekt" x="346" y="108" width="419" height="103" style="fill:rgb(232,67,67);"/> <g id="objekt1" serif:id="objekt" transform="matrix(1,0,0,1,-2,138)"> <rect x="346" y="108" width="419" height="103" style="fill:rgb(67,88,232);"/> </g> <g id="objekt2" serif:id="objekt" transform="matrix(1,0,0,1,3,279)"> <rect x="346" y="108" width="419" height="103" style="fill:rgb(113,232,67);"/> </g> <rect id="objekt3" serif:id="objekt" x="357" y="531" width="300" height="96" style="fill:rgb(232,208,67);"/> <rect id="rechteck" x="360" y="662" width="294" height="82" style="fill:rgb(232,67,211);"/> </svg> Note that the first made initial rect layer (initial one) with the layer name "objekt" get's the id="objekt" here. Copies of that rect layer with the same assigned layer name of "objekt" are renumbered to id="objekt1" and id="objekt2", and will get an additional serif:id which references them as serif:id="objekt" here. A new drawn rect layer (no copy this time) is again named as an "objekt" layer and thus gets id="objekt3" and the serif:id="objekt" here. A copy of the last draw rect layer named "rechteck" this time, gets a new id="rechteck" and no serif:id reference then. Quote ☛ Affinity Designer 1.10.8 ◆ Affinity Photo 1.10.8 ◆ Affinity Publisher 1.10.8 ◆ OSX El Capitan ☛ Affinity V2.3 apps ◆ MacOS Sonoma 14.2 ◆ iPad OS 17.2 Link to comment Share on other sites More sharing options...
slemmon Posted March 16, 2018 Share Posted March 16, 2018 It would be great if there were a way to set classes on the paths exported in the SVG export. Hoping to be able to do something like: https://css-tricks.com/almanac/properties/f/fill/ That way I could export 6 different icons all with <path class="user-defined-classname" and I can set the fill (or whatever global style attribute I want) in CSS to be applied to all 6 icons. Quote Link to comment Share on other sites More sharing options...
mvaneijgen Posted January 23, 2019 Share Posted January 23, 2019 Are there any plans for this. I working on these complex animations using GreenSock and if I could just tell Affinity Designer that is should render `class=""` instead of `id=""` it would make my life so much easier. I know I could just replace all my id's with classes after the fact, but a counter is being added to each same named layer (eg shape, shape1, shape2 ect), also I am constantly changing the design file while using the code to fix minor bugs. Also the feedback from dobry doesn't really work, because you than still are missing the first layer, that one doesn't get serif:id Patrick C 1 Quote Link to comment Share on other sites More sharing options...
Patrick C Posted January 31, 2019 Share Posted January 31, 2019 On 1/23/2019 at 3:43 AM, mvaneijgen said: Are there any plans for this. I working on these complex animations using GreenSock and if I could just tell Affinity Designer that is should render `class=""` instead of `id=""` it would make my life so much easier. I know I could just replace all my id's with classes after the fact, but a counter is being added to each same named layer (eg shape, shape1, shape2 ect), also I am constantly changing the design file while using the code to fix minor bugs. Also the feedback from dobry doesn't really work, because you than still are missing the first layer, that one doesn't get serif:id Agreed, this would be super handy Quote Illustrator, Designer, 3D Modeller (In that order) - Open for commissions - Check out my art Instagram or follow me on twitter or like my Facebook page. Phew! Link to comment Share on other sites More sharing options...
monacotoni Posted May 24, 2019 Share Posted May 24, 2019 (edited) I'm using svgo and a custom plugin for this purpose. In Affinity Designer I add layer names like "myid", if I only want an id, I use "myid.myclass", in case I want both, and ".myclass" in case the class is sufficient. That's the plugin: fn: function (item) { if (item.isElem() && item.hasAttr('id')) { var id = item.attr('id').value.split('.'); if (id.length>1) { item.addAttr({ name: 'class', value: id[1], prefix: '', local: 'class' }) item.removeAttr('id') if (id[0] && id[0] !== '') item.addAttr({ name: 'id', value: id[0], prefix: '', local: 'id' }); } } } For my use case that's sufficient, but you could easily enhance it to allow multiple classes, etc. P.s.: to use it, you also have to disable "cleanupIDs" plugin in svgo config. Edited May 24, 2019 by monacotoni nicer code layout Quote Link to comment Share on other sites More sharing options...
cssinate Posted March 5, 2020 Share Posted March 5, 2020 I was especially surprised to find out that the "Styles" panel doesn't use classes to apply the styles in SVG, but instead inlines each style on every element that uses it. If you apply the same style to three paths, all three will have the "style" attribute with the relevant styles, rather than adding a class and adding defs > styles The SVG export could be so much better with this tool, but unfortunately, I'm left using Inkscape instead. I can't buy this product until SVG output is improved. Andez 1 Quote Link to comment Share on other sites More sharing options...
MmmMaarten Posted March 1, 2021 Share Posted March 1, 2021 +1 Using svg interactively in browsers and/or using stylesheets on them we need to be able to add css class names to elemenets. Right now we have to do this manually every time after exporting (breaks the workflow and makes it difficult to re-export a changed design) or write extra code to change IDs into classes (which needs extra work and unneeded extra code for each project). It would be nice and a lot easier if we could add these class names right within the layer names of these layers in Affinity (only the css class names, the rest we can do externally in other editors). So let's say our layer name is '#floorId.floor.floor1' in Affinity, that layer would then export in svg to an element with id="floorId" class="floor floor1" That way every user could use he's/hers own workflow by deciding which objects get a class/multiple classes and/or id. And we can also decide NOT to use IDs at all. Brian M 1 Quote Link to comment Share on other sites More sharing options...
BooneJ Posted November 4, 2021 Share Posted November 4, 2021 This seems so simple, so many are asking for it yet not a single app does it. This would be such a huge help to SVG animators out there. Illustrator=NO SVGGator=NO Rive=NO Boxy=NO Affinity=NO Why is this so hard? Add a property in the properties panel labeled class, which adds a simple class="class names (multiple separated by space)" right after id="id name" in the svg code. Maybe the problem is no developer sees the power of this simple addition. Here is an example. I can have any number of items with the same class applied, let's say 200 elements. Now with 1 line of code (GSAP or any other javascript animation platform) I can animate every one of those 200 with staggered begin and end times, different start and stop locations, even math based rotation, scale rotation etc. It's very powerful, yet we still need to add the class names by hand. Frustrating!!! Quote Link to comment Share on other sites More sharing options...
PauloAlmeida Posted May 18, 2023 Share Posted May 18, 2023 (edited) Really too bad we don't have this option. I would like to write a plugin for that some day. FOR ANYONE TRYING TO ADD CLASSES/ATTRIBUTES TO A SVG LOADED ON A WEB BROWSER: I needed to add some attributes to a SVG that is loaded inside a HTML page. On my case, I had a Javascript array with all my elements. I solved my problem by adding a Javascript code that checks for the attributes I need and if its not present, adds it. On my case, I didn't need to add classes, but attributes: //get the element var map = document.getElementById(Bins[i].Map); if (map != undefined) { //check and add attribute if not found if (map.getAttribute("binid") == undefined) map.setAttribute("binid", Bins[i].Id); if (map.getAttribute("onmouseover") == undefined) map.setAttribute("onmouseover", "Hovered(this);"); if (map.getAttribute("onmouseout") == undefined) map.setAttribute("onmouseout", "UnHovered(this);"); if (map.getAttribute("onclick") == undefined) map.setAttribute("onclick", "Clicked(this);"); } in this case, I add the attributes I need to the element "map". I run this function every time the page loads. I think somebody could use the same type of code to add classes to those elements. Edited May 18, 2023 by PauloAlmeida simplify code and english correction Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.