oakstudios / inline-svg

A web component for dynamically fetching SVG files and inlining them in HTML

Inline SVG

Installation

npm i @oakstudios/inline-svg

Web Component

1. Load the web component. Choose the option that best suits your needs:

   Using a script tag placed at the end of the body:

   <!-- this automatically registers the component in the window as mechanical-ragger -->
   <script type="module" src="https://unpkg.com/@oakstudios/inline-svg@latest/auto-register.js"></script>

   OR importing the same auto-register function in JS:

   import "@oakstudios/inline-svg/auto-register";

   OR registering the component manually:

   import InlineSVG from "@oakstudios/inline-svg";
   
   customElements.define("inline-svg", InlineSVG);

2. Then add it to your HTML:

   <inline-svg src="/path/to/file.svg"></inline-svg>

API

Attribute	Default	Description
src	null	HTTP path or URL to the desired SVG image
scoped	false	Scopes id attributes and references to them within the SVG. Helps prevent naming collisions within the HTML document.

Acknowledgements

https://www.npmjs.com/package/react-inlinesvg

inline-svg's Issues

NPM Deployment

not necessarily wed to NPM for packaging, but think it would get syndicated to unpkg/etc easily this way

for NPM, just need the secrets.npm_token set in the repo

Make ID parsing more robust

Current ID parsing works in limited cases, but IDs are pretty liberal in what they accept:

There are no other restrictions on what form an ID can take; in particular, IDs can consist of just digits, start with a digit, start with an underscore, consist of just punctuation, etc.

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id#sect2

MDN notes that the primary limit on them is that they can't include whitespace.

Should TDD this.

Also thinking that an escape hatch would be nice on the off chance that someone wants to cross-reference SVG elements (eg. <use>!)

Make styling easier

Currently, we have a basic custom element (which extends HTMLElement) that wraps the inline SVG. This works, but adds a wrapper element that has its own intrinsic layout considerations.

Possible Fixes

Suggest removal of box layout

This fix works now, but display: contents has some accessibility issues with interactive elements that may cause problems in some (albeit very specific) circumstances

inline-svg {
  display: contents;
}
inline-svg svg {
  /* whatever layout styles are preferred */
}

Make custom element extend SVGElement

Instead of extending HTMLElement, we could make this custom element a subclass of SVG, and when initializing the remote element, copy its Element.attributes to the root custom element before we append that element's children to the custom element.

Fail more gracefully

on 4xx, 5xx responses, we should log errors to the console rather than inlining the result

Use Cache API

The current cache is working and appropriately module-scoped, but maybe for clarity and persisting across page sessions it would be good to use the Cache API