Export inline svg-object (IE issue)

Question

Core issue:

I'm trying to grab an SVG-Inline-Object with JavaScript and send it to the Server where the output represents the given SVG-Object.

All works fine in Chrome & FF but IE (>= 9) cuts the given string of the SVG-Object anywhere, so the string sent to the server is not complete that ends up in an error.

My current process:

html

<html>
<head></head>
    <body>
        <div>
            <svg>(expect a correctly generated svg-object here - works fine)</svg>
            <a href='#export'>export</a>
            <!-- click on this link triggers the javascript-function !-->
        </div>
    </body>
</html>

javascript (triggered by click on the "export"-Link)

var $svg = $(this).parent().find("svg"); // works fine
var s = new XMLSerializer();
var svgContent = s.serializeToString($svg[0]);
$.post("/Results/saveSVG/", // saveSVG => store SVG-Data in Session
    { "svg" : svgContent }).done(function(data) {
    window.open("/Results/getSVG/svg.php");
});

/Results/saveSVG/ (a PHP-File)

$_SESSION["svg"] = $_POST["svg"]; // similar to something like this (works fine)

svg.php (works like a charm in Chrome / FF

header("Content-type: image/svg+xml");
echo $_SESSION["svg"];
exit;

What happens in Chrome / FF?

svgContent-variable: <svg>...</svg>
svgContent-variable received by the server (/Results/saveSVG/)
output on /Results/getSVG/svg.php is a perfect SVG-File

What happens in IE?

svgContent-variable is cropped somewhere: <svg>..
invalid svgContent-variable received by the server (/Results/saveSVG/)
output on /Results/getSVG/svg.php does not render

Debug-Information in IE

svgContent-variable: (Javascript)

Same variable fully stored in the Session
Output with SVG is cut:

Conclusion

the above concept works fine in chrome and ff but fails on all tested IE-Versions (9 / 10 / 11)

I've also tried to add the values into a hidden textarea and send the form to svg.php (Same effect / Chrome and FF - okay / IE fails).

Is there anything I have to adjust in the $.post-Request or is there any other concept to export an inline-SVG-Object?

the solution (thanks to timclutton - answer)

The problem caused due to a double-defined xmlns-attributes in the opening tag. Because I have no ifluence in the method where the svg-object was created, a simple str_replace did the job:

svg.php

<?
session_start();
header("Content-type: image/svg+xml");
echo str_replace("xmlns=\"http://www.w3.org/2000/svg\" xmlns:NS1=\"\" NS1:xmlns:xlink=\"http://www.w3.org/1999/xlink\"","",$_SESSION["svg"]);
?>

You need to be more clear as to what the issue is - what do you mean by "cuts the string anywhere"? What do you mean by the code "failing"? We can't help debug an unclear problem. — Sam Hanley, Jul 11 '14 at 13:13
Thanks, @godesign. Once the details are a bit more fleshed out I'll try to help figure it out! — Sam Hanley, Jul 11 '14 at 13:18
@Filo Thanks for your quick feedbacks, I've tried to copy some original data where the problem occurs. (Most of them are pretty sensitive data, so I had to find some where publicity doesn't matter) — wildhaber, Jul 11 '14 at 14:18
@fyrye You're right. The SVG files are representing charts and updates when the dataset is changing. We're using the chart library from DevExpress in combination of knockout.js — wildhaber, Jul 11 '14 at 15:50
@godesign I assumed as such, I was going to suggest using the DOMDocument to validate and standardize the imported data, but seeing as how the svg is dynamic it would probably cause more harm than good. Here's an example of someone using it http://stackoverflow.com/questions/2857113/how-to-change-the-attribute-value-of-svg-file it may help you in the future for the same or similar projects when manipulating the exported data. — Will B., Jul 11 '14 at 17:29

timclutton · Accepted Answer · 2014-07-11T14:59:19.823

I've built the following from the code you posted (with minor alterations) and this works for me in IE11 and FF30 on Win8.1 x64. Perhaps try putting these two files in a folder (with jQuery, or change the src to a CDN) and see if it works for you.

File svg.php:

<?php
session_start();

if ($_POST) {
    $_SESSION['svg'] = $_POST['svg'];
    exit;
}

?>

<html>
    <head>
        <title>blah</title>
        <script type="text/javascript" src="jquery-1.11.1.min.js"></script>
        <script type="text/javascript">
            function svg(e) {
                var $svg = $(e).parent().find("svg"); // works fine
                var s = new XMLSerializer();
                var svgContent = s.serializeToString($svg[0]);
                $.post("svg.php", // saveSVG => store SVG-Data in Session
                    { "svg" : svgContent }).done(function(data) {
                    window.open("svg2.php");
                });
            }
        </script>
    </head>
    <body>
        <div>
            <svg>
                <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
            </svg>
            <a href='#export' onclick="svg(this)">export</a>
            <!-- click on this link triggers the javascript-function !-->
        </div>
    </body>
</html>

File svg2.php:

<?php
session_start();
header("Content-type: image/svg+xml");
echo $_SESSION["svg"];
exit;
?>

Update for actual SVG content

The problem seems to be with the opening tag. Changing it from...

<svg xmlns="http://www.w3.org/2000/svg" width="263" height="300" xmlns="http://www.w3.org/2000/svg" xmlns:NS1="" NS1:xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">

...to...

<svg xmlns="http://www.w3.org/2000/svg" width="263" height="300" version="1.1">

...makes it work with the code I posted above.

Update 2

Running your SVG code through the W3C Validator shows the errors. Using the modified opening tag I posted above validates successfully.

In conclusion, the problem is down to invalid XML.

This is almost exactly the way I'm doing it. I've copied a not-sensitive example of the SVG file in my question, where the problem occurs. — wildhaber, Jul 11 '14 at 14:21
yes! you got it. Many thanks for the validation-hint. I even it's not very pretty, but I simply replace the invalid part in the opening svg-tag before echo the `$_SESSION['svg']`. This works fine now. You're effort really deserves the bounty (in 20 hours) — wildhaber, Jul 11 '14 at 16:05
Great, glad I could help. The fix looks ugly, but if you don't control the SVG code generation then at least you found a working solution! — timclutton, Jul 11 '14 at 16:34

score 0 · Answer 2 · edited May 23 '17 at 11:50

0

Maybe it's not relevant, but have you tried this?

header("Content-type: image/svg+xml");

echo '<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">' .$_SESSION["svg"];

(extracted from https://stackoverflow.com/a/1623265/3625883)

edited May 23 '17 at 11:50

Community

1
1

answered Jul 11 '14 at 14:59

Filo

2,829
1
21
36