Saving an edited SVG file as a new file or to DB

Question

I don't often need to ask questions but Google has failed me this time

so I have a site that uses Javascript to edit an external SVG file like so:

<embed id="svgFile" src="svgFile.svg" type="image/svg+xml" />

I have a form with inputs to edit the SVG on the fly with Javascript and Jquery like so:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="JavascriptFile.js"></script>

....HTML....

<input id="txt1" name="text_one" maxlength="16" type="text" class="text" placeholder="Line one" onkeyup="update(1)" />

the javascript is something like this:

function update(n) {var txtID = n;
var txt = document.getElementById("txt" + txtID).value;
var svgTXT = document.getElementById("svgFile").getSVGDocument().getElementById("txt" + txtID);
svgTXT.textContent = txt;
}

Now this all works OK and the "image"/SVG updates on the page BUT now I need to save this updated image.
New I don't know exactly what file format we need but saving the information to a php/MySQL DB and PDF are a minimum. the PDF is for the user to save and print... what ever they want to do and the DB is for on-line saving.

I also have JQuery linked to the site but I find Javascript more natural to code in, ether way I need some sort of solution/example/plugin. Can anyone help!?

Answer 1

I accomplished this by using the following code segments in php and mySQL database : First of all, remember svg is basically stored in text just like HTML is also. And svg tags, all be it different ones, are laid out very similar to HTML tags.

Storing into the database. You must use the following code segment in the actual mySQL Insertcall. I found out if you do this to the variable first and then put the variable in the insert call it will not work. The function must be in the mySQL statement.
mysql_real_escape_string($myValue)

Retrieving Into textbox in value. Assuming your values have been already retrieved from the database and now are in an array Called theValues. Basically I am Removing any backslashes but before hand I'm making sure it can be displayed correctly using htmlentities. Since you are no Backslashes in svg that I know of it fixes it where servers replace quotes with \". If you do encounter some Backslashes in svg you'll just have to be a bit more clever in your replacement function.
$myValue= str_replace("\\", "", htmlentities($theValues->myValue)); echo $myValue;

echoing out on to a page same reasons as above, but the htmlentities function Makes it only display the text of the svg Instead of processing the svg And displaying your picture. this is only required for displaying svg after the text of the Has been stored in a data base but it will not hurt your display If it wasn't the data the first, just A needless function call .
str_replace("\\", "",$myValue)

Answer 2

Saving as SVG

Use XMLSerializer to get a source-XML representation of your SVG, and post that back to your server (using AJAX if you like).

Saving as a PNG

Use XMLSerializer to create a data URI for your SVG, and use that as the source for an <img> element. Draw this image to an HTML5 canvas and then use toDataURL() to convert the contents to a base64-encoded PNG data URI, whichh you can then post to your server and save as a file.

Caveat: The current version of Chrome and semi-recent versions of Firefox (but not the latest) currently "punt" on security and taint the canvas when you draw any SVG, preventing you from getting a data URI.

Note: Both answers above require IE9+; but then, that's true for SVG, too.