How to save the SVG element to a static file with Dart?

dart, dom, svg

Solution

You can use the `download` attribute on `<a>` elements. This tells the browser to download the resource instead of navigating to it.

You can get the contents of the SVG with `innerHtml`.

Here is an example.

First, the HTML:

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <title>Svgtest</title>
    <link rel="stylesheet" href="svgtest.css">
  </head>
  <body>
    <h1>Svgtest</h1>

    <div id="container">
      <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <circle cx="100" cy="50" r="40" stroke="black"
        stroke-width="2" fill="red"/>
      </svg>
    </div>

    <script type="application/dart" src="svgtest.dart"></script>
    <script src="packages/browser/dart.js"></script>
  </body>
</html>

Next, the Dart code:

import 'dart:html';

void main() {
  Element container = query('#container');
  String contents = container.innerHtml;

  Blob blob = new Blob([contents]);
  AnchorElement downloadLink = new AnchorElement(href: Url.createObjectUrlFromBlob(blob));
  downloadLink.text = 'Download me';
  downloadLink.download = 'svg_contents.svg';

  Element body = query('body');
  body.append(downloadLink);
}

Here is the browser coverage: http://caniuse.com/#feat=download At the time of this writing, Firefox, Chrome, and Opera support the `download` attribute.

(Note: there is no way to directly save a file to the native OS filesystem with HTML5.)

Problem

I have to work with SVG elements using some DOM operation in Dart. After adding and changing some elements under the "svg" tag, I want to export the final SVG elements to a static file. Is there any API can do it? Thanks!

Original source