Jump to content
You must now use your email address to sign in [click for more info] ×

Custom CSS Classes and ID's per Group and Paths on SVG?


Recommended Posts

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?

Link to comment
Share on other sites

  • 1 month later...
  • 8 months later...

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.

Link to comment
Share on other sites

Well you can't see them within Affinity, but instead in the generated SVG code when opened inside a text editor ...

layer-names.jpg.6ccfb08318f605ca83b6237b4487275e.jpg

... 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>
  1. Note that the first made initial rect layer (initial one) with the layer name "objekt" get's the id="objekt" here.
  2. 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.
  3. 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.
  4. A copy of the last draw rect layer named "rechteck" this time, gets a new id="rechteck" and no serif:id reference then.

☛ 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

  • 2 months later...

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.

Link to comment
Share on other sites

  • 10 months later...

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

Link to comment
Share on other sites

  • 2 weeks later...
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

sig2.png.950594012af1a9c5582236e0a457cd0a.pngsig1.png.975f263a1c12b5aec3f87a4541eb33ef.png

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

  • 3 months later...

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 by monacotoni
nicer code layout
Link to comment
Share on other sites

  • 9 months later...

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.

Link to comment
Share on other sites

  • 11 months later...

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

Link to comment
Share on other sites

  • 8 months later...

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

Link to comment
Share on other sites

  • 1 year later...

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 by PauloAlmeida
simplify code and english correction
Link to comment
Share on other sites

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.