How to make use of it:

1. Insert the SVGLite plugin after the jQuery library.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/svglite-min.js"></script>

2. Embed an SVG into the web page.

<svg id="example" ...>
  Paths Here
</svg>

3. Initialize the plugin on the SVG component and we’re ready to go.

$('#example').svglite({
  // options here
});

4. Change the styles of your SVG component by including or changing CSS classes.

// replace all classes
$('#path_id').pathclass('yourClass');

// add a CSS class
$('#path_id').pathclass('yourClass','add');

// clear all CSS classes
$('#path_id').pathclass();

// remove a specific CSS class
$('#path_id').pathclass('yourClass','remove');

5. Add patterns to SVG paths.

// replace all classes
$('#path_id').pathclass_pattern('yourClass');

// add a CSS class
$('#path_id').pathclass_pattern('yourClass','add');

// clear all CSS classes
$('#path_id').pathclass_pattern();

// remove a specific CSS class
$('#path_id').pathclass_pattern('yourClass','remove');

6. All default configuration options.

$('#example').svglite({

  // resize the SVG on window resize
  resize: false,

  // specific size you want the SVG to be sized to
  special: '',

  // set the animation timing for the patterns
  speed: 1500,

  // default opacity
  default_opacity: 1,

  // path opacity you're changing to
  change_opacity: 1,

});

7. Global settings.

// for 'special' config
svglitedefs.resize['jquery'] = 600;
$('#svg').svglite({special:'jquery'});

// set a maximum width
svglitedefs.max(1024);

Change Styles Of Inline SVGs, SVG in HTML, SVGLite Plugin/Github

See Demo And Download