Take the 2-minute tour ×

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="JavascriptFile.js"></script>


<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!?

share|improve this question

2 Answers 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.

share|improve this answer
thanks for the help! I have heard of Base64-encoded stuff but don't know anything about it. I will try some of what you have suggested but it will tack me some time. Ill get back to you if it helps and mark it up as such :) ... it looks like I will have to do some more reading on Canvas as well :( –  user1130193 Jun 21 '12 at 12:14
thanks you for your help but it looks like the other person im working with found a serializer for Raphael so we are using that. –  user1130193 Jul 6 '12 at 11:08

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.

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)

share|improve this answer

Your Answer


