CSS Style

[calumk]

When editing lots of svgs in say, an icon pack or similar, it is usefull to be able to use a style sheet and classes - to have consistancy across multiple files.

Can GodSVG allow css classes, and provide a box where css can be written / pasted

[MewPurPur]

It's not in my near-future plans to consider SVGs that aren't standalone.

[calumk]

I get where your coming from, but it's just using an SVG that has classes, which is pretty normal practice

https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/SVG_and_CSS

BoxySVG also doesn't support this, which is why I was really hoping godsvg would - it's almost perfect for my use case otherwise

[MewPurPur]

It might become prioritized sooner if you can help us work out implementation details.

[MewPurPur]

Now that the Settings menu has been reworked, this might be able to land somewhere in there. But the above comment still stands, it's not planned but I might get to it sooner if we can work out implementation details.

[calumk]

Great to know

[MewPurPur]

Is what you need effectively solved by adding

<defs>
    <style><![CDATA[
       {YOUR CSS CONTENT HERE}
    ]]></style>
  </defs>

right after the SVG declaration in a standalone SVG?

Please don't test this in GodSVG, it can't handle text or CDATA right now.

[calumk]

That would correctly render yes.
I would be able to manually seperate the css and svg data - eg

Again, appreciate my use case is fairly specific

<g class="whiff_component">
    <g id="Compressor">
        <g id="Symbol">
            <path class="whiff_st0" d="M7.5 2.44v-2" />
            <path class="whiff_st0" d="M7.5 2.44L.41 14.6h14.18z" />
        </g>
        <g id="Connectors">
            <path data-tag="whiff_port" data-port="p" class="whiff_st1" d="M6,0H9v2.4H6V0z"/>
        </g>
        <g id="Bounding">
            <rect width="15" height="15" class="whiff_bounding"/>
        </g>
    </g>
</g>

 .whiff_st0 {
  fill: #fff;
  fill-opacity: 0.5;
  stroke: #000;
  stroke-width: 0.7087;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
}
.whiff_st1 {
  opacity: 0.3;
  fill: #f40c0c;
  enable-background: new;
}
.whiff_st2 {
  opacity: 0.3;
  fill: limegreen;
  enable-background: new;
}
.whiff_bounding {
  opacity: 0;
  fill: lightblue;
  stroke: none;
  pointer-events: none;
}