How to save automatically a HTML SVG element generated dynamically

Question

I generate a SVG with D3.js and I want to save it without user interaction into my computer like a svg file or an image file. I have tried some things but I haven't found the answer.

Here is my code:



    <!DOCTYPE html>
    <!--
    To change this license header, choose License Headers in Project Properties.
    To change this template file, choose Tools | Templates
    and open the template in the editor.
    -->
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body>
             <svg id="visualisation" width="1000" height="500"></svg>
            <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
            <script>
                var lineData = [{
                    x: 1,
                    y: 5
                  }, {
                    x: 20,
                    y: 20
                  }, {
                    x: 40,
                    y: 10
                  }, {
                    x: 60,
                    y: 40
                  }, {
                    x: 80,
                    y: 5
                  }, {
                    x: 100,
                    y: 60
                  }];
              
            var vis = d3.select("#visualisation"),
                WIDTH = 1000,
                HEIGHT = 500,
                MARGINS = {
                  top: 20,
                  right: 20,
                  bottom: 20,
                  left: 50
                },
                xRange = d3.scale.linear().range([MARGINS.left, WIDTH - MARGINS.right]).domain([d3.min(lineData, function(d) {
                  return d.x;
                }), d3.max(lineData, function(d) {
                  return d.x;
                })]),
                yRange = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([d3.min(lineData, function(d) {
                  return d.y;
                }), d3.max(lineData, function(d) {
                  return d.y;
                })]),
                xAxis = d3.svg.axis()
                  .scale(xRange)
                  .tickSize(5)
                  .tickSubdivide(true),
                yAxis = d3.svg.axis()
                  .scale(yRange)
                  .tickSize(5)
                  .orient("left")
                  .tickSubdivide(true);

            vis.append("svg:g")
              .attr("class", "x axis")
              .attr("transform", "translate(0," + (HEIGHT - MARGINS.bottom) + ")")
              .call(xAxis);

            vis.append("svg:g")
              .attr("class", "y axis")
              .attr("transform", "translate(" + (MARGINS.left) + ",0)")
              .call(yAxis);
      
      var lineFunc = d3.svg.line()
      .x(function(d) {
        return xRange(d.x);
      })
      .y(function(d) {
        return yRange(d.y);
      })
      .interpolate("linear");
      
      vis.append("svg:path")
      .attr("d", lineFunc(lineData))
      .attr("stroke", "blue")
      .attr("stroke-width", 2)
      .attr("fill", "none");
            </script>
        </body>
    </html>

I want this because I want to generate a PDF of the page.

you cant do this from browser because of security. You have to have the user chose a directory — thatOneGuy, May 16 '16 at 16:03
I advise you to do it by hand, as Max said, and not programmatically, because it's complicated and involves server side code. See this tutorial: https://d3export.housegordon.org/ — Gerardo Furtado, May 16 '16 at 22:40

score 3 · Answer 1 · answered May 16 '16 at 16:08

3

If you just want to do this by hand (and not programmatically for many SVGs), you can, on the page the SVG is displaying, right-click on it, select "Inspect Element" in Firefox ("Inspect" in Chrome), then on the "Inspector" tab ("Elements" in Chrome), right click on the <svg> element, and select the option to Copy Outer HTML. Then you can paste the copied text into a text editor and save it as an .svg file. I tried that with your example and it opened in Illustrator with the blue line showing the lineData.

answered May 16 '16 at 16:08

Max Starkenburg

1,499
1
15
21

and how would you do it with programming? – José Miguel May 16 '16 at 16:14
1

Good question. :-) Hopefully somebody else can answer. Meanwhile, perhaps these questions might shed some light? http://stackoverflow.com/questions/16856036/ and http://stackoverflow.com/questions/18720218/ – Max Starkenburg May 16 '16 at 16:24

score 1 · Answer 2 · answered May 16 '16 at 20:16

1

If you want to create a pdf file out of your svg code, import your code into Inkscape, and then export it in .pdf format. Then you'll have a standalone pdf file to use.

answered May 16 '16 at 20:16

T. Bulford

387
5
8

score 1 · Answer 3 · answered Mar 22 '20 at 18:34

1

You can use SaveSVG open source library I created to save SVG created by D3.js with external stylesheets and imported <use> symbols.

answered Mar 22 '20 at 18:34

Coola

2,934
2
19
43

How to save automatically a HTML SVG element generated dynamically

3 Answers3