To edit and save a svg file

We are doing an Id card designing site using php and svg..we are able to edit the contents of svg using javascript and php but dont know how to save those edited data.can anyone help us???

I have this very same question. I'm modifying svg-file with javascript and I need to save the updates. No idea how, though. I've search through internet with no luck. I hope someone could show me a way to continue my search - or even better: tell the solution!

One way might be to store the changes made in a database and reference these changes against a unique user login/pword

so assuming you have a database you are generating the svg content from, and the user changes the id=name text tag content from "name goes here" to "john smith" once the user submits the form use script to detect for changes and send any differences/changes to the database, I would imagine this could also be done on the fly rather than all at once at the end.

when the svg is called up again based on the above user login get the php to output saved content(if there is any) rather than original content.

Obviously the more complex you make the changes the larger the task you will have but once setup should do the trick.

Unfortunately I do not have an example set up but I am pretty sure it would work and if i do have the time at some stage might be able to put something simple together

I hope this helps or at least sends you in a direction that might get you a working solution

Hmm, didn't think it that way. Thanks! I have to look if that's gonna help me.

Is there any way I could see "evt.target.ownerDocument" as a text? That is the svg document I'm altering with javascript. When I add there, lets say, a circle, it won't appear on my .svg file but exists in that evt.target.ownerDocument. If I try to print evt.target.ownerDocument, it just gives "[object SVGDocument]".

Danae

I'm not too sure I follow you, I think what you are after is a simple save to text file once the user has carried out changes. I am not sure this is possible but someone with more experience might be able to confirm this.

How is the user generating the circle object? I would suggest at this stage (when circle is generated) capture the object and send to database appending an id value to it.

So in the code below which is from carto:net - Manipulating SVG Documents Using ECMAScript (Javascript) and the DOM (http://www.carto.net/papers/svg/manipulating_svg_with_dom_ecmascript/) where I have added the alert to construct the object, replace the alert with a send to the database, then when you generate the svg with php/asp simply call the DB content for that group and populate the group with the saved data

Again - not sure this is exactly what you are after but might give you some ideas

<?xml version="1.0" encoding="iso-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
<!ATTLIST svg xmlns:a3 CDATA #IMPLIED a3:scriptImplementation CDATA #IMPLIED>
<!ATTLIST script a3:scriptImplementation CDATA #IMPLIED>
]>
<?AdobeSVGViewer save="snapshot"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:attrib="http://www.carto.net/attrib" viewBox="-20 -20 400 250" id="cont" width="800" height="500">

<script type="text/ecmascript"><![CDATA[


var svgNS = "http://www.w3.org/2000/svg";

function createRect() {
var newRect = document.createElementNS(svgNS,"rect");
newRect.setAttributeNS(null,"width",Math.random() * 100);
newRect.setAttributeNS(null,"height",Math.random() * 100);
newRect.setAttributeNS(null,"x",Math.random() * 250);
newRect.setAttributeNS(null,"y",Math.random() * 180 + 60);
newRect.setAttributeNS(null,"fill-opacity",Math.random());
var red = Math.round(Math.random() * 255);
var green = Math.round(Math.random() * 255);
var blue = Math.round(Math.random() * 255);
newRect.setAttributeNS(null,"fill","rgb("+ red +","+ green+","+blue+")");
document.getElementById("firstGroup").appendChild(newRect);
alert("<rect x='" + newRect.getAttributeNS(null,"x") + " y='" + newRect.getAttributeNS(null,"y") + "' width='" + newRect.getAttributeNS(null,"width") + "' height='" + newRect.getAttributeNS(null,"height") + "' fill='" + newRect.getAttributeNS(null,"fill") + "' id='userrect1' />");
}


]]></script>

<g id="firstGroup">
<text x="20" y="30" onclick="createRect()" font-size="13px">Click on this text to create a new rectangle.</text>
</g>

</svg>

Thanks a lot for your time and effort, but that isn't quite the thing I'd need. Well, I keep looking for a solution (:

np good luck!

Still no luck with this. In XML (PHP) there is a function saveXML(). I'm looking for same function for SVG.