or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

index.md
tile.json

tessl/npm-svg4everybody

A JavaScript polyfill library that enables external SVG spritemap support across all browsers, including legacy versions.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/svg4everybody@2.1.x

To install, run

npx @tessl/cli install tessl/npm-svg4everybody@2.1.0

index.mddocs/

SVG for Everybody

SVG for Everybody is a JavaScript polyfill library that enables external SVG spritemap support across all browsers, including legacy versions of Internet Explorer, Safari, and Edge. It allows developers to use external SVG files with the <use> element by automatically detecting when external content is not natively supported and providing fallbacks through dynamic content injection or image replacements.

Package Information

  • Package Name: svg4everybody
  • Package Type: npm
  • Language: JavaScript
  • Installation: npm install svg4everybody
  • CDN: Include script directly from CDN or local files

Core Imports

ES Modules

import svg4everybody from "svg4everybody";

CommonJS

const svg4everybody = require("svg4everybody");

Global Script Tag

<script src="/path/to/svg4everybody.js"></script>
<!-- svg4everybody is now available globally -->

Legacy IE Support

<script src="/path/to/svg4everybody.legacy.js"></script>
<!-- For IE 6-8 support with image fallbacks and additional options -->

Standard vs Legacy Versions:

  • Standard version (svg4everybody.js): Supports modern browsers and IE 9+, includes polyfill, validate, and attributeName options
  • Legacy version (svg4everybody.legacy.js): Supports IE 6-8 with image fallbacks, includes all standard options plus fallback and nosvg options

Basic Usage

// Basic usage - auto-detect browser needs and enable polyfill
svg4everybody();

// Call after DOM is ready or when new SVG elements are added
document.addEventListener('DOMContentLoaded', function() {
  svg4everybody();
});

SVG Markup Usage

<!-- External SVG spritemap -->
<svg role="img" title="CodePen">
  <use xlink:href="map.svg#codepen"/>
</svg>
<svg role="img" title="YouTube">
  <use xlink:href="map.svg#youtube"/>
</svg>

SVG Spritemap Structure

<!-- map.svg -->
<svg xmlns="http://www.w3.org/2000/svg">
  <symbol id="codepen" viewBox="0 0 64 64">
    <title>CodePen</title>
    <path d="..."/>
  </symbol>
  <symbol id="youtube" viewBox="0 0 64 64">
    <title>YouTube</title>
    <path d="..."/>
  </symbol>
</svg>

Capabilities

Main Polyfill Function

Initialize and run the SVG external content polyfill.

/**
 * Main polyfill function that enables SVG external content support
 * @param rawopts - Optional configuration object
 */
function svg4everybody(rawopts?: SVGForEverybodyOptions): void;

Configuration Options

interface SVGForEverybodyOptions {
  /** Whether to activate the polyfill for external SVG content (auto-detected if not specified) */
  polyfill?: boolean;
  
  /** Custom validation function to determine which <use> elements to process */
  validate?: (src: string, svg: Element, use: Element) => boolean;
  
  /** Custom fallback function for generating image replacement URLs (LEGACY VERSION ONLY) */
  fallback?: (src: string, svg: Element, use: Element) => string;
  
  /** Forces image fallbacks instead of SVG (LEGACY VERSION ONLY, auto-detected for IE 6-8) */
  nosvg?: boolean;
  
  /** Alternative attribute name to check for SVG reference (in addition to xlink:href and href) */
  attributeName?: string;
}

Advanced Usage Examples

Custom Validation

svg4everybody({
  validate: function(src, svg, use) {
    // Only process sprites from the /sprites/ directory
    return src.startsWith('/sprites/');
  }
});

Custom Fallback (Legacy Version Only)

// IMPORTANT: This requires svg4everybody.legacy.js, not the standard version
svg4everybody({
  fallback: function(src, svg, use) {
    // Custom fallback image logic
    return '/images/svg-fallback.png';
  }
});

Force Image Fallbacks (Legacy Version Only)

// IMPORTANT: This requires svg4everybody.legacy.js, not the standard version
svg4everybody({
  nosvg: true, // Force image fallbacks for all browsers
  fallback: function(src, svg, use) {
    // Convert map.svg#icon to map.svg.icon.png
    return src.replace(/\?[^#]+/, '').replace('#', '.').replace(/^\./, '') + '.png';
  }
});

Manual Polyfill Control

svg4everybody({
  polyfill: true // Force polyfill activation regardless of browser detection
});

Alternative Attribute Name

svg4everybody({
  attributeName: 'data-href' // Check data-href attribute in addition to xlink:href and href
});

Browser Support

Native Support

  • Chrome 21+
  • Firefox 4+
  • Safari 7.1+
  • Opera 23+
  • iOS 8.1+
  • Edge 13+

Polyfilled Support

  • Chrome 14-20
  • Android Browser 4.1+
  • iOS 6-7
  • Safari 6
  • Edge 12
  • IE 9-11

Legacy Support (with svg4everybody.legacy.js)

  • IE 6-8 (with image fallbacks)

Implementation Notes

IE 6-8 Requirements

  • Use svg4everybody.legacy.js instead of the standard version
  • Include script in the <head> to properly shiv <svg> and <use> elements
  • Set X-UA-Compatible to ie=edge for best results
  • Use self-closing <use/> elements with trailing slash

Accessibility Best Practices

<!-- Use title attributes and ARIA roles -->
<svg role="img" title="Find me on Twitter">
  <use xlink:href="map.svg#twitter"/>
</svg>

<!-- For decorative icons -->
<svg role="presentation">
  <use xlink:href="map.svg#decorative-icon"/>
</svg>

Default Fallback Behavior

By default, fallback images point to a PNG file in the same location as the SVG, with the # hash replaced by a . dot and appended with a .png extension:

  • map.svg#codepen → map.svg.codepen.png
  • sprites.svg#icon → sprites.svg.icon.png

Types

/** Configuration options for svg4everybody function */
interface SVGForEverybodyOptions {
  polyfill?: boolean;
  validate?: ValidationFunction;
  fallback?: FallbackFunction;
  nosvg?: boolean;
  attributeName?: string;
}

/** Validation function signature */
type ValidationFunction = (
  src: string,    // Current xlink:href or href attribute value
  svg: Element,   // Current SVG element
  use: Element    // Current USE element
) => boolean;     // Return true to process, false to skip

/** Fallback function signature (legacy version only) */
type FallbackFunction = (
  src: string,    // Current xlink:href or href attribute value
  svg: Element,   // Current SVG element  
  use: Element    // Current USE element
) => string;      // Return URL to fallback image