Skip to main content
SimilarExport ZIP
100%

Download SVG

✓ Published0🌍 Public
CCurran Kelleher
Last edited Nov 9, 2016
Created on Sep 7, 2015

This example demonstrates how to trigger a file download of an SVG image directly from a browser using a data URL. The page displays a large download icon, and clicking it invokes a JavaScript function that creates a temporary anchor element with the SVG data URL as its `href` and `download` attribute, then programmatically clicks it to save the file as `test.svg`. The SVG content is embedded as a URI-encoded string, representing a simple smiley-face graphic. The implementation uses plain JavaScript DOM APIs, including `document.createElement` and `setAttribute`, and references Font Awesome’s `fa-download` icon for the visual button.

AI-generated description

This example shows how to download an SVG file from a data URL in JavaScript.

Draws from

<!-- Start of SimpleHitCounter Code --> <div align="center"><a href="http://www.simplehitcounter.com" target="_blank"><img src="http://simplehitcounter.com/hit.php?uid=1949018&f=16777215&b=0" border="0" height="18" width="83" alt="web counter"></a></div> <!-- End of SimpleHitCounter Code -->
mit Licensed

Similar vizzes

Loading thumbnail…

Save SVG as PNG

This example demonstrates a workflow for converting a dynamically generated D3 SVG into a static PNG file, ensuring pixel-perfect consistency between the two. The process first uses the SVG Crowbar bookmarklet to extract the SVG from the browser, then loads that SVG into an HTML page with a Canvas element, drawing it via the Canvas API’s `drawImage` method. Finally, the canvas’s `toDataURL` method exports the rendered image as a PNG, which is automatically downloaded using an anchor element with a `download` attribute.

Mmbostock
70% match
Loading thumbnail…

Smilie Face with SVG

This example demonstrates a minimal SVG-based smiley face rendered inside an HTML page. The code uses plain SVG markup embedded directly in the HTML structure, styled with CSS for centering and large font sizing. While the page includes a placeholder heading and a commented-out JavaScript console log, the primary visualization is the static smiley face, which relies on SVG’s built-in circle and path elements. No external libraries or data sources are used; the drawing is defined entirely within the markup.

Vvishnubpg
69% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates a minimal smiley face constructed from basic SVG elements, including circles for the face, eyes, and a stroke outline in yellow and black. The code shows how raw SVG markup in an HTML file can render static vector graphics without any external libraries. It uses standard SVG APIs for shapes and styling, with the face centered at (480, 250) within a 960×450 viewport. A small console.log statement in the script tag reveals basic JavaScript integration, but the visualization itself relies purely on SVG’s declarative rendering.

EEmnaAbbes
68% match
Loading thumbnail…

HTML Starter

This example shows a simple SVG smiley face composed of geometric shapes, rendered within an HTML page. It includes a lavender background circle for the face, black circles for eyes, a path element for the mouth, and a yellow rectangle strip at the bottom. The code uses raw SVG elements such as `circle`, `path`, and `rect`, along with the `transform` attribute for scaling. Styling is handled through inline CSS, with the body set to center content and a large font size. The visualization demonstrates basic SVG rendering in a static, non-interactive format.

Ssrwezuva
68% match
Loading thumbnail…

Hello HTML

This example shows a simple smiley face drawn with two black eyes and a yellow circle on an SVG canvas, demonstrating how to embed SVG directly in HTML. The page uses inline CSS to center the content and set a large font size, while JavaScript loads React and ReactDOM from a CDN without actually invoking them for rendering. The SVG elements use basic shape properties like `r`, `cx`, `cy`, `fill`, and `stroke` to define the visual output. It serves as a minimal starter template for combining HTML, CSS, and JavaScript with React dependencies.

LLandon-B
68% match
Loading thumbnail…

SVG Icons in JS

This example demonstrates how to embed SVG icons directly in JavaScript code as template strings, avoiding the need for separate image files. It displays three icons from heroicons.com—an arrow path, an external link, and a gear—centered in a flexbox layout. Using D3.js, the code maps over the icon keys and injects the SVG markup into div elements via the `.html()` method, then resizes each icon to 250 pixels wide. The approach highlights a clean, dependency-light way to manage icons in web visualizations.

CCurran Kelleher
68% match
Loading thumbnail…

Hello SVG

A minimal SVG smiley face rendered directly in an HTML document. The page draws a large yellow circle with a black stroke as the face, plus two smaller black-outlined circles for the eyes, using no JavaScript or external libraries. The SVG markup is defined inline with explicit width and height attributes, and the body uses CSS to remove margins and hide overflow. This example demonstrates basic SVG shape elements as a standalone visualization.

PPiotr Szeląg
67% match
Loading thumbnail…

SVG angry face

This example demonstrates how to create a simple angry face using SVG, rendered directly in an HTML page. The visualization uses a minimal setup with a blank body and relies on SVG elements to draw the facial features. It references an embedded YouTube video that explains the step-by-step process. The code employs native SVG APIs to construct the shape, but does not use external libraries or data sources. The face is static, with no interactivity or animation.

JJacob Asper
67% match