Jump to content
joed1035

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?

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
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.7.3 ◆ Affinity Photo 1.7.3 ◆ OSX El Capitan

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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! 

Share this post


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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×

Important Information

These are the Terms of Use you will be asked to agree to if you join the forum. | 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.