Interactive map with multiple layers of SVG within

I am developing a web portal with maps that consist of multiple layers, such as cities, rivers, names of various geographical areas and similar. But I have a dilemma regarding how to approach the development of the web portal. I will try to explain the problem briefly.

Basic info about the maps: Maps have to be interactive (zoom capability, a pop-up box, ability to change attributes of elements at the click or hover of a mouse...). The maps are in SVG format and must have the ability to separately turn each layer on and off as desired. Most importantly, SVG must not be visible to users. This means that XML code of SVG must not be implemented in HTML using the <svg> tag for the protection of copyright and theft of data! The only solution is to implement SVG in HTML using <object> tag to preserve interactivity.

First approach: To embed within the HTML one SVG for each map layer Interactivity is inside layers (SMIL animation or with some JS library). Clicking on the button created in HTML, we can hide and show each layer/SVG separately (Hide_Show is JavaScript function). But the problem occurs when the zoom is incorporated into each layer separately, as they are completely independent and do not zoom together. Another (bigger!) problem is if several layers have interactive content. In that case only one layer that is "on top" in the HTML order keeps interactivity (because it is impossible to access the layers beneath).

<html>
   <head> ..... </head>
   <body>
        <input type="checkbox" onChange="Hide_Show('river');">
        <input type="checkbox" onChange="Hide_Show('country');">
        <input type="checkbox" onChange="Hide_Show('traffic');">

        <object id="river" data="/Map/river.svg"></object>
        <object id="country" data="/Map/country.svg"></object>
        <object id="traffic" data="/Map/traffic.svg"></object>
   </body>
</html>

Second approach: To embed within the HTML only one SVG with all map layers In this case, the zoom and interactivity work properly, but there is another problem. Because SVG must not be visible to users, it must be added to HTML using the <object> tag. The main question is how to achieve so that the checkbox created in HTML accesses the DOM in SVG added with <object> tag and turns on/off certain parts of the SVG code that represent the layers of the map? Is it possible to do so and how?

<html>
   <head> ..... </head>
   <body>
         <input type="checkbox" onChange="Hide_Show('river');">
         <input type="checkbox" onChange="Hide_Show('country');">
         <input type="checkbox" onChange="Hide_Show('traffic');">

         <object id="full_map" data="/Map.svg"></object>
   </body>
</html>

Thank you for any comments you may have. If anyone has a different approach, please feel freel to write. I am open to ideas!