krunkosaurus/simg

JavaScript Class for converting SVG=>PNG and other operations.

simg's Issues

Not working if a <foreignObject> is present?

This SVG string (generated with chartist.js) doesn't get converted:
<svg width="100%" height="100%" id="ct-chart-line" style="width: 100%; height: 100%;" version="1.1" xmlns="http://www.w3.org/2000/svg"><g class="ct-grids"></g><g><g series-name="benchmark" class="ct-series ct-series-a"><path d="M52,62.143L74.333,60.714L96.667,59.286L119,57.857L141.333,56.429L163.667,55L186,53.571L208.333,52.143L230.667,50.714L253,49.286L275.333,47.857L297.667,46.429L320,45" class="ct-line"></path></g><g series-name="performance" class="ct-series ct-series-b"><path d="M52,62.143L74.333,49.286L96.667,105L119,40.714L141.333,45L163.667,30.714L186,26.429L208.333,30.714L230.667,29.286L253,23.571L275.333,29.286L297.667,23.571L320,5" class="ct-line"></path></g></g><g class="ct-labels"><foreignObject style="overflow: visible;" x="42" y="110" width="22.333333333333332" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 22px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/"></span></foreignObject><foreignObject style="overflow: visible;" x="64.33333333333333" y="110" width="22.333333333333332" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 22px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Jan</span></foreignObject><foreignObject style="overflow: visible;" x="86.66666666666666" y="110" width="22.333333333333336" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 22px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Feb</span></foreignObject><foreignObject style="overflow: visible;" x="109" y="110" width="22.33333333333333" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 22px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Mar</span></foreignObject><foreignObject style="overflow: visible;" x="131.33333333333331" y="110" width="22.33333333333333" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 22px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Apr</span></foreignObject><foreignObject style="overflow: visible;" x="153.66666666666666" y="110" width="22.333333333333343" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 22px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">May</span></foreignObject><foreignObject style="overflow: visible;" x="176" y="110" width="22.333333333333314" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 22px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Jun</span></foreignObject><foreignObject style="overflow: visible;" x="198.33333333333331" y="110" width="22.333333333333343" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 22px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Jul</span></foreignObject><foreignObject style="overflow: visible;" x="220.66666666666666" y="110" width="22.333333333333343" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 22px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Aug</span></foreignObject><foreignObject style="overflow: visible;" x="243" y="110" width="22.333333333333314" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 22px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Sep</span></foreignObject><foreignObject style="overflow: visible;" x="265.3333333333333" y="110" width="22.333333333333343" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 22px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Oct</span></foreignObject><foreignObject style="overflow: visible;" x="287.66666666666663" y="110" width="22.333333333333343" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 22px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Nov</span></foreignObject><foreignObject style="overflow: visible;" x="310" y="110" width="30" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 30px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Dec</span></foreignObject></g></svg>

No errors... simply "nothing happens". By removing the <foreignObject> elements it works fine.

Does not work

I've got this Error msg
Uncaught TypeError: Cannot read property 'readJSON' of undefined

`
import Simg from 'simg';
...
<Button id="convertBtn"
onClick={
()=>{
//Here I can see my svg
console.log('SIMG %o', document.getElementById('myChart'));

                            console.log('SIMG %o', Simg(document.getElementById('myChart')));

                            Simg(document.getElementById('myChart'));

                            Simg.replace();

                            Simg.download('awesome');
                        }
                    }`

Problem in toBinaryBlob base64 decode - escaping

In Line:
var byteString = atob(escape(dataUrl));
Changed to:
var byteString = atob(dataUrl);

remove the escaping to prevent error in decoding base64. the last '==' will get escaped to '%3D%3d'

using external fonts

When trying to convert a svg that uses a googlefont (Hind), the resulting img displays text using a fallback font, Arial I think. I have set the font-family style on the root svg element and the svg itself renders fine. Is there a way to convince Simg to use the correct fonts?

<svg width="500" height="600" id="diagram" transform="translate(-.5,-.5)" style="width: 500px; height: 600px; font-family: Hind; font-weight: 500; font-size: 16px; fill: white;" version="1.1" xmlns="http://www.w3.org/2000/svg"><g class="cell" transform="translate(135,46)"><rect rx="4" ry="4" x="2" y="2" width="149" height="81" style="fill: rgb(31, 119, 180);"></rect><text x="20" y="33"><tspan x="20" dy="16px">Stedelijke</tspan><tspan x="20" dy="16px">ontwikkeling</tspan></text><text x="113" y="65">8.8</text></g></svg>

Doesn't convert icons

I tried this in my page but it is not exporting icons I have used like:
var childImage = child.append("image") .attr("x", (childX - iconWidth/2)) .attr("y", (rootShapeY+170+0)) .attr("width", iconWidth) .attr("height", iconHeight) .attr("xlink:href", "file:/C:/Users/vjb/Desktop/InfoSpecifier/childIcon.png") ;

Examples

I like the idea behind this library but I'm a bit stumped on how to use it.

I'd like to help contribute a simple code example using its main features.

I've started to put together this:

http://headwinds.net/lab/simg/examples/simple/simple.html

As you can see, I'm stuck on step 1 - how do I setup up simg and pass in the svg? So that the simg library can consume it and turn it into a golden png?

I thought I would use Adobe's snap library to get the svg - I also tried D3 - not sure if I need to pass in the svg, the node, or something else...

demo not working

TypeError: svg.parentNode is null on firefox 50.0.2

Not working in Firefox or IE

I've got things working for several d3 generated svgs but it only works in Chrome. After some debugging I'm finding that the callbacks are not being fired in IE (11) or Firefox (43.0.4) on Windows. For example, I am calling download which calls toImg and passes in a callback function but that callback function never fires. This is true for all of the callbacks. I have attempted to set breakpoints in dev tools and also added some console.logs in the callbacks that confirmed this.

I will continue to do debug and if I come up with a fix I'll do what I can to implement it. Meantime, any thoughts here?

outerHTML on SVGElement for IE and removing Namespaces

IE can not outerHTML an SVGElement.
Also it add some NS stuff if its extracted via Serializer or in my case Tag clone.

Here is an outerHTML prototype for SVGElement - should only be done in IE:

 if (!(detectIE() === false)) {
    Object.defineProperty(SVGElement.prototype, 'outerHTML', {
      get: function () {
        var $node, $temp;
        $temp = document.createElement('div');
        $node = this.cloneNode(true);
        $temp.appendChild($node);
        var ret = $temp.innerHTML;
        // cleanup for IE
        ret = ret.replace(new RegExp('NS\\d+:xmlns:xml="http://www.w3.org/XML/1998/namespace"', 'gi'), "");
        ret = ret.replace(new RegExp('NS\\d+:xmlns:ns\\d+="http://www.w3.org/XML/1998/namespace"', 'gi'), "");
        ret = ret.replace(new RegExp('xmlns:ns\\d+="http://www.w3.org/XML/1998/namespace"', 'gi'), "");
        ret = ret.replace(new RegExp('xml:', 'gi'), "");
        ret = ret.replace(new RegExp('ns\\d+:', 'gi'), "");
        ret = ret.replace(new RegExp('xmlns:xml="http://www.w3.org/XML/1998/namespace"', 'gi'), "");
        ret = ret.replace(new RegExp('NS\\d+:ns\\d+:', 'gi'), "");
        ret = ret.replace(new RegExp('xmlns:NS\\d+=""', 'gi'), "");
        return ret;
      },
      enumerable: false,
      configurable: true
    });
  }

simg.js:37 Uncaught TypeError: svg.setAttribute is not a function

I have a d3 graph within a svg element and wanted to export it. Just grabbed the svg element and called simg like shown in your example:

function exportToPNG() {
  var simg = new Simg(document.getElementsByTagName("svg"));
  // Replace the current SVG with an image version of it.
  simg.replace();

  // And trigger a download of the rendered image.
  simg.download();
}

simg.js:37 Uncaught TypeError: svg.setAttribute is not a function
    at simg.js:37
    at Array.forEach (<anonymous>)
    at root.Simg.toString (simg.js:36)
    at root.Simg.toSvgImage (simg.js:57)
    at root.Simg.toCanvas (simg.js:44)
    at root.Simg.toImg (simg.js:74)
    at root.Simg.replace (simg.js:90)
    at exportToPNG (itsv.pws.ui.projStruct.js?ver:50)
    at HTMLAnchorElement.onclick (ProjStruct.aspx:1)

Downloaded image not showing svg line gradients

I'm trying to use the library to download my graph (network) visualization as a png image. The nodes are appearing in the image but the links are missing. The links in my case are drawn using paths and each of these paths have a gradient attached to them which goes from the first node's color to the second node's color.

Any idea what could be going wrong?