Customize/Edit svgEdit from Google on my Website - php

Question

here is my problem,
I have to build a custom interface for map-editing. These maps are svg files, i chose svgEdit from Google. But i need to customize it... I use jQuery 1.10.x and Bootstrap3
I do not need the default functionnalities, and i don't really want to keep the standard svgEdit interface, i need to simplify it, i just do need some functionnalities, and i have to remove toolbars & so on... to make the editor quite empty... the buttons & functionnalities have to be externalized, they are on the container page, but they have to be out of the svgEdit iframe... (is it possible?)
For the editor, I just need these functionnalities :
I have to set the default canvas (a map) on click on a list (when i choose a map, it has to appear on svgEdit tool - i DO HAVE the map, svg file, on my server)
I have to set the main image to fit perfectly the canvas, no scroll x or y far away from the image... now i have scrollbars all around the "default empty canvas" that allows me to go far away from the image... and thus, i should allow mouse wheel to zoom in/out on the map... (which seems to be disabled by default...)
I have to let the user the possibility to add a "layer" on a map (i have a "pseudo-form" with an input text and a confirm button, on click on it, it should add an empty layer on the main map which is then the "current layer")... The user should be able to add as many layers as he wants... and display the ones he wants...
I have to let the user add some icons by drag&drop OR click on image then click on the canvas to place it anywhere on the current layer (not on the map, on the layer), draw a line, a polygon, and add text on the current layer and save these objects on the layer (then i have to let the possibility to edit / delete these objects)
I also need a "save" button which saves the current layers on my server.
Well, i don't really know if all I'm talking about is just possible, but this is what I'm tryin' to do. Here is, for example, a short idea of what the page should look like (Bootstrap inside...) :
<div class="panel panel-success" style="margin-top:30px;">
<div class="panel-heading">
<a class="btn btn-success" href="#" title="Add Map" style="float:right;">Add a new Map</a>
<h3>Maps : </h3>
</div>
<div class="panel-body" style="text-align:center;">
<div class="col-lg-4" style="border-right:1px dotted grey;">
<fieldset class="borderShadOne" style="margin-bottom:20px;">
<legend>
Select Place :
</legend>
<div class="input-group">
<span class="input-group-addon">
Map :
</span>
<select class="form-control" name="mapChoice" id="mapChoice">
</select>
</div>
</fieldset>
<fieldset class="borderShadOne" style="margin-bottom:20px;">
<legend>
Display Layers :
</legend>
<label class='btn col-lg-6' style='text-align:left;'><input type='checkbox' style='width:10px;float:left;' class='displayLayer' name='displayLayer' value='1'/> Layer 1 </label>
<label class='btn col-lg-6' style='text-align:left;'><input type='checkbox' style='width:10px;float:left;' class='displayLayer' name='displayLayer' value='2'/> Layer 2</label>
</fieldset>
<fieldset class="borderShadOne" style="margin-bottom:20px;">
<legend>
Add New Layer :
</legend>
<div class="input-group">
<span class="input-group-addon">
Layer Name :
</span>
<input class="form-control" type="text" name="newLayerName" id="newLayerName" value=""/>
</div>
<br>
<div style="text-align:right;">
<label class="btn btn-success" id="send_name_layer">Confirm</label>
</div>
<br>
</fieldset>
<fieldset class="borderShadOne" style="margin-bottom:20px;">
<legend>
Layer Edit :
</legend>
<div class="input-group">
<span class="input-group-addon">
Layer to Edit :
</span>
<select class="form-control" type="text" name="currentLayerToEdit" id="currentLayerToEdit">
<option value="0">None</option>
<option value="1">Layer 1</option>
<option value="2">Layer 2</option>
</select>
</div>
<br>
<fieldset style="margin-left:10px;">
<legend style="text-align:left;">
Icons :
</legend>
<label style="height:32px;width:32px;float:left;margin-left:10px;">
<img class="icon" style="width:24px;height:24px;" src="./files/icons/icon1.jpg" alt="" title="Icon1"/>
</label>
<label style="height:32px;width:32px;float:left;margin-left:10px;">
<img class="icon" style="width:24px;height:24px;" src="./files/icons/icon2.jpg" alt="" title=""/>
</label>
<br>
<label class="info small italic">
Drag & drop on the "current Layer"
</label>
</fieldset>
<br>
<fieldset style="margin-left:10px;">
<legend style="text-align:left;">
Tools :
</legend>
<label class="btn btn-warning" id="toolline" style="float:left;margin-left:5px;margin-right:5px;"><i class="fa fa-pencil"></i> | Draw a Line</label>
<label class="btn btn-info" id="toolselector" style="float:left;margin-left:5px;margin-right:5px;"><i class="fa fa-location-arrow"></i> | Select Objects</label>
<label class="btn btn-danger" id="tooltext" style="float:left;margin-left:5px;margin-right:5px;"><i class="fa fa-bold"></i> | Add Text</label>
<label class="btn btn-default" id="toolpolygon" style="float:left;margin-left:5px;margin-right:5px;"><i class="fa fa-square"></i> | Draw Polygon</label>
</fieldset>
</fieldset>
</div>
<div class="col-lg-8">
<div class="row col-lg-12">
<b><i>Display box : </i></b>
</div>
<div style="clear:both;"></div>
<div class="mixSize" style="border:1px solid black;position:relative;margin:0 auto;max-width:1000px;width:100%;border-radius:8px;">
<iframe class="svgEditIframe" src='./js/svgedit26/svg-editor.html' width=100% height=100% ></iframe>
</div>
<br>
<div>
<div class="col-lg-6">
<fieldset>
<legend>
What I am doing :
</legend>
<!-- Should here display information about what I am doing, what is selected, give possibility to save Layer or delete selected items on it -->
</fieldset>
</div>
</div>
</div>
</div>
Here is some CSS...
(the main thing is this ":before" which forcess my svgEdit container to have a height set as its width...)
<style>
.mixSize:before{
content:"";
display:block;
padding-top:80%;
}
.svgEditIframe{
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
}
</style>
Thanks for reading, thanks for help!