title: Submitting an SVG image to a Servlet
body: <p>I'm working on some reports on a Java web application. One of the requirements I have is to be able to export the report data as PDF. The reports are made up of several elements, mostly HTML tables and SVG charts courtesy of Highcharts. </p>
  
  <p>Highcharts has a built-in function that exports their graphics to PDF, but I need a document that contains the other HTML data as well, so there's no other choice but to write my own code. Since the Highcharts graphics are created on the client-side, I need to submit their SVG output to the server in order to be able to include the images on the PDF document.</p>
  
  <p>My first, perhaps naive, approach, was to have a form with a hidden input such as:</p>
  
  <pre><code>&lt;form id="fileExport" method="POST" action="servlet/FileExportServlet"&gt;
      &lt;input type="hidden" id="svgParam" name="svgParam" /&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>And then I would set the hidden input's value to the graphic's svg code like this:</p>
  
  <pre><code>$("div#getPDF").live("click", function()
  {
      //the chart svg data is inside a div with class highcharts-container
      //I copy the svg to the hidden input that I will submit
      $("#svgParam").val($(".highcharts-container").html());
  
      //submit the form with the hidden input
      $("#fileExport").submit();
  });
  </code></pre>
  
  <p>The problem I'm facing, is that apparently the SVG data is too large for the hidden input's value, so when it reaches the server it is truncated. I'm submitting the form in this fashion because I don't wan't to refresh the page in order to have the download start.</p>
  
  <p>I was thinking that perhaps I could encode the SVG element as a Data URI, but I suppose that it wouldn't prevent truncation either, although it would produce a shorter string most of the time.</p>
  
  <p>Does anyone know a way to transfer the SVG data back to the server? (Preferably allowing some other parameters as well) </p>
  
  <p>Thanks</p>