Giter Club home page Giter Club logo

svg.todataurl's Introduction

SVG.toDataURL()

The missing SVG.toDataURL() for your SVG elements. Supports exporting as SVG+XML and PNG.

See original paper for more information on interfacing between SVG and Canvas.

Instructions

  1. Include canvg if you need PNG support for unsupported browers (see compatibility below).
  2. <script type="text/javascript" src="svg_todataurl.js"></script>
  3. See butterfly_test.html for full example & compability test.
mySVGelement.toDataURL("image/png", {
    callback: function(data) {
        myIMGelement.setAttribute("src", data)
    }
})

API documentation inside svg_todataurl.js.

Compatibility

Test your browser with our butterfly test suite.

Works in all modern browsers. Some browsers require canvg for PNG exporting.

Compatibility as of October 2017. + yes, vv+ yes since version vv, - no support yet.

Browser     E x p o r t i n g  f o r m a t
            SVG+XML  PNG/canvg  PNG/native
IE           9+       9+         edge
Chrome       +        +          33+ ²
Safari       +        +          7.1+ ³
Firefox      +        +          11+ ¹
Opera        +        +          +

¹ Allow SVG-as-an-image to be drawn into a canvas without marking it as write-only
² Implement SVGImage::hasSingleSecurityOrigin() ³ Test Browser Support for SVG to Canvas

Notes

  • SVG <image> elements only work if their src is a dataURL. External images, same domain or not, will not be rendered (but won't cause a security exception either).

Final

Licensed with the permissive MIT license, as follows.

Copyright (c) 2010,2012 Sampu-mon & Mat-san

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

svg.todataurl's People

Contributors

bsick7 avatar matti avatar sampumon avatar sweetleon avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.