Export vector image to pdf and/or svg in a format that can be read by Adobe Illustrator

[kdahlquist]

We want the ability to export the graph image to a file in three formats: jpg, pdf, html. For the html version, it would be something similar to the way GenMAPP does it.

[kdahlquist]

We don't need html export until we actual have features that need html display.

Not an easy way to screenshot just the graph to jpg.

CAN use a print function to print just the graph (whatever is in the bounding box) or print to paper.

Going to create a new issue for printing to enable the last option. #111

[kdahlquist]

As per the reviewer comment on #271 we will

• explore exporting the GRNsight graph to svg (which it is natively anyway)
• to cytoscape format (already have a converter that goes the other direction)
• print to pdf
• and if there are libraries for converting svg to other graphics formats

[kdahlquist]

Reviewer 1 comment (#278):

"As it does not accept a standard input file type, the output of any other network analysis package requires conversion in to the matrix format required here. Similarly, the tool provides no export function (the option in the File menu remained stubbornly greyed out) and so I can’t take a network from GRNsight and utilise it elsewhere. I also can’t use GRNsight to convert the GRNmap format to something I might like to use elsewhere.

The authors refer to future features coming in version 2 (lines 323-329). I encourage them to consider implementing at least one standard filetype for displaying graph data within their tool. Be it sif, graphml or even gml, it would significantly increase the utility of the tool as it currently exists."

We need to look into import/export of adjacency matrix in sif, graphml, or gml format.

[mihirsamdarshi]

#791 should address this, at least for saving the graph in the PNG format

[kdahlquist]

PDF is squeezed. SVG is still missing edges and labels are shifted to left.

[dondi]

Quick beta notes:

• May need to manipulate actual SVG before export in order to handle extra lines; Mihir to test on Adobe in Seaver 120 lab
• Readjust scale approach in PDF export so that the aspect ratio of the graph wins out over the page (also accommodating zoom)

[dondi]

Re: SVG manipulation (to eliminate extraneous elements not needed in the export)

• @mihirsamdarshi adapted a tree traversal routine from the New York Times GitHub repository and it generally looks correct
• However, the SVG tree is being converted into a string prior to invoking tree traversal, thus resulting in an error because strings don't have a hasChildNodes function
• @mihirsamdarshi will correct the issue and report back (also need to make sure that the SVG tree is copied so that we don't destroy the SVG graph that is on display)

[mihirsamdarshi]

I have set inline styles, and the file is exporting with some of the styles. However, a couple of problems are happening:

• The svgElement in GRNsight itself changes, even if I create a copy in the exportSvg function.
• I need to find a way to set the node text position
• I need to find a way to append the marker to the svg. I think it might be as simple as setting the .style to .attr but I am not sure

[kdahlquist]

Quick notes on these bullets:

• Make sure you are doing a deep copy
• Explore the range of options available for SVG text elements (in particular, look at alignment options)
• @mihirsamdarshi has figured out the third bullet (unresolved defs)

[mihirsamdarshi]

I have figured out the marker problem, and am doing a deep copy. However, regarding the invisible stroke of the paths in Illustrator, even changing the stroke attribute in Illustrator does not fix the problem, so I am not sure how to declare the stroke attribute in my code so that displays in Illustrator. Additionally, I have explored a number of methods to make the node text aligned including setting the x and y positions, and while this works, it seems a little hack-y instead of using text-anchor attribute. I am stumped.

[dondi]

There may be lingering issues with Illustrator SVG support, as indicated here:

https://illustrator.uservoice.com/forums/333657-illustrator-feature-requests/suggestions/31209892-fully-support-the-svg-standard

Another alternative is PDF but this also does not seem to be supported.

Third alternative is to export directly as "native" .ai format.

[dondi]

^^^^ Addendum: PDF export to be made vector-based rather than image-based.

[mihirsamdarshi]

after, further work and research, it doesn't seem to be possible to create a layered PDF. However, I am working to add the SVG directly to the PDF, but the jsPDF library keeps throwing errors. I believe that it is an error with them, but I will keep trying.

[kdahlquist]

May be necessary now to look at other libraries. Quick Google search reveals pdfkit,, svg-to-pdfkit, and svgexport, to name the top hits. It might be useful to look for specific mentions of Adobe Illustrator since that is our driving use case.

[kdahlquist]

This came up again in the question/answer period after my talk at BOSC 2020.

[ntran18]

PR #1141 is merged, requesting for review

[kdahlquist]

This main issue can likely be closed, but there is one persistent issue remaining that maybe can get its own issue number. png and PDF export look fine (I'm not sure what the original problem was, actually). When svg export is opened in a browser (Firefox), it looks fine. However, when opening the svg export in Adobe Illustrator, it is messed up. One of the motivations for having svg export would be to open it in Illustrator as a vector graphic that can be further manipulated. The PDF export does not achieve this because the graphic is just rendered as a bitmapped image.

[kdahlquist]

Changed the name of the issue to better reflect the remaining open items. Either we need to export a PDF that has a vector graphic or an svg that can be opened by Adobe Illustrator.