https://github.com/brodanoel/svg-2-image

Export from `SGV Html element` to `Image`
https://github.com/brodanoel/svg-2-image

angular angular-nvd3 angular1 angularjs d3 image nvd3 svg

Last synced: about 1 month ago
JSON representation

Export from `SGV Html element` to `Image`

• Host: GitHub
• URL: https://github.com/brodanoel/svg-2-image
• Owner: BrodaNoel
• License: mit
• Created: 2017-07-08T00:36:06.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2017-07-13T03:59:22.000Z (over 7 years ago)
• Last Synced: 2024-04-22T13:05:48.778Z (7 months ago)
• Topics: angular, angular-nvd3, angular1, angularjs, d3, image, nvd3, svg
• Language: JavaScript
• Homepage:
• Size: 29.3 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# SVG-2-IMAGE

`svg-2-image` is a library to create a image from a SVG.

Creating a image from a SVG is harded that you may expect.

The process to create a image from a SVG, basically consist in:

* Translate each SVG element in a XML element

* Serialize from XML to base64 string

* Transform the base64 to a image-base64

* Create a image-URL from the image-base64

* Create a image using the image-url

* Put the image inside a Canvas (because that base64-url-image-xml needs to be interpreted by a `canvas` element, to be renderized as a image)

* Get the canvas binary data

* Download the canvas binary data as a image. And then you have the image download.

But, that's the **EASY** part. The worst part is that a SVG can be styled (like CSS) by tons of ways:

* SVG attributes (like: ``)

* SVG props (like: ``)

* CSS in-line (like: ``)

* CSS rules (you know... the base CSS no-in-line, like `svg.text {color: #000;}>`)

So, it looks easy, but, it's not easy, because when you translate the SVG to XML, you are loosing all CSS that are not inline. All rules like `svg.text {color: #000;}>` will be lost. So, the harder part here is ti inject the CSS rules inside the CSV, and get it interpreted by the Canvas.

This library is covering all those weird use cases that we have, and those that will come.

## How to implement it in AngularJS using a Directive pre-created

Check this another library: https://github.com/BrodaNoel/d3-to-image

## How to implement it in AngularJS creating my own Directive

* In `bower.json`, add: `"svg-2-image": "^1.0.0",`.

* In your `index.html` add ``.

* Add ngSvg2Image as dependency in your App, doing:

```js

angular

  .module('yourAwesomeApp', [

      'ngRoute',

      // ...

      'ngSvg2Image' // <<< Add this!

  ])

```

* Then, for example, add a button that will call a `save` function to use your directive (that it use svg-2-image), doing:

```html

  Export SVG to PNG

```

* To implement it, you can create a Directive that expose a `save` function that will be called when click on the button, like this:

```js

angular.module('[your-module]').directive('myDirective', ['svg2Image',

    function(svg2Image) {

        var link = function($scope, element) {

            $scope.save = function(filename) {

                // let's find the SVG element!

                var svgElement = element.find('svg').first()[0];

                svg2Image({

                    // The SVG element

                    svg: svgElement,

                    // Ask to the library to do changes over the SVG element in

                    // order to make it compatible with all browsers.

                    tryToFix: true,

                    // After create the image, download it using the Blob object

                    callback: function(imageFormats) {

                        // Let's download the image using FileSave library.

                        saveAs(imageFormats.blob, filename);

                        // If you don't want to use `saveAs`, you can do something like:

                        // window.location.href = imageFormats.base64ForSrc

                    }

                });

            };

        };

        return {

            restrict: 'E',

            link: link,

            scope: {

                save: '='

            }

        };

    }]);

```

* Now, wrap your SVG with your new directive, doing:

```hmtl

     

```