Group <g> elements by netlist in plotted SVG

Hello. KiCad is becoming better, and it’s good :slight_smile: I have a little idea on improving collaboration with non-(yet-)kicad users.

It would be nice to be able to show the layout without having to install Kicad to their machine, but it’s sometimes quite tricky to get a grasp on a dense 4-layer labyrinth by looking at the pdfs or 4 separate pictures. What I’d want to have is the image where one can hover the mouse over and highlight the entire net to quickly understand what is connected where.

Here is the concept: https://jsfiddle.net/hy9jg057/ in the bottom right corner you can see the copper layer plotted in pcbnew, where I added just one style:

<style>
  g:hover {
    opacity: 0.5;
  }
</style>

Unfortunately there is no way to distinguish graphics elements in svg right now, because all netlist-related information is not plotted, and at the moment highlighting is quite random.

By applying some feColorMatrix filters it’s trivial to assign different colors to different layers, and you’ll get an easy way to share even very complex layouts for discussion.

I understand that grouping 's might require severe rewrite of plotter (quickly ran through the source), but maybe adding it as some attribute, say <g kicad:net="Net-(C1-Pad1)"> would make it possible with some javascript.

1 Like

You might want to have a look at these:

Proof of concept web based SVG design viewer

New way to view and share KiCad designs on the web

1 Like

Wow, eyrie really rocks, thanks!

Still, I think my suggestion is valid because it won’t do any harm to any existing use cases, but rather will make produced svg’s more useful and flexible :slight_smile:

i like the idea to have the svgs sorted some way…
the grouping per layer would be awesome!
with this you also could easily hide layers -
than just add

inkscape:groupmode="layer"
inkscape:label="Colibri orig"

inkscape attributes and the groups will show up as layers in inkscape :slight_smile:

currently for documentation iam doing this manually. (select things with same color and than move to layers…)

1 Like