Plotly downloadImage won't open in Adobe Illustrator CS5 and CS6

[yniknafs]

I've seen the merges wherein people have indicated that the additional parameter toggling has been enabled for the toImage function. However, when I change format to "svg" and try to download an image, it saves an SVG that can be opened by chrome, but not by other software (namely Illustrator). Any help?

[etpinard]

From https://github.com/plotly/plotly.js/pull/446

---

@yniknafs

Thanks so much for the reply. We have a number of plots (bar, box, pie) on the site we are developing, and the svg --> illustrator wasn't working with any of the plots.

I have attached the plot. The data is coming from a seql db, can't really paste here, but you can see it in the attached plot.

SVG was downloaded using the modebar (changed modebar code to have "format: 'svg';" in /modebar/buttons.js).

Here is the code to call the plot.

var expression_layout = {
    title: 'TPM vs. Transcripts',
    xaxis: {
        title: 'Transcripts',
        showgrid: false,
        zeroline: false
    },
    yaxis: {
        title: 'TPM',
        showline: false
    },
    boxmode: 'group'
};

function redraw_expression_plot(json_response) {
    var data = [];
    for (var key in json_response) {
        var trace = {
            y: json_response[key][1],
            x: json_response[key][0],
            type: 'box',
            name: key
        }
        data.push(trace);
    }
    expression_layout.yaxis.title = "TPM";
    Plotly.newPlot('expression_plot', data, expression_layout);
    highlight_linear();
    highlight_box();
}

newplot.svg.zip

---

@mdtusz

using Adobe Illustrator CC, I'm able to open the svg and it looks ok to me. I don't have Acrobat installed however so I can't verify that either.

The main issue we encountered from before was with respect to opacities and quotation marks, but looking through the SVG neither of those issues seem to be present. What sort of warnings does Illustrator spit out at you when you attempt to open it?

---

@yniknafs

thanks for that. quite interesting. I just download Adobe Illustrator CC and it worked.

I have Adobe CS6 installed. And it did not work (see images). Any chance you know why its not working with the CS version? Will be a little limiting to force users to have CC (I'm sure lots of people using our tool will have some illustrator CS5/6 installed).

[mdtusz]

Notable issues with SVG/Adobe compatibility we have come across in the past:

• Opacity. Illustrator seems to not like any rgba colours, so fill-opacity and stroke-opacity need to be used.
• Fonts. Escaping quotation marks on strings is finicky and needs to be of the <div style="font-family: 'Some Font', arial;"> variety, however browsers (or at least Chrome) coerces the wrapping font quotation marks to be " rather than ' no matter what. To get around this, we need to convert the dom to a string, then replace the font-wrapping doubles with single quotes.
• Nested <svg> tags. It's no bueno.

Our exported svg files seem to all (as far as I've seen) pass svg validators and follow the spec, so in my mind, this is an Illustrator issue. Unfortunately, that means that we're just going to have to continue debugging these weird cases as they come up. I've found the easiest way to debug in illustrator is to manually edit the svg file, removing elements until you can open the file successfully. It's arduous, but seems to be the only way (unless there's some hidden dev-console or log output for illustrator that I'm unaware of).

[etpinard]

Closed due to lack of activity.