php - Customize/Edit svgEdit from Google on my Website -

php - Customize/Edit svgEdit from Google on my Website -

here problem,

i have build custom interface map-editing. these maps svg files, chose svgedit google. need customize it... utilize jquery 1.10.x , bootstrap3

i not need default functionnalities, , don't want maintain standard svgedit interface, need simplify it, need functionnalities, , have remove toolbars & on... create editor quite empty... buttons & functionnalities have externalized, on container page, have out of svgedit iframe... (is possible?)

for editor, need these functionnalities :

i have set default canvas (a map) on click on list (when take map, has appear on svgedit tool - have map, svg file, on server)

i have set main image fit canvas, no scroll x or y far away image... have scrollbars around "default empty canvas" allows me go far away image... , thus, should allow mouse wheel zoom in/out on map... (which seems disabled default...)

i have allow user possibility add together "layer" on map (i have "pseudo-form" input text , confirm button, on click on it, should add together empty layer on main map "current layer")... user should able add together many layers wants... , display ones wants...

i have allow user add together icons drag&drop or click on image click on canvas place anywhere on current layer (not on map, on layer), draw line, polygon, , add together text on current layer , save these objects on layer (then have allow possibility edit / delete these objects)

i need "save" button saves current layers on server.

well, don't know if i'm talking possible, i'm tryin' do. here is, example, short thought of page should (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 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'/>&nbsp;&nbsp;&nbsp;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'/>&nbsp;&nbsp;&nbsp;layer 2</label> </fieldset> <fieldset class="bordershadone" style="margin-bottom:20px;"> <legend> add together 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 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;"> <a href="#" class="thumbnail" style="float:left;padding:0;"><img class="icon" style="width:24px;height:24px;" src="./files/icons/icon1.jpg" alt="" title="icon1"/></a> </label> <label style="height:32px;width:32px;float:left;margin-left:10px;"> <a href="#" class="thumbnail" style="float:left;padding:0;"><img class="icon" style="width:24px;height:24px;" src="./files/icons/icon2.jpg" alt="" title=""/></a> </label> <br> <label class="info little italic"> drag & drop on "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>&nbsp;|&nbsp;draw 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>&nbsp;|&nbsp;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>&nbsp;|&nbsp;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>&nbsp;|&nbsp;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> doing : </legend> <!-- should here display info doing, selected, give possibility save layer or delete selected items on --> </fieldset> </div> </div> </div> </div>

here css... (the main thing ":before" forcess svgedit container have height set width...)

<style> .mixsize:before{ content:""; display:block; padding-top:80%; } .svgeditiframe{ position:absolute; top:0; left:0; height:100%; width:100%; } </style>

thanks reading, help!

php jquery html css svg