diff --git a/tensorboard/plugins/scalar/tf_scalar_dashboard/tf-scalar-card.html b/tensorboard/plugins/scalar/tf_scalar_dashboard/tf-scalar-card.html
index 1605974b43..7e08bdf21c 100644
--- a/tensorboard/plugins/scalar/tf_scalar_dashboard/tf-scalar-card.html
+++ b/tensorboard/plugins/scalar/tf_scalar_dashboard/tf-scalar-card.html
@@ -80,7 +80,9 @@
       title="Fit domain to data"
     ></paper-icon-button>
     <template is="dom-if" if="[[showDownloadLinks]]">
-      <paper-menu-button on-paper-dropdown-open="_updateDownloadLink">
+      <paper-menu-button
+          on-paper-dropdown-open="_updateDownloadLink"
+          on-paper-dropdown-close="_removeDownloadLink">
         <paper-icon-button
           class="dropdown-trigger"
           slot="dropdown-trigger"
@@ -314,11 +316,13 @@
       },
       _updateDownloadLink() {
         const svgStr = this.$$('tf-line-chart-data-loader').exportAsSvgString();
-        // The SVG code string may include hash characters, such as an
-        // attribute `clipPath="url(#foo)"`. Thus, we base64-encode the
-        // data so that such a hash is not interpreted as a fragment
-        // specifier, truncating the SVG. (See issue #1874.)
-        this.$$('#svgLink').href = `data:image/svg+xml;base64,${btoa(svgStr)}`;
+        const bytes = new TextEncoder().encode(svgStr);
+        const blob = new Blob([bytes], {type: 'image/svg+xml'});
+        this.$$('#svgLink').setAttribute('href', URL.createObjectURL(blob));
+      },
+      _removeDownloadLink() {
+        URL.revokeObjectURL(this.$$('#svgLink').href);
+        this.$$('#svgLink').removeAttribute('href');
       },
       _runsFromData(data) {
         return data.map((datum) => datum.run);