Revision control
++ <?xml version="1.0" encoding="UTF-8" standalone="no"?>
++ <svg
++ version="1.1"
++ width="340"
++ height="130"
++ xmlns="http://www.w3.org/2000/svg"
++ xmlns:svg="http://www.w3.org/2000/svg">
++
++ <style>
++ svg .box-style { stroke: black; fill: white }
++ svg .line-style { stroke: red; fill: none }
++ svg .fill-style { stroke: none; fill: red }
++ svg .np-line-style { stroke: blue; fill: none }
++ svg .np-fill-style { stroke: none; fill: blue }
++ svg .text-style { font: 20px arial; fill: black }
++ svg .small-text-style { font: 12px monospace; fill: black }
++
++ svg.dark .box-style { stroke: #f2f2f2; fill: black }
++ svg.dark .line-style { stroke: red; fill: none }
++ svg.dark .fill-style { stroke: none; fill: red }
++ svg.dark .np-line-style { stroke: #4080ff; fill: none; stroke-width: 1.5 }
++ svg.dark .np-fill-style { stroke: none; fill: #4080ff }
++ svg.dark .text-style { font: 20px arial; fill: #f2f2f2 }
++ svg.dark .small-text-style { font: 12px monospace; fill: #f2f2f2 }
++
++ [data-theme="dark"] svg .box-style { stroke: #f2f2f2; fill: black }
++ [data-theme="dark"] svg .line-style { stroke: red; fill: none }
++ [data-theme="dark"] svg .fill-style { stroke: none; fill: red }
++ [data-theme="dark"] svg .np-line-style { stroke: #4080ff; fill: none; stroke-width: 1.5 }
++ [data-theme="dark"] svg .np-fill-style { stroke: none; fill: #4080ff }
++ [data-theme="dark"] svg .text-style { font: 20px arial; fill: #f2f2f2 }
++ [data-theme="dark"] svg .small-text-style { font: 12px monospace; fill: #f2f2f2 }
++
++ [data-theme="light"] svg .box-style { stroke: black; fill: white }
++ [data-theme="light"] svg .line-style { stroke: red; fill: none }
++ [data-theme="light"] svg .fill-style { stroke: none; fill: red }
++ [data-theme="light"] svg .np-line-style { stroke: blue; fill: none }
++ [data-theme="light"] svg .np-fill-style { stroke: none; fill: blue }
++ [data-theme="light"] svg .text-style { font: 20px arial; fill: black }
++ [data-theme="light"] svg .small-text-style { font: 12px monospace; fill: black }
++ </style>
++
++ <g transform="translate(10.5, 10.5)">
++ <path d="m 0,0 h 80 v 60 h -80 z" stroke="black" fill="white"
++ class="box-style" />
++ <text x="35" y="36" font-family="arial" font-size="20px"
++ class="text-style">A</text>
++ </g>
++
++ <g transform="translate(90.5, 10.5)">
++ <path d="m 0,0 h 80 v 60 h -80 z" stroke="black" fill="white"
++ class="box-style" />
++ <text x="35" y="36" font-family="arial" font-size="20px"
++ class="text-style">B</text>
++ <path d="M 0,60 c 0,30 50,40 80,30" stroke="blue" fill="none"
++ class="np-line-style" />
++ <path d="M 0,60 l -2,14 l 11,-4 z" stroke="none" fill="blue"
++ class="np-fill-style" />
++ <text x="-15" y="110"
++ class="small-text-style">previous()</text>
++ </g>
++
++ <g transform="translate(170.5, 10.5)">
++ <path d="m 0,0 h 80 v 60 h -80 z" stroke="black" fill="white"
++ class="box-style" />
++ <text x="35" y="36" font-family="arial" font-size="20px"
++ class="text-style">C</text>
++ <path d="M 0,60 v 50" stroke="red"
++ class="line-style" />
++ <path d="M 0,60 l -5,10 l 10,0 z" stroke="none" fill="red"
++ class="fill-style" />
++ <text x="30" y="110"
++ class="small-text-style">next()</text>
++ </g>
++
++ <g transform="translate(250.5, 10.5)">
++ <path d="m 0,0 h 80 v 60 h -80 z" stroke="black" fill="white"
++ class="box-style" />
++ <text x="35" y="36" font-family="arial" font-size="20px"
++ class="text-style">D</text>
++ <path d="M 0,60 c 0,30 -50,40 -80,30" stroke="blue" fill="none"
++ class="np-line-style" />
++ <path d="M 0,60 l 2,14 l -11,-4 z" stroke="none" fill="blue"
++ class="np-fill-style" />
++ </g>
++ </svg>