Convert SVG Images Into Inline SVG Elements - jQuery SVG Convert

SVG Convert is a lightweight (~1kb minified) jQuery plugin that has the ability to convert the static SVG images into inline SVG elements (paths, circles and polygons) so that you can style them whatever you like.

See also:

• jQuery Plugin To Make SVG Images Inline - svg-to-inline
• jQuery Based Picture To SVG (Vector) Converter - VectorCam
• jQuery Plugin To Apply Custom CSS Styles To SVG - SVG.js

Installation with NPM:

# NPM
$ npm install svg-convert --save

How to use it:

1. The SVG convert requires jQuery library has been loaded correctly in the webpage.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="svgConvert.min.js"></script>

2. Embed a SVG image into the webpage.

<img src="icon.svg" class="svg-convert">

3. Call the function on the SVG image.

$('.svg-convert').svgConvert();

4. Apply your own CSS styles to the SVG paths, circles and polygons.

path,  polygon,  circle { fill: #44BFA9; }

svg:hover path,  svg:hover polygon,  svg:hover circle { fill: #8068A2; }

5. Add an extra CSS class to the SVG.

$('.svg-convert').svgConvert({
  addClass: 'svg-converted'
});

6. Execute a callback function after the SVG image has been converted.

$('.svg-convert').svgConvert({
  onComplete: function() {}
});

7. More configuration options with default values.

$('.svg-convert').svgConvert({

  // removes any attributes on the svg set
  svgCleanupAttr: ['width','height','id','x','y','xmlns','xmlns:a','xmlns:xlink','xml:space','enable-background','version','style'],

  // Any attributes (class, id, data-, width etc) you add to the image before it gets converted will be added to the svg after completion.
  imgIncludeAttr: true,

  // If you don't want certain attributes from the image to be added on to the svg then add them in to the array
  imgCleanupAttr: [],

  // Removes the selector class from the svg after it's been converted. In the example above, this would remove .svg-convert from the class attribute
  removeClass: true
  
});

Change log:

2017-12-05

• Tidy up

---

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