SVG Layer Support

The new ReadSVG class in Eyeshot 2025 is great but doesn't have any support for layers. In our current SVG loading we treat SVG groups as layers. Would it be possible to add a way to do that? As an example, with the SVG below we would load the following layers:

  • Layer1 (color: lime)
  • Layer2 (color: green)
  • Layer3 (color: olive)
  • Layer4 (color: seagreen)

Example SVG:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg x="-175" y="-175" width="350" height="350" viewBox="-175, -175, 350, 350" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xml="http://www.w3.org/XML/1998/namespace" version="1.1">
  <g transform="scale(1, -1)" id="Layer1">
    <line x1="25" y1="150" x2="50" y2="125" style="stroke:lime;" />
    <line x1="75" y1="125" x2="100" y2="150" style="stroke:lime;" />
    <line x1="125" y1="150" x2="150" y2="125" style="stroke:lime;" />
    <line x1="25" y1="75" x2="50" y2="100" style="stroke:lime;" />
    <line x1="75" y1="100" x2="100" y2="75" style="stroke:lime;" />
    <line x1="125" y1="75" x2="150" y2="100" style="stroke:lime;" />
    <line x1="25" y1="50" x2="50" y2="25" style="stroke:lime;" />
    <line x1="75" y1="25" x2="100" y2="50" style="stroke:lime;" />
    <line x1="125" y1="50" x2="150" y2="25" style="stroke:lime;" />
    <line y1="150" y2="125" style="stroke:lime;" />
    <line y1="100" y2="75" style="stroke:lime;" />
    <line y1="50" y2="25" style="stroke:lime;" />
    <line x1="25" x2="50" style="stroke:lime;" />
    <line x1="75" x2="100" style="stroke:lime;" />
    <line x1="125" x2="150" style="stroke:lime;" />
  </g>
  <g transform="scale(1, -1)" id="Layer2">
    <line x1="-150" y1="125" x2="-125" y2="150" style="stroke:green;" />
    <line x1="-150" y1="100" x2="-125" y2="75" style="stroke:green;" />
    <line x1="-125" y1="50" x2="-150" y2="25" style="stroke:green;" />
    <line x1="-100" y1="150" x2="-75" y2="125" style="stroke:green;" />
    <line x1="-50" y1="125" x2="-25" y2="150" style="stroke:green;" />
    <line x1="-75" y1="100" x2="-100" y2="75" style="stroke:green;" />
    <line x1="-50" y1="100" x2="-25" y2="75" style="stroke:green;" />
    <line x1="-100" y1="50" x2="-75" y2="25" style="stroke:green;" />
    <line x1="-25" y1="50" x2="-50" y2="25" style="stroke:green;" />
  </g>
  <g transform="scale(1, -1)" id="Layer3">
    <line x1="-150" y1="-25" x2="-125" y2="-50" style="stroke:olive;" />
    <line x1="-125" y1="-75" x2="-150" y2="-100" style="stroke:olive;" />
    <line x1="-150" y1="-125" x2="-125" y2="-150" style="stroke:olive;" />
    <line x1="-100" y1="-50" x2="-75" y2="-25" style="stroke:olive;" />
    <line x1="-50" y1="-25" x2="-25" y2="-50" style="stroke:olive;" />
    <line x1="-100" y1="-75" x2="-75" y2="-100" style="stroke:olive;" />
    <line x1="-50" y1="-100" x2="-25" y2="-75" style="stroke:olive;" />
    <line x1="-100" y1="-150" x2="-75" y2="-125" style="stroke:olive;" />
    <line x1="-50" y1="-125" x2="-25" y2="-150" style="stroke:olive;" />
    <line y1="-25" y2="-50" style="stroke:olive;" />
    <line y1="-75" y2="-100" style="stroke:olive;" />
    <line y1="-125" y2="-150" style="stroke:olive;" />
    <line x1="-150" x2="-125" style="stroke:olive;" />
    <line x1="-100" x2="-75" style="stroke:olive;" />
    <line x1="-50" x2="-25" style="stroke:olive;" />
  </g>
  <g transform="scale(1, -1)" id="Layer4">
    <line x1="25" y1="-50" x2="50" y2="-25" style="stroke:seagreen;" />
    <line x1="75" y1="-25" x2="100" y2="-50" style="stroke:seagreen;" />
    <line x1="125" y1="-50" x2="150" y2="-25" style="stroke:seagreen;" />
    <line x1="25" y1="-75" x2="50" y2="-100" style="stroke:seagreen;" />
    <line x1="75" y1="-100" x2="100" y2="-75" style="stroke:seagreen;" />
    <line x1="125" y1="-75" x2="150" y2="-100" style="stroke:seagreen;" />
    <line x1="25" y1="-150" x2="50" y2="-125" style="stroke:seagreen;" />
    <line x1="75" y1="-125" x2="100" y2="-150" style="stroke:seagreen;" />
    <line x1="125" y1="-150" x2="150" y2="-125" style="stroke:seagreen;" />
  </g>
</svg>
0

Comments

0 comments

Please sign in to leave a comment.

Didn't find what you were looking for?

New post