rune.save.js
rune.save.js + svg.save.js
Export any SVG Element and save them as image (JPG, PNG, SVG and WebP). It works as standalone script and as Rune.js Plugin.
Installation
npm i rune.save.js
It's also available on unpkg :
- Rune.js Plugin : https://unpkg.com/rune.save.js/dist/rune.save.js
- Standalone Script : https://unpkg.com/rune.save.js/dist/svg.save.js
Usage
Include the .js file on your HTML document
<!-- Include the Rune.js Plugin using the path to your downloaded file or the unpkg CDN url --> <!-- Or the Standalone Script from your file system or unpkg -->
Call the save()
method passing the filename as parameter. ( i.e: 'sketch.png' to be saved as PNG. )
// As Rune.js Pluginconst r = container: "body" width: 600 height: 600;// ...// Use the extension of the desired filetype: svg, jpg, png (webp also on Chrome)r; // --- // As standalone script, create a new exportable SVG Object (xSVG)// passing the CSS selector string for the target SVG element as parameter.// Then call the save method.let drawing = '#svgSketch'; drawing;
Options
// The save method has three optional parameters : filename, scale & quality// Example : let sketch = '#svgSketch'; sketch; // Image exported as PNG with filename 'sketch.png'// with output file dimensions 3 times the SVG source size// and a 0.5 over 1 image quality. (Options explained below)
API
save(file, scale, quality)
— file
String
indicating the filename including the extension that will be used as the image format (i.e: 'myImage.png').
Allowed image extensions are: svg, png, jpg, jpeg and webp (WebP only works on Chrome).
The default value is: 'image.jpg'
— scale
Number
that indicates the multiplier used to create the raster image image size dimensions output. In the case that we have a 400x400
SVG file, and a scale multiplier of 3
, the output raster image will have a 1200x1200
size (x3).
The default value is 2
— quality
Number
between 0 and 1 indicating the image quality to use for image formats that use lossy compression such as image/jpeg
and image/webp
.
The default value is 0.92
License
MIT © Jorge Moreno