Gist 4636174

100%

✓ Published0🌍 Public

Last edited Jan 25, 2013

Created on Jan 25, 2013

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.

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

66% 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

65% 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

64% 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…

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

60% match

Loading thumbnail…

Rasterized SVG

This example demonstrates a custom rasterization function that converts SVG shapes into a grid of colored pixels on a canvas, aiming to enable mesh generation for 3D printing. A D3.js slider controls pixel size, and the code samples path outlines using `getPointAtLength` and `getTotalLength` to test point-in-polygon membership. The rendering shows a D3 logo alongside an orange circle, with each grid cell filled based on the SVG fill color, and includes animated pixel-fill effects on a canvas overlay.

FFrissAnalytics

56% match

Loading thumbnail…

Gist bcaa860506520cefb711aa4a9f885c12

This example assembles a large sprite sheet of data visualization badges, arranging hundreds of PNG icons into a single 8192-pixel square grid. It shows the process of converting individual SVG badge files into a unified texture atlas for efficient loading in a projector tool. The script uses Python’s Pillow library (`Image.open`, `resize`, `paste`) to read, scale, and tile each icon, while calculating the grid dimensions with `math.sqrt`. It sorts the source files from a local SVG directory, converts them to PNGs, and saves the final composite to `sprite_image.png`.

11wheel

56% match

Loading thumbnail…

SVG patterns

This example displays a single raster image inside an SVG container, with the image loaded from an external URL and sized to a large fixed width and height. The page relies on basic HTML, CSS, and JavaScript to structure the visualization, though no interactive behavior or data-driven logic is present. The SVG element provides a standard vector-based rendering context, while the included <img> tag embeds the PNG graphic directly. The code uses no external visualization libraries, instead demonstrating a minimal setup for placing an image within an SVG canvas.

Ddumbdataguy@gmail.com

56% match