0

I have a page displaying a d3 graph. This page also supports PDF exporting, and I am using the pdfkit library with the SVG-to-PDFKit extension. The issue I am having is that the graph on the page is very large to fill the width of the page, but this makes it too large when generating it to PDF. I have spent a lot of time researching how to resize the SVG's content (not just the view the SVG resides in) and there doesn't seem to be an already created function in the SVG-to-PDFKit library.

I found an answer that makes sense, but only occasionally works whenever chrome tools is up: How can I resize an SVG?

If there is a better solution, I would love to know. My main issue is that the graph has to be resized after it is generated on the page, so that it doesn't skew the graph on the page, but only alters the graph on the PDF.

The code I have that occasionally works is:

var chartSVG = document.getElementById('chartSVG');
chartSVG.setAttribute("style", "viewBox: 0 0 32 32;");
SVGtoPDF(doc, chartSVG, 20, 170);

Is there possibly another attribute out there that would be better for the scenario? And does the line of code look like it's written correctly? I don't understand why it will only work when Chrome tools are up. Thanks in advance.

user3376654
  • 67
  • 1
  • 9

1 Answers1

0

You definitely can resize SVG with setAttribute as well as with style property or via css:

var red = document.getElementById('red');
red.setAttribute('height', '50');

var green =  document.getElementById('green');
green.style.width = '100px';
#blue {width:60px}
<svg id="red" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="49" fill="red"/></svg>

<svg id="green" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="49" fill="green"/></svg>

<svg id="blue" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="49" fill="blue"/></svg>
Kosh
  • 16,966
  • 2
  • 19
  • 34