An SVG using URL fragments to change the VIEWbox

test-1-view.svg

test-2-target.svg

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 500 150">
<style>
    .base{ /* switch off by default */
        display: none; 
    }
    #red:target{  /* switch ON if target URL matches */
        display: block;
    }
    #blue:target{
        display: block;
    }
    #yellow:target{
        display: block;
    }
</style>
 <g>
  <path fill="#4B9F14" d="M500 0H0v149.6h500V0Z"/>
  <path class="base" id="red" fill="#C32424" d="M176.3 0H0v149.6h176.3V0Z"/>
  <path class="base" id="blue" fill="#0B6EE6" d="M336.3 0h-160v149.6h160V0Z"/>
  <path class="base" id="yellow" fill="#FFCD00" d="M500 0H336.3v149.6H500V0Z"/>
  <g class="letter-c">
   <path fill="#fff" d="M446.3 30.8 443 49.5c-9-2-14.3-2.8-21-2-13.8 1.5-19.2 10-20 21.2-1.1 13.4 3.5 20.5 21.1 20.5 6 0 13.7-.7 20.6-4.2l1 28.2h-36.1c-16.5 0-30.7-19.7-27-43.7 4.4-28 22.3-39.7 40-40.6 6-.3 15.8.3 24.8 1.9Z"/>
  </g>
  <g class="letter-b">
   <path fill="#fff" d="M222.8 113.2V29.5h27.3c17.5 0 27.9 8 27.9 22 0 7.3-2.5 12.9-7 16.2 9 3.7 13.6 9 13.9 20.7.5 21.9-13.7 24.8-31.2 24.8h-30.9Zm16.4-51.6h12.6c8.8 0 12.5-2.8 12.5-8.9 0-6.7-4.3-10.5-12.5-10.5h-12.6v19.4Zm0 30.2H253c11.6 0 14.3-1.2 14.3-7.7 0-1-.6-3.4-3.6-5.5A17.8 17.8 0 0 0 253 76h-14v15.8Z"/>
  </g>
  <g class="letter-a">
   <path fill="#fff" d="m43.8 113.2 33-83.5h13.9l33 83.5h-21.5l-3-12.7H68.3l-3.9 12.7H43.8Zm29.6-30.9h20.8L83.6 48.7 73.4 82.3Z"/>
  </g>
 </g>
 <!-- Links to fragment urls -->
 <a href="#view-1">
  <text style="fill: rgb(255, 255, 255); font-family: Arial, sans-serif; font-size: 16px; white-space: pre;" x="57.04" y="135.91">#view-1</text>
 </a>
 <a href="#view-2" transform="matrix(1, 0, 0, 1, 167.526138, 0)">
  <text style="fill: rgb(255, 255, 255); font-family: Arial, sans-serif; font-size: 16px; white-space: pre;" x="57.04" y="135.91">#view-2</text>
 </a>
 <a href="#view-3" transform="matrix(1, 0, 0, 1, 335.460632, 0)">
  <text style="fill: rgb(255, 255, 255); font-family: Arial, sans-serif; font-size: 16px; white-space: pre;" x="57.04" y="135.91">#view-3</text>
 </a>
</svg>

test-3-both.svg

Cool. Got this working. Launch the 'RAW' link in the bottom example into a new tab and click one of the view links. It should reframe the document around that letter, and simultaneously switch on a background color. I'm not using a clip path to forcibly crop off what you can see on the edges. If you specified a height and width If wouldn't normally crop that extra image out of frame.