Rasterize a dynamically generated SVG

Question

I'm trying to convert an SVG graph I generated into a printable image. From my research, I assumed I'd have to somehow make a canvas out of the SVG, then make an image out of that. However, every example I've found uses an image tag inside the svg, or it's some static file that doesn't change. Here's one of the generated graphs I'm trying to print out.

<svg width="603" height="250">
  <g>
    <path d="M0,250Q9.380000000000003,235.10638297872342,20.1,234.04255319148936C36.18,232.4468085106383,134.67000000000002,257.4468085106383,160.8,234.04255319148936S267.33,7.978723404255318,281.4,0S297.48,131.38297872340425,301.5,154.25531914893617S307.53000000000003,221.80851063829786,321.6,228.72340425531914S428.13000000000005,227.12765957446808,442.20000000000005,223.40425531914894S450.24,190.95744680851064,462.3,191.48936170212767S550.74,223.40425531914892,562.8,228.72340425531914S578.88,242.5531914893617,582.9,244.68085106382978Q585.5799999999999,246.09929078014184,603,250L603,250Q585.5799999999999,250,582.9,250C578.88,250,574.8599999999999,250,562.8,250S474.36,250,462.3,250S456.27000000000004,250,442.20000000000005,250S335.67,250,321.6,250S305.52,250,301.5,250S295.46999999999997,250,281.4,250S186.93,250,160.8,250S36.18,250,20.1,250Q9.380000000000003,250,0,250Z" class="area" fill="rgba(55,173,223,0.25)"></path>
  </g>

  <g class="y_grid">
    <g style="opacity: 1;" transform="translate(0,250)">
      <line class="tick" x2="603" y2="0"></line>
      <text x="-3" y="0" dy=".32em" text-anchor="end">0</text>
    </g>
    <g style="opacity: 1;" transform="translate(0,143.61702127659575)">
      <line class="tick" x2="603" y2="0"></line>
      <text x="-3" y="0" dy=".32em" text-anchor="end">20</text>
    </g>
    <g style="opacity: 1;" transform="translate(0,37.2340425531915)">
      <line class="tick" x2="603" y2="0"></line>
      <text x="-3" y="0" dy=".32em" text-anchor="end">40</text>
    </g>
    <path class="domain" d="M603,0H0V250H603"></path>
  </g>

  <g class="x_grid_d3">
    <g style="opacity: 1;" transform="translate(0.37222222222222223,0)">
      <line class="tick" x2="0" y2="250"></line>
      <text x="0" y="253" dy=".71em" text-anchor="middle">Apr 15</text>
    </g>
    <g style="opacity: 1;" transform="translate(116.69166666666668,0)">
      <line class="tick" x2="0" y2="250"></line>
      <text x="0" y="253" dy=".71em" text-anchor="middle">Apr 20</text>
    </g>
    <g style="opacity: 1;" transform="translate(233.0111111111111,0)">
      <line class="tick" x2="0" y2="250"></line>
      <text x="0" y="253" dy=".71em" text-anchor="middle">Apr 26</text>
    </g>
    <g style="opacity: 1;" transform="translate(349.3305555555556,0)">
      <line class="tick" x2="0" y2="250"></line>
      <text x="0" y="253" dy=".71em" text-anchor="middle">May 02</text>
    </g>
    <g style="opacity: 1;" transform="translate(465.65000000000003,0)">
      <line class="tick" x2="0" y2="250"></line>
      <text x="0" y="253" dy=".71em" text-anchor="middle">May 08</text>
    </g>
    <g style="opacity: 1;" transform="translate(581.9694444444444,0)">
      <line class="tick" x2="0" y2="250"></line>
      <text x="0" y="253" dy=".71em" text-anchor="middle">May 13</text>
    </g>
    <path class="domain" d="M0,250V0H603V250"></path>
  </g>
</svg>

Is it possible to get this thing printed somehow? Also, I need to do this all client side, no help from the server if possible.

Also, I've tried using canvg, but all I get is a black box. Here's that bit of code:

svg = $('.full-graph').html()
canvg 'canvas', svg, renderCallback: ->
  image = document.getElementById('canvas').toDataURL 'image/png'
  window.open image

you can look at this other question. You could find what you are looking for. http://stackoverflow.com/questions/3768565/drawing-a-svg-file-on-a-html5-canvas — Stefano Ortisi, May 15 '13 at 18:56
Already tried using canvg. All I get is a big black box. I'll put that bit of code above. — Zachary Nicoll, May 15 '13 at 19:10
That svg is a big black box. Try removing all but the first G block to see something. — drawnonward, May 15 '13 at 19:33
I removed all but the first g tag, and everything else just worked. Any idea why the others aren't coming through? — Zachary Nicoll, May 15 '13 at 21:27
If i remove all the path elements, a blue graph is displayed. You might want to look into the path elements to identify the issue. — Adarsh, May 15 '13 at 21:47

score 2 · Answer 1 · answered May 15 '13 at 19:14

2

You can use Apache batik to conver the svg into a jpg/png.

answered May 15 '13 at 19:14

Adarsh

3,613
2
21
37

3

Need to do this client side, guys. No server. – Zachary Nicoll May 15 '13 at 21:17

drawnonward · Accepted Answer · 2013-05-15T19:24:46.323

1

Depending on the browser (http://caniuse.com/#feat=svg) you can load an svg in a separate window/tab or use it as the src of an img tag. In either case the browser should print it like any other image.

Be sure to include the version and other required attributes in the svg tag.

<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
    xlink="http://www.w3.org/1999/xlink"
    x="0px" y="0px" width="640px" height="640px">

If you are generating the svg on the client, you can try encoding it as a data url (http://caniuse.com/#feat=datauri) and using the data url as the img src or anchor href.

edited May 15 '13 at 19:24

answered May 15 '13 at 19:18

drawnonward

53,459
16
107
112

This assumes I've got some image that can be encoded as a data uri. Does this work with ever changing svg information? And yes, I'm generating the svg on the client. – Zachary Nicoll May 15 '13 at 21:16
Every time you change the svg, you would have to encode it and assign it to an img src again. Since you are printing, I assume you are not doing an animated svg. Using canvg or another library is probably better, but this will work in a pinch. – drawnonward May 16 '13 at 00:00

Rasterize a dynamically generated SVG

2 Answers2