How to create SVG file without using html

[Jim McGlaughlin]

In my app I create many SVG graphs and charts using d3js.

I want to produce a PDF report that embeds png/jpgs of these charts by using Batik to rasterize the SVGs.

Some graphs/charts have a button to allow the user to save as SVG.

If I want to put the images (png)  of 10 svg charts in a PDF, I don't want the user to see 10 html pages popping up while the report is being produced.  (Assuming the html page would not render until opened by a browser).

Is there a way to create a svg file using javascript and libraries such as d3js.  If I can save a file without using html, then creating the image file using Batik is 'easy'.

[Yongjie Ji]

yes you can use jspdf to convert a image to a png in pdf. 

but the native function provided by jspdf does not work that well with chart produced by d3js. 

[Seemant Kulleen]

Curran had added a button to download the generated SVG on this site: https://github.com/Hypercubed/svgsaver

The tool in use: https://github.com/Hypercubed/svgsaver 

[Johanntoberens, Thorsten, FZ]

You could also use s.th. like this:

 

/**
* Convert svg node to data url
* @param {HTMLElement} node target node
* @returns {string}
* @private
*/
getSvgDataUrl: function getSvgDataUrl(node):string {
if (!node || node.nodeName !== 'svg')
  return '';

const serializer:XMLSerializer = new XMLSerializer()
  , clone = node.cloneNode(!0)
  , xmlns = http://www.w3.org/2000/xmlns/
  , xlinkns = http://www.w3.org/1999/xlink
  , svgns = http://www.w3.org/2000/svg;

clone.setAttributeNS(xmlns, "xmlns", svgns);
clone.setAttributeNS(xmlns, "xmlns:xlink", xlinkns);

return 'data:image/svg+xml;base64,' + b64EncodeUnicode(serializer.serializeToString(clone));
}

 

To produce an SVG image and then simply save this data as a file.

 

Hope that helps

 

 

 

Von: d3...@googlegroups.com <d3...@googlegroups.com> Im Auftrag von Jim McGlaughlin
Gesendet: Donnerstag, 26. Mai 2022 17:19
An: d3-js <d3...@googlegroups.com>
Betreff: How to create SVG file without using html

 

Sie erhalten nicht oft eine E-Mail von jim.mcgla...@gmail.com. Erfahren Sie, warum dies wichtig ist

--
You received this message because you are subscribed to the Google Groups "d3-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+un...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/d3-js/f1fd9201-4ae5-4d8d-9be6-f0d5a5e71438n%40googlegroups.com.

[Jim McGlaughlin]

THANK you ALL for your responses.

Please let me add more explaination.  I produce several charts which are displayed in by web application as html pages.  Most of my charts/graphs have 'Save as SVG' buttons and save the svg as a file. 

I am also creating a PDF real-time report about the status of my application.  I would love to put the svg into the PDF, but if the report has, say, 10 charts I can't do something like generate 10 hidden html pages, automate the save as svg to a file, and then close the page. Then ,........

My program is written in java and I was hoping using native javascript I could use the d3js library to create the svg 'file'.

Thank you again.

[Yongjie Ji]

in this case, you can use create-destroy method to put those charts into the right place of the pdf you want users to download. I have created a simple pdf in which there are several d3js created svgs need to be "saved" into the pdf. Since in my application, the pdf is short and I manually create the pdf from scratch with jspdf. If the pdf file is large, you may need to use jspdf generic functions to convert other html ojbects to pdf.  

For this approach to work, you need to handle the asynchronous nature of javascript to control the order of inserting each element into pdf.