css-filter-to-svg-filter

Getting Started

Install: $ npm install css-filter-to-svg-filter

Import: import CSSFilterToSVGFilter from 'css-filter-to-svg-filter';

Usage

• Constructor
• Generate SVG File
• Generate SVG Filter
• Generate SVG Filter Object
• Generate CSS Filter Object
• SVG Filter Templates
• CSS Filter Support

Constructor

Use the constructor method new CSSFilterToSVGFilter() to start the conversion.

const cssFilter = 'filter: invert(50%);';
const converter = new CSSFilterToSVGFilter(cssFilter);

// With an optional parameter
const params = {
  filterId: 'greatId',
};
const customConverter = new CSSFilterToSVGFilter(cssFilter, params);

Required parameters:

• cssFilter, see CSS Filter Support for more details

Optional parameters:

|Name |Default| |------------|-------| |filterID |none | |blur |none | |dropShadow|none |

Generate SVG File

Use the toSVG() method to convert and generate a string of an SVG containing a single filter.

const cssFilter = 'filter: invert(50%);';
const svg = new CSSFilterToSVGFilter(cssFilter).toSVG();

console.log(svg);
// <svg width="100%" height="100%"><filter color-interpolation-filters="sRGB"><feComponentTransfer><feFuncR type="table" tableValues="0.5 0.5"/><feFuncG type="table" tableValues="0.5 0.5"/><feFuncB type="table" tableValues="0.5 0.5"/></feComponentTransfer></filter></svg>

// With optional parameter
const filterId = 'greatId';
const customSVG = new CSSFilterToSVGFilter(cssFilter, {filterId}).toSVG();

console.log(customSVG);
// <svg width="100%" height="100%"><filter id="greatId" color-interpolation-filters="sRGB"><feComponentTransfer><feFuncR type="table" tableValues="0.5 0.5"/><feFuncG type="table" tableValues="0.5 0.5"/><feFuncB type="table" tableValues="0.5 0.5"/></feComponentTransfer></filter></svg>

Required parameters: none

Optional parameters:

|Name |Default | |--------------------|----------------------------| |attributes |width="100%" height="100%"| |svgFilter |this.toSVGFilter() |

Generate SVG Filter

Use the toSVGFilter() method to convert and generate a string of an SVG filter.

const cssFilter = 'filter: invert(50%);';
const svgFilter = new CSSFilterToSVGFilter(cssFilter).toSVGFilter();

console.log(svgFilter);
// <filter color-interpolation-filters="sRGB"><feComponentTransfer><feFuncR type="table" tableValues="0.5 0.5"/><feFuncG type="table" tableValues="0.5 0.5"/><feFuncB type="table" tableValues="0.5 0.5"/></feComponentTransfer></filter>

// With optional parameter
const filterId = 'greatId';
const customSVGFilter = new CSSFilterToSVGFilter(cssFilter).toSVGFilter({filterId});

console.log(customSVGFilter);
// <filter id="greatId" color-interpolation-filters="sRGB"><feComponentTransfer><feFuncR type="table" tableValues="0.5 0.5"/><feFuncG type="table" tableValues="0.5 0.5"/><feFuncB type="table" tableValues="0.5 0.5"/></feComponentTransfer></filter>

Required parameters: none

Optional parameters:

|Name |Default | |--------------------|-----------------------------------------| |filterId |none | |attributes |color-interpolation-filters="sRGB" | |svgFilterFunctions|Object.values(this.toSVGFilterObject())|

Generate SVG Filter Object

Use the toSVGFilterObject() method to convert and generate an SVG filter as an object.

const cssFilter = 'filter: invert(50%);';
const svgFilterObject = new CSSFilterToSVGFilter(cssFilter).toSVGFilterObject();

console.log(svgFilterObject);
// { invert: '<feComponentTransfer><feFuncR type="table" tableValues="0.5 0.5"/><feFuncG type="table" tableValues="0.5 0.5"/><feFuncB type="table" tableValues="0.5 0.5"/></feComponentTransfer>' }

Required parameters: none

Optional parameters:

|Name |Default | |-----------------|--------------------------| |cssFilterObject|this.toCSSFilterObject()|

Generate CSS Filter Object

Use the toCSSFilterObject() method to convert CSS filter to an object.

const cssFilter = 'filter: invert(50%);';
const cssFilterObject = new CSSFilterToSVGFilter(cssFilter).toCSSFilterObject();

console.log(cssFilterObject);
// { invert: { original: '50%', processed: 0.5 } }

Required parameters: none

Optional parameters: none

SVG Filter Templates

Use the static property SVG_FILTER_TEMPLATES to view the generalized SVG filters.

const svgFilterTemplates = CSSFilterToSVGFilter.SVG_FILTER_TEMPLATES;

const invertSVGFilterTemplate = CSSFilterToSVGFilter.SVG_FILTER_TEMPLATES['invert']['template'];
console.log(invertSVGFilterTemplate);
// <feComponentTransfer><feFuncR type="table" tableValues="[amount] [1 - amount]"/><feFuncG type="table" tableValues="[amount] [1 - amount]"/><feFuncB type="table" tableValues="[amount] [1 - amount]"/></feComponentTransfer>'

CSS Filter Support

|Filter Functions|Supported| |----------------|:-------:| |brightness |✅ | |blur |🟡 | |contrast |✅ | |drop-shadow |🟡 | |grayscale |✅ | |hue-rotate |✅ | |invert |✅ | |opacity |✅ | |saturate |✅ | |sepia |✅ |

Why are blur and drop-shadow different?

These don't have first-class support because the SVG filter function templates require several inputs which cannot easily be parsed from a CSS filter. By default blur and drop-shadow will be ignored from CSS filters. However, they can be added to an SVG filter by manually passing the inputs as parameters to the constructor.

const cssFilter = 'filter: invert(50%);';
const params = {
  blur: {
    radius: '',
    edgeMode: '',
  },
  dropShadow:{
    alphaChannelOfInput: '',
    radius: '',
    offsetX: '',
    offsetY: '',
    color: '',
  },
};
const customConverter = new CSSFilterToSVGFilter(cssFilter, params);

Links/Resources

• CSS filter property
• SVG filter element
• SVG filter templates