jQuery Plugin To Apply Custom CSS Styles To SVG - SVG.js

SVG.js is a lightweight and simple to use jQuery plugin which lets you apply custom CSS/CSS3 style to your SVG object. Supports both inline CSS styles and external style sheet.

Basic usage:

1. Link to jQuery library and the jQuery SVG.js plugin.

<script src="//code.jquery.com/jquery-2.2.2.min.js"></script>
<script src="dist/jquery.svg.js"></script>

2. Embed your SVG into the webpage using HTML object tag as follow:

<object id="demo" type="image/svg+xml" data="1.svg"></object>

3. Apply your own CSS to the SVG object.

$("#demo").setSVGStyle(Style);
// or
$("#demo").setSVGStyleLink('demo.css');

4. Get the SVG object and do something using jQuery functions.

var svg = $("#demo").getSVG();
svg.find("g path:first-child()").attr('fill', color);

---

This awesome jQuery plugin is developed by mberneti. For more Advanced Usages, please check the demo page or visit the official website.