Skip to main content
SimilarExport ZIP
100%

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.

✓ Published0🌍 Public
CCaged
Last edited Jan 27, 2013
Created on Jan 27, 2013

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.

AI-generated description

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
71% 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
68% match
Loading thumbnail…

Gist 4636174

This example demonstrates a web service that converts an SVG file, passed by URL, into a PNG image. The code first validates the incoming `url` parameter against an HTTP/HTTPS pattern ending in `.svg`, then downloads the file locally. It relies on the `rsvg-convert` command-line tool to perform the rasterization, with ImageMagick’s `convert` as an alternate. The resulting PNG is streamed back to the client with the appropriate `Content-Type` header, and temporary files are cleaned up. The script integrates with the SPIP framework, using its `inc/distant` and `abstract_sql` includes for remote file handling.

PPhilippe Rivière
65% match
Loading thumbnail…

Png to SVG example

This example compares a raster PNG icon with its vector SVG counterpart by displaying both versions side by side. The PNG is embedded as a base64-encoded data URI within an SVG `<image>` element. The SVG path uses the same airplane silhouette, rendered with a red fill and a semi-transparent white outline. The code relies on native SVG elements and attributes to define the shape, with the path data manually specified rather than generated by a JavaScript library.

JJn1532
62% 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…

svgsaver crowbar

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.

HHypercubed
58% 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
58% match
Loading thumbnail…

Implement SVG in HTML

This example demonstrates basic SVG shapes embedded directly in an HTML document without any JavaScript libraries. It shows circles, rectangles, and a line rendered as SVG elements, with some shapes using default black fills while others specify explicit fill colors like red and green. A `<g>` group element applies a shared fill color, stroke color, and stroke width to multiple shapes, and the `transform` attribute translates the group’s position. The page also includes a simple CSS rule that removes the body margin and hides overflow, while an unused `.lines` class suggests styling for potential path elements.

PPragati Porwal
57% match