tessl/npm-svgo

Node.js library and command-line application for optimizing SVG vector graphics files

—

Pending

Overview

Eval results

Files

Data URI Utilities

Name: tessl/npm-svgo
Author: tessl

SVG Data URI encoding and decoding utilities for converting SVG strings to and from various Data URI formats (base64, URL-encoded, unencoded).

Capabilities

Encode SVG Data URI

Convert SVG strings to Data URI format.

/**
 * Encode plain SVG data string into Data URI string
 * @param str - SVG string to encode
 * @param type - Data URI encoding type (default: 'base64')
 * @returns Data URI string
 */
function encodeSVGDatauri(str: string, type?: DataUri): string;

type DataUri = 'base64' | 'enc' | 'unenc';

Usage Examples:

import { encodeSVGDatauri } from "svgo";

const svgString = '<svg xmlns="http://www.w3.org/2000/svg"><rect width="100" height="100"/></svg>';

// Base64 encoding (default)
const base64Uri = encodeSVGDatauri(svgString);
// Result: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIi8+PC9zdmc+"

const base64UriExplicit = encodeSVGDatauri(svgString, 'base64');
// Same as above

// URL encoded
const encodedUri = encodeSVGDatauri(svgString, 'enc');
// Result: "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Crect%20width%3D%22100%22%20height%3D%22100%22/%3E%3C/svg%3E"

// Unencoded (raw)
const rawUri = encodeSVGDatauri(svgString, 'unenc');
// Result: "data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><rect width="100" height="100"/></svg>"

Decode SVG Data URI

Convert Data URI strings back to plain SVG.

/**
 * Decode SVG Data URI string into plain SVG string
 * @param str - Data URI string to decode
 * @returns Plain SVG string
 */
function decodeSVGDatauri(str: string): string;

Usage Examples:

import { decodeSVGDatauri } from "svgo";

// Decode base64 Data URI
const base64Uri = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIi8+PC9zdmc+";
const svgFromBase64 = decodeSVGDatauri(base64Uri);
// Result: '<svg xmlns="http://www.w3.org/2000/svg"><rect width="100" height="100"/></svg>'

// Decode URL encoded Data URI
const encodedUri = "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Crect%20width%3D%22100%22%20height%3D%22100%22/%3E%3C/svg%3E";
const svgFromEncoded = decodeSVGDatauri(encodedUri);
// Result: '<svg xmlns="http://www.w3.org/2000/svg"><rect width="100" height="100"/></svg>'

// Decode unencoded Data URI
const rawUri = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><rect width="100" height="100"/></svg>';
const svgFromRaw = decodeSVGDatauri(rawUri);
// Result: '<svg xmlns="http://www.w3.org/2000/svg"><rect width="100" height="100"/></svg>'

// If input is not a Data URI, returns the input unchanged
const plainSvg = '<svg><rect/></svg>';
const unchanged = decodeSVGDatauri(plainSvg);
// Result: '<svg><rect/></svg>' (unchanged)

Data URI Types

Different encoding formats for SVG Data URIs.

type DataUri = 'base64' | 'enc' | 'unenc';

Base64 Encoding ('base64'):

Most compact for binary-like content
Universally supported
Good for embedding in CSS or HTML
Default encoding type

const base64 = encodeSVGDatauri(svgString, 'base64');
// "data:image/svg+xml;base64,PHN2ZyB4bWxucz0i..."

URL Encoding ('enc'):

URL-safe encoding
Good for use in URLs and web contexts
More readable than base64 but longer

const encoded = encodeSVGDatauri(svgString, 'enc');
// "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A..."

Unencoded ('unenc'):

Plain SVG with minimal escaping
Most readable format
May have compatibility issues in some contexts
Best for debugging

const unencoded = encodeSVGDatauri(svgString, 'unenc');
// "data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg">..."

Integration with Optimize

Use Data URI utilities with the main optimization function.

interface Config {
  /** Output as Data URI string */
  datauri?: DataUri;
}

Usage Examples:

import { optimize } from "svgo";

// Direct Data URI output from optimize
const result = optimize(svgString, {
  datauri: 'base64',
  plugins: ['preset-default']
});
// result.data is already a Data URI

// Manual encoding after optimization
import { optimize, encodeSVGDatauri } from "svgo";

const optimized = optimize(svgString, {
  plugins: ['preset-default']
});
const dataUri = encodeSVGDatauri(optimized.data, 'enc');

Practical Use Cases

Common scenarios for Data URI encoding/decoding.

CSS Background Images:

import { optimize, encodeSVGDatauri } from "svgo";

// Optimize and encode for CSS
const svgIcon = '<svg>...</svg>';
const optimized = optimize(svgIcon, {
  plugins: ['preset-default']
});
const cssDataUri = encodeSVGDatauri(optimized.data, 'enc');

// Use in CSS
const css = `
  .icon {
    background-image: url("${cssDataUri}");
  }
`;

HTML Inline Images:

import { optimize, encodeSVGDatauri } from "svgo";

// Create inline image
const svgContent = '<svg>...</svg>';
const optimized = optimize(svgContent);
const imgSrc = encodeSVGDatauri(optimized.data, 'base64');

// Use in HTML
const html = `<img src="${imgSrc}" alt="Icon">`;

Processing External Data URIs:

import { decodeSVGDatauri, optimize, encodeSVGDatauri } from "svgo";

// Process existing Data URI
const existingDataUri = "data:image/svg+xml;base64,...";

// Decode, optimize, and re-encode
const plainSvg = decodeSVGDatauri(existingDataUri);
const optimized = optimize(plainSvg, {
  plugins: ['preset-default']
});
const newDataUri = encodeSVGDatauri(optimized.data, 'base64');

Batch Processing:

import { optimize, encodeSVGDatauri, decodeSVGDatauri } from "svgo";

function processDataUris(dataUris) {
  return dataUris.map(uri => {
    // Decode if it's a Data URI, otherwise use as-is
    const svgContent = uri.startsWith('data:') ? decodeSVGDatauri(uri) : uri;
    
    // Optimize
    const optimized = optimize(svgContent, {
      multipass: true,
      plugins: ['preset-default']
    });
    
    // Re-encode
    return encodeSVGDatauri(optimized.data, 'base64');
  });
}

const uris = [
  'data:image/svg+xml;base64,...',
  '<svg>...</svg>',  // Plain SVG
  'data:image/svg+xml,%3Csvg...'
];

const processed = processDataUris(uris);

Error Handling

Data URI utilities handle malformed input gracefully.

import { decodeSVGDatauri, encodeSVGDatauri } from "svgo";

// decodeSVGDatauri returns input unchanged if not a valid Data URI
const notADataUri = '<svg><rect/></svg>';
const decoded = decodeSVGDatauri(notADataUri);
console.log(decoded === notADataUri); // true

// encodeSVGDatauri always produces valid Data URI
const emptyString = '';
const encoded = encodeSVGDatauri(emptyString, 'base64');
console.log(encoded); // "data:image/svg+xml;base64,"

// Handle invalid encoding types
try {
  const invalid = encodeSVGDatauri(svgString, 'invalid'); // TypeScript will catch this
} catch (error) {
  console.error('Invalid encoding type');
}

Install with Tessl CLI