SVG Button Toggle

Hi I’m trying to toggle a svg button from one state to the other.
They are two seperate svgs contained in a larger svg.
For reference I’ve attched these images here:
enter image description here

enter image description here

So far I have come up with this where onlclick I change the svg id value from display on or off as shown below. I’m sure there is a much cleaner way to do this using Jquery?

$( "#off-btn-nav-01-category" ).on( "click", function() {
  $("#off-btn-nav-01-category").css("display", "none");
  $("#on-btn-nav-01-category").css("display", "block");
});

$( "#on-btn-nav-01-category" ).on( "click", function() {
  $("#on-btn-nav-01-category").css("display", "none");
  $("#off-btn-nav-01-category").css("display", "block");
});

One last thing I’ve got this svg running inline to be able to change the css properties is there any way to have this svg file externally so I can apply css properties to it?