svg64

SVG64

Convert SVG to base64 anywhere

About

If you, like me, are using lots of SVGs when developing, you might have come to a point where you need your SVG used as background image or embedded in your javascript file. The only way to do this is to convert your SVG file to a base64 string and then use it where needed. This package does exactly this - it converts SVGs to base64.

This package works in a browser and in a Node environment. Please read along to understand how.

Install

npm i svg64

or

yarn add svg64

or

just download this repository and use the files located in dist folder

or unclude it from unpkg.com

<script src="https://unpkg.com/svg64"></script>

Usage

In a browser:

// This is your SVG DOM element
const svg = document.getElementById('svg');

// This is your DOM element that needs SVG background image
const demo = document.getElementById('demo');

// This is your SVG in base64 representation
const base64fromSVG = window.svg64(svg);

// Add the base64 image as a background to your element
demo.style.backgroundImage = `url(${base64fromSVG})`;

In Node:

// Require svg64
const svg64 = require('svg64');

// Import `readFileSync` from the file system module
const { readFileSync } = require('fs');

// Read your SVG file's contents
const svg = readFileSync('./file.svg', 'utf-8');

// This is your SVG in base64 representation
const base64fromSVG = svg64(svg);

Demo

There is a simple demo illustrating how the SVG64 library works in browser.

Check it out here

There is a simple demo illustrating how the SVG64 library works in Node.

Check it out here

LICENSE

MIT