example of how to export a png directly from an svg

This little gist is used to demonstrate how svg-crowbar can be refactored for use beyond a bookmarklet. Click on the download png button to download a PNG image that is styled from stylesheets rather than attributes on the SVG elements themselves.

<style>
      circle {fill: red; stroke: blue; stroke-width: 3px;}
      #crowbar-workspace {display: none;}
    </style>
  </head>
  <body>

<svg id="export-me" width="100" height="100">
      <circle r="10" cx="50" cy="50"></circle>
    </svg>
    <button>download png</button>

<div id="crowbar-workspace">
    </div>

// this is a shitty hack that should probably be embedded in the
          // svg_crowbar function
          var svg_el = d3.select("svg")
              .attr("version", 1.1)
              .attr("xmlns", "https://www.w3.org/2000/svg")
              .node();

// this is the main thing that does the work
          svg_crowbar(d3.select("#export-me").node(), {
              filename: "export-me.png",
              width: 100,
              height: 100,
              crowbar_el: d3.select("#crowbar-workspace").node(),
          })
        }
    </script>
  </body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.10/d3.min.js