SVG64

Convert SVG to base64 anywhere

Visitor stats

Code stats

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

import svg64 from 'svg64'; // or use window.svg64.default

// 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 = 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 to use the SVG64 module in a browser.

Check it out here

There is a simple demo illustrating how to use the SVG64 module in NodeJS.

Check it out here

LICENSE

MIT