svgsaver crowbar

100%

svgsaver crowbar

✓ Published0🌍 Public

Last edited Nov 12, 2015

Created on Nov 12, 2015

svgsaver Crowbar is a bookmarklet that extracts inline SVG images and their associated styles from an HTML page, converting them into downloadable SVG or PNG files. It traverses the document to collect SVG elements, applies a whitelist of CSS properties and attributes to ensure fidelity, and generates a clean SVG file. The tool also supports saving as PNG via canvas rendering. The example demonstrates how a lightweight bookmarklet can programmatically serialize and export vector graphics embedded in web pages, preserving visual styling while offering format flexibility.

AI-generated description

A bookmarklet that extracts SVG images and accompanying styles from an HTML document and downloads them as an SVG or PNG file.

The Bookmarklet

<a class="bookmarklet" href="javascript: (function () { var e = document.createElement('script'); e.setAttribute('src', 'https://cdn.rawgit.com/Hypercubed/3d59b6fbc3312f4d82a7/raw/af0e50acc3df834524f1bce8cd57d723899de647/browser.min.js'); e.setAttribute('class', 'svg-crowbar'); document.body.appendChild(e); })();">svgsaver Crowbar</a> <span>← Drag this to your bookmarks bar.</span>

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

74% match

Loading thumbnail…

myByways SVG to PNG Converter

This example is a tool for converting SVG images into PNG files directly in the browser. It demonstrates a workflow where a user pastes SVG markup, loads it into the DOM, and sets a custom width and height. The converter then serializes the SVG with `XMLSerializer`, creates a Blob URL, and draws the result onto a Canvas using `drawImage`. Finally, it exports the canvas as a PNG via `toDataURL` and triggers a file download, relying on standard browser APIs for image processing.

Hhanulik.ondrej@gmail.com

60% match

Loading thumbnail…

SVG Demo

This example demonstrates basic Scalable Vector Graphics (SVG) shapes, including circles, rectangles, lines, and paths, rendered directly in an HTML page. The visualization uses inline SVG elements within an `index.html` file, with styling applied via an external `styles.css` stylesheet. The SVG canvas is scaled and translated using SVG transform attributes, while CSS classes like `.lines` and `.c3` control stroke colors, widths, and fill properties for grouped elements. The code highlights how SVG’s native coordinate system and CSS cascading rules combine to define a static, vector-based graphic.

GGabrz

59% match

Loading thumbnail…

Download SVG

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.

CCurran Kelleher

59% match

Loading thumbnail…

SVG Basics

This example shows a minimal HTML page titled “SVG Basics” that renders a single caret-up icon inside the body. It uses Bootstrap 5.2.3 CSS and JavaScript bundles, loaded from a CDN, to provide styling and interactive components, though no custom SVG or CSS is defined in the empty style tag. The body contains only an `<i>` element with the `bi bi-caret-up` class, which displays the Bootstrap icon. The code demonstrates the basic structure for incorporating Bootstrap’s icon system and bundled scripts into a simple webpage.

JJake B

58% match

Loading thumbnail…

Convert SVG's to PNGs. This works OK if the SVG's styles are inline. The SVG element must contain an xmlns attribute. Webkit also requires you specify a font size on `text` elements.

This example shows a client-side workflow for converting an inline SVG graphic into a PNG image. It first serializes the SVG element—which must carry an `xmlns` attribute—into an XML string using `XMLSerializer`, then encodes that string as a base64 data URI. The code then creates a new `Image` object and assigns the data URI to its `src` attribute before appending the image to the document body. The approach relies on the browser’s native `btoa` function and works only if the SVG’s styles are inline, and WebKit browsers additionally require an explicit `font-size` on text elements.

CCaged

58% match

Loading thumbnail…

Fork of HTML Starter

This example compares the SVG and Canvas rendering models through a static webpage that combines a bulleted informational list with a live SVG drawing. The visualization demonstrates fundamental SVG properties—such as the default 300×150 canvas size, the use of the `fill` attribute, and the inability to set `fill` directly on the `<svg>` tag—by rendering three circles. The code uses raw SVG elements (`<circle>`) to illustrate the effects of explicit fill colors, no fill with a green stroke, and default black fills. The page also presents a detailed comparison table outlining differences in resolution dependence, event handler support, text rendering, and suitability for complex applications versus games.

JJyoti

57% match

Loading thumbnail…

SVG FILE TESTER

This example demonstrates how an SVG file can be loaded and embedded into an HTML page. It uses D3’s `xml()` function to fetch an external SVG file, retrieves the document element, and adjusts its `viewBox` and dimensions to fit a specified height while preserving the aspect ratio. The modified SVG is then appended to the page body. The visualization also includes a static red cross-hatch pattern from the source file, rendered using standard SVG elements.

Aadventuresenglish.info@gmail.com

56% match