CODEWITHSUNDEEP
domsvgdart
user2407014
user2407014

Reputation: 255

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

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!

Upvotes: 3

Views: 795

Answers (2)

Valerii
Valerii

Reputation: 11

For IE 10+: 

import 'dart:html';
import 'dart:js';
import "package:js/js.dart";

@JS("navigator.msSaveBlob")
external void msSaveBlob(blob, filename);    

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

  Blob blob = new Blob([contents]);
  if (js.context['navigator']['msSaveBlob'] != null) {
      msSaveBlob(blob, 'svg_contents.svg');
  } else { 
      AnchorElement downloadLink = new AnchorElement(href: Url.createObjectUrlFromBlob(blob));
      downloadLink.text = 'Download me';
      downloadLink.download = 'svg_contents.svg';
      Element body = query('body');
      body.append(downloadLink);
  }
}

Upvotes: 1

Seth Ladd
Seth Ladd

Reputation: 120529

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.)

Upvotes: 7

Related Questions