test.svg

<svg xmlns="http://www.w3.org/2000/svg" width="152" height="32" class="svgbob">
  <style>.svgbob line, .svgbob path, .svgbob circle, .svgbob rect, .svgbob polygon {
  stroke: black;
  stroke-width: 2;
  stroke-opacity: 1;
  fill-opacity: 1;
  stroke-linecap: round;
  stroke-linejoin: miter;
}

.svgbob text {
  white-space: pre;
  fill: black;
  font-family: Iosevka Fixed, monospace;
  font-size: 14px;
}

.svgbob rect.backdrop {
  stroke: none;
  fill: white;
}

.svgbob .broken {
  stroke-dasharray: 8;
}

.svgbob .filled {
  fill: black;
}

.svgbob .bg_filled {
  fill: white;
  stroke-width: 1;
}

.svgbob .nofill {
  fill: white;
}

.svgbob .end_marked_arrow {
  marker-end: url(#arrow);
}

.svgbob .start_marked_arrow {
  marker-start: url(#arrow);
}

.svgbob .end_marked_diamond {
  marker-end: url(#diamond);
}

.svgbob .start_marked_diamond {
  marker-start: url(#diamond);
}

.svgbob .end_marked_circle {
  marker-end: url(#circle);
}

.svgbob .start_marked_circle {
  marker-start: url(#circle);
}

.svgbob .end_marked_open_circle {
  marker-end: url(#open_circle);
}

.svgbob .start_marked_open_circle {
  marker-start: url(#open_circle);
}

.svgbob .end_marked_big_open_circle {
  marker-end: url(#big_open_circle);
}

.svgbob .start_marked_big_open_circle {
  marker-start: url(#big_open_circle);
}

</style>
  <defs>
    <marker id="arrow" viewBox="-2 -2 8 8" refX="4" refY="2" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
      <polygon points="0,0 0,4 4,2 0,0"></polygon>
    </marker>
    <marker id="diamond" viewBox="-2 -2 8 8" refX="4" refY="2" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
      <polygon points="0,2 2,0 4,2 2,4 0,2"></polygon>
    </marker>
    <marker id="circle" viewBox="0 0 8 8" refX="4" refY="4" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
      <circle cx="4" cy="4" r="2" class="filled"></circle>
    </marker>
    <marker id="open_circle" viewBox="0 0 8 8" refX="4" refY="4" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
      <circle cx="4" cy="4" r="2" class="bg_filled"></circle>
    </marker>
    <marker id="big_open_circle" viewBox="0 0 8 8" refX="4" refY="4" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
      <circle cx="4" cy="4" r="3" class="bg_filled"></circle>
    </marker>
  </defs>
  <rect class="backdrop" x="0" y="0" width="152" height="32"></rect>
  <line x1="0" y1="8" x2="28" y2="8" class="solid end_marked_open_circle"></line>
  <line x1="32" y1="8" x2="48" y2="8" class="solid"></line>
  <polygon points="48,4 56,8 48,12" class="filled"></polygon>
  <line x1="56" y1="8" x2="80" y2="8" class="solid"></line>
  <rect x="80" y="4" width="8" height="8" class="solid filled" rx="0"></rect>
  <line x1="88" y1="8" x2="104" y2="8" class="solid"></line>
  <polygon points="104,4 112,8 104,12" class="filled"></polygon>
  <line x1="112" y1="8" x2="140" y2="8" class="solid end_marked_big_open_circle"></line>
</svg>