svg-to-image - convert SVG text to a Image that can be drawn in canvas

  •        547

Converts a string of SVG into an HTMLImageElement using Blob and URL.createObjectURL. Falls back to encodeURIComponent for unsupported browsers, such as Safari 8.0.A common use case for this is rendering SVG to a 2D or WebGL canvas.

https://github.com/Jam3/svg-to-image

Dependencies:

load-img : ^1.0.0

Tags
Implementation
License
Platform

   




Related Projects

dom-to-image - Generates an image from a DOM node using HTML5 canvas

  •    Javascript

dom-to-image is a library which can turn arbitrary DOM node into a vector (SVG) or raster (PNG or JPEG) image, written in JavaScript. It's based on domvas by Paul Bakaus and has been completely rewritten, with some bugs fixed and some new features (like web font and image support) added. Include either src/dom-to-image.js or dist/dom-to-image.min.js in your page and it will make the domtoimage variable available in the global scope.

canvas - Cairo in Go: vector to raster, SVG, PDF, EPS, WASM, OpenGL, Gio, etc.

  •    Go

Canvas is a common vector drawing target that can output SVG, PDF, EPS, raster images (PNG, JPG, GIF, ...), HTML Canvas through WASM, OpenGL, and Gio. It has a wide range of path manipulation functionality such as flattening, stroking and dashing implemented. Additionally, it has a text formatter and embeds and subsets fonts (TTF, OTF, WOFF, WOFF2, or EOT) or converts them to outlines. It can be considered a Cairo or node-canvas alternative in Go. See the example below in Figure 1 for an overview of the functionality. Figure 1: top-left you can see text being fitted into a box, justified using Donald Knuth's linea breaking algorithm to stretch the spaces between words to fill the whole width. You can observe a variety of styles and text decorations applied, as well as support for LTR/RTL mixing and complex scripts. In the bottom-right the word "stroke" is being stroked and drawn as a path. Top-right we see a LaTeX formula that has been converted to a path. Left of that we see an ellipse showcasing precise dashing, notably the length of e.g. the short dash is equal wherever it is on the curve. Note that the dashes themselves are elliptical arcs as well (thus exactly precise even if magnified greatly). To the right we see a closed polygon of four points being smoothed by cubic Béziers that are smooth along the whole path, and the blue line on the left shows a smoothed open path. On the bottom you can see a rotated rasterized image. The result is equivalent for all renderers (PNG, PDF, SVG, etc.).

ImageMagick

  •    C++

ImageMagick is a software suite to create, edit, and compose bitmap images. It can read, convert and write images in a variety of formats (over 100) including DPX, EXR, GIF, JPEG, JPEG-2000, PDF, PhotoCD, PNG, Postscript, SVG, and TIFF. Use ImageMagick to translate, flip, mirror, rotate, scale, shear and transform images, adjust image colors, apply various special effects, or draw text, lines, polygons, ellipses and Bézier curves.

php-svg-lib - SVG file parsing / rendering library

  •    PHP

The main purpose of this lib is to rasterize SVG to a surface which can be an image or a PDF for example, through a \Svg\Surface PHP interface. This project was initialized by the need to render SVG documents inside PDF files for the DomPdf project.

svgexport - SVG to PNG/JPEG command-line tool and Node.js module

  •    Javascript

svgexport is a Node.js module and command-line tool for exporting SVG files to PNG and JPEG, it uses PhantomJS for rendering SVG files. datafile can be an object, an array of objects or a JSON file path, see command line usage for its format.


SVGMagic - Fallback for SVG images that automatically creates PNG images on-the-run

  •    JQuery

Fallback for SVG images that automatically creates PNG images on-the-run

open-iconic - An open source icon set with 223 marks in SVG, webfont and raster formats

  •    CSS

We like SVGs and we think they're the way to display icons on the web. Since Open Iconic are just basic SVGs, we suggest you display them like you would any other image (don't forget the alt attribute). Open Iconic also comes in a SVG sprite which allows you to display all the icons in the set with a single request. It's like an icon font, without being a hack.

optimizt - CLI image optimization tool

  •    Javascript

Optimizt is a CLI tool that helps you prepare images during frontend development. It can compress PNG, JPEG, GIF and SVG lossy and lossless and create AVIF and WebP versions for raster images.

SVGInjector - Fast, caching, dynamic inline SVG DOM injection library

  •    Javascript

A fast, caching, dynamic inline SVG DOM injection library. Developed by Waybury for use in iconic.js, part of the Iconic icon system. There are a number of ways to use SVG on a page (object, embed, iframe, img, CSS background-image) but to unlock the full potential of SVG, including full element-level CSS styling and evaluation of embedded JavaScript, the full SVG markup must be included directly in the DOM.

react-native-sketch-canvas - A React Native component for drawing by touching on both iOS and Android

  •    Javascript

A React Native component for drawing by touching on both iOS and Android. To use an image as background, localSourceImage(see below) reqires an object, which consists of filename, directory(optional) and mode(optional). Note: Because native module cannot read the file in JS bundle, file path cannot be relative to JS side. For example, '../assets/image/image.png' will fail to load image.

Sharp - High performance Node.js image processing

  •    Javascript

The typical use case for this high speed Node.js module is to convert large images in common formats to smaller, web-friendly JPEG, PNG and WebP images of varying dimensions.Resizing an image is typically 4x-5x faster than using the quickest ImageMagick and GraphicsMagick settings.

canvg - Javascript SVG parser and renderer on Canvas

  •    TypeScript

JavaScript SVG parser and renderer on Canvas. It takes the URL to the SVG file or the text of the SVG file, parses it in JavaScript and renders the result on Canvas. Description of all exports you can find in Documentation.

image-trace-loader - Loads images and exports traced outlines as image/svg+xml URL-encoded data

  •    Javascript

I saw Mikael Ainalem's fantastic CodePen showcasing this technique, and I wanted a way to automate the process. The image-trace-loader loads your image and exports the url of the image as src and the image/svg+xml URL-encoded data as trace.

androidsvgdrawable-plugin - Gradle plugin that generates qualified, density specific PNG drawables from SVG files at build time for your Android projects

  •    Java

Every Android application should provide alternative resources to support specific device configurations such as portrait, landscape, small, large, us, fr, ... Because we don't want to edit thousands of several images every time we need to change a single pixel, a color, a shadow size or a text value, this plugin generates for you density specific bitmap drawable resources from qualified SVG files at build time. The only thing you have to do is to provide one or more qualified SVG files that will be converted for you at build time into as many as needed bitmaps and organized into configuration-specific drawable directories... at least one for each targeted screen density ! You'll never deal with raster resources anymore...

Apache Batik - The Apache Foundation’s Java-based toolkit for SVG generation and manipulation

  •    Java

Batik is a Java based toolkit for applications which handle images in the Scalable Vector Graphics (SVG) format for various purposes, such as viewing, generation or manipulation. The project's ambition is to give developers a set of core modules which can be used together or individually to support specific SVG solutions. Examples of modules are an SVG parser, an SVG generator and an SVG DOM implementation.

shields - Concise, consistent, and legible badges in SVG and raster format

  •    Javascript

This is home to Shields.io, a service for concise, consistent, and legible badges in SVG and raster format, which can easily be included in GitHub readmes or any other web page. The service supports dozens of continuous integration services, package registries, distributions, app stores, social networks, code coverage services, and code analysis services. Every month it serves over 470 million images. Browse a complete list of badges.

clowncar - Clown Car Responsive Image Technique

  •    

We can use media queries within SVG to serve up the right image. The beauty of the "Clown Car" technique is that all the logic remains in the SVG file. I've called it the "Clown Car" technique since we are including (or stuffing) many images (clowns) into a single image file (car). When you mark up your HTML, you simply add a single call to an SVG file.

pageres - Capture website screenshots

  •    Javascript

Capture screenshots of websites in various resolutions. A good way to make sure your websites are responsive. It's speedy and generates 100 screenshots from 10 different websites in just over a minute. It can also be used to render SVG images.See pageres-cli for the command-line tool.

pageres-cli - Capture website screenshots

  •    Javascript

Capture screenshots of websites in various resolutions. A good way to make sure your websites are responsive. It's speedy and generates 100 screenshots from 10 different websites in just over a minute. It can also be used to render SVG images.See pageres for the programmatic API and issues tracker.

libvips - A fast image processing library with low memory needs

  •    C

libvips is a demand-driven, horizontally threaded image processing library. Compared to similar libraries, libvips runs quickly and uses little memory. It has around 300 operations covering arithmetic, histograms, convolution, morphological operations, frequency filtering, colour, resampling, statistics and others.






We have large collection of open source products. Follow the tags from Tag Cloud >>


Open source products are scattered around the web. Please provide information about the open source projects you own / you use. Add Projects.