Aim

    svgToPixels.js is an attempt to provide a cross browser js solution to download dynamically generated SVGs as any of the image related data mime types.

Compatibility

    Chrome, Firefox, IE(>9;svg only), Safari(?, force open base64 serialized svg string)

    Currently tested with Chrome and Firefox. A fallback mechanism exists in IE >10 which displays an alert and subsequently downloads an SVG file instead.

Unfortunately:

canvas.toDataURL(..

method will invoke a security error in IE. However, this seems to be a verified bug in IE<=11 and is already reported to be fixed in edge.

    For Safari, the a.download property and/or attribute does not exit, therefore the output is displayed in a new window.

    For Safari, check that your pop-up blockers are disabled. Safari still requires the png to be generated at the server side, making a round trip. For this reason there is a new force parameter which forces the browser to display the base64 svg string to be opened in a new window. You can then export this to PDF using iBooks in iOS.

Dependencies

    None.

Mechanism

    The script assumes that either a viewBox or a width&height attributes are explicitly set in the parent SVG. If a height does not exist, it is assumed to be the same as width.

Usage

Inclusion

    Include the svgToPixels.js file within the :

...
<script src="./svgToPixels.js"></script>
</head>
...

    Upon inclusion an svgToPixels global variable is exported.

How to use

    For the below examples you can refer to a minimal example generated here.

    Consider a root SVG element (container) and a controller element (div or any other tag that is capable of having an link as a childElement).

    Assume that we want to click on the controller and download a corresponding file in "png" format:

svgToPixels.hook(container,target[,type[,fileName[,once[,filter[,sx[,sy[,dx[,dy[,force]]]]]]]]])

• container = This is your root SVG element. It can either be a node, or an id string as in "myId" or an id string with # as in "#myId".
• target = This is the div/span... tag that will be appended with an invisable a tag that will be removed and url-revoked once download is complete. Like above, it can be a node or an id string.
• type = Specify one of the valid image mime types. Defaults to "image/png".
• file = Specify a file name in valid string. Passing an undefined will result in the file name:

"file."+(type.replace(/^.*\//,""))

where type is the previously provided/default mime type.

• once = Specify whether if you want the click callback to execute only once. Set to false by default.
• filter = Specify a valid css filter. The chosen filter will not be applied on the original SVG. Set to false by default. (Important:If you are an IE, the fallback SVG only method does not allow usage of css filters as the only valid filters in SVGSVGElement are the ones declared in SVG namespace.)
• sx = X axis scale, defaults to 1.
• sy = Y axis scale, defaults to 1.
• dx = Set to 1 by default. If you want to snapshot a larger portion of an SVG (normally not necessary but there might be overflow elements in certain cases) set it to >1. Conversely, if you want a take smaller portion set it to <1. The center of the selected area is always the same with the center of parent SVG. In other words, the snapshot is always aligned middle.
• dy = Similar to dx, but controls y axis portion and centering.
• force = Forces the browser to open base64 string of the svg in new window regardless of whether the png generation was successfull.

    If you want to hook several listeners on different elements at once you can use:

svgToPixels.hook(...).hook(...).hook(...)..

    Although default scales are set to 1, this might result in a low resolution image. I recommend settign sx,sy to >2.

Examples:

svgToPixels.hook("mySVG","myDIV","image/png","someFileName",false,false);

svgToPixels.hook("#mySVG","#myDIV","image/png","someFileName",false,false);

svgToPixels.hook(svgNode,divNode,"image/png","someFileName",false,false);

svgToPixels.hook(svgNode,divNode,"image/png","someFileName",false,false);

svgToPixels.hook(svgNode,divNode,"image/png","someFileName",true,false);

svgToPixels.hook(svgNode,divNode,"image/jpeg","someFileName",true,"grayscale(100%)");

svgToPixels.hook(svgNode,divNode,"image/png","someFileName",false,"invert(100%)");

svgToPixels.hook(svgNode,divNode,"image/png","someFileName",false,false,10,10); //about ~1 mb high resolution image.

svgToPixels.hook(svgNode,divNode,"image/png","someFileName",false,false,10,10,undefined,undefined,true); //the last argument forces the browser to display the base64 svg string in separate window. 

Lisence

    Lisenced under ATTRIBUTION ASSURANCE LICENSE

Support

    For any related questions drop an email at:

• ibrahim.tanyalcin@i-pv.org