Apply a theme to SVG elements as well as image data and css rules constructed from SVG markup
npm install svg-themerApply a theme to SVG elements as well as image data and css rules constructed from SVG markup.
The basic function of this module is to "theme" an SVG data by setting arbitrary properties on the root element and/or its descendants. Typical use case is to apply stroke and fill via the style property.
This module is not necessary for DOM elements which can be styled with CSS. Unfortunately, CSS cannot be used to style image data derived from SVG, such as elements and CSS style rule properties with url() values that reference SVG data.
With svg-themer you can theme such objects as easily as actual elements. You can also attach custom theming "scripts" (functions) so that all SVG data can be themed from a single theme object definition regardless of their individual levels of complexity.
> TL;DR Skip to API with examples.
SVG data is displayed on a web page by the following DOM Elements:
* SVGSVGElement — Represented in XML as (with descendant elements)
* HTMLImageElement — Represented in HTML as or
* HTMLElement — Any DOM element inheriting a CSS property value like url(filename.svg) or url(data:image/svg+xml...)
An SVGSVGElement, along with its descendant elements, picks up cascading style properties (including but not limited to stroke and fill) from CSS stylesheet rules. This works quite well, albeit at the memory cost of having to deep-clone the entire element everywhere it needs to appear. However, with the memory capacity of today's machines this cost is usually of no concern.
The situation is quite different, however, for elements with underlying SVG data and for any element referencing SVG data via a CSS url() function. In these cases applying styles has _no effect_ on the image because it has already been rasterized. With this module, you can apply a set of thematic styles directly to such SVG data.
HTMLImageElement object | GET request | 
HTMLImageElement object | in-line, raw (unencoded) | 
HTMLImageElement object | in-line, base64-encoded | 
CSSStyleRule property | GET request | background-image: url(yourfile.svg)CSSStyleRule property | in-line, URI-encoded | background-image: url(data:image/svg+xml,...)CSSStyleRule property | in-line, base64-encoded | background-image: url(data:image/svg+xml;base64,...)> Note: Data in CSS url() constructs must always be encoded. (FYI, base64 encoding produces shorter results.)
> Note: Some browsers (looking at you, IE11) require HTMLImageElement#src to be encoded as well, depending on the content. For this reason, formerly unencoded data is always URI-encoded on write-back to src after styling as the content is now indeterminate.
theme objectsTheming is performed in this module by calling property-setting functions that you supply. These "prop setters" take a theme parameter and applies it to the SVG element.
Your theming scheme (the shape of your theme object) is up to you and your prop setter functions. The standard implementation uses a very simple scheme with two properties, color and backgroundColor. A theme registry using this scheme might look like this:
``js`
var theme = {
blackAndWhite: { backgroundColor: 'white', color: 'black' },
highwaySignage: { backgroundColor: '#006A4D', color: 'white' }, // Pantone 342
stopSignage: { backgroundColor: '#da291c', color: 'white' } // Pantone 485
};
If you don't specify a custom prop setter for your SVG image, the fallback (svgThemer.setSvgProps) will be called. The fallback assumes a particular simple scheme for theme objects. It may however be overridden to accommodate custom theming schemes.
Access npm module:
`bash`
npm i svg-themer --save`js`
var svgThemer = require('svg-themer');`
Access UMD module (one of the following):html`
element. Used by the other API methods to style an element extracted from an element's src or a CSSStyleRule object property with a url() value. It then re-injects the styled version back into the src attribute or the CSS url().This method serves primarily as a fallback when a custom method is not supplied to the other API methods.
#### The standard implementation
The standard implementation accommodates a basic theming scheme, which it applies only to the root
SVGSVGElement:Color |
theme
property | SVG style
:---: | :---: | :---:
Foreground | .color | stroke and color
Background | .backgroundColor | fill> Note: The reason the standard implementation also sets
color style is to facilitate using fill: currentColor inside the svg.#### Styling