jQuery Plugin To Make SVG Images Inline - svg-to-inline

File Size: 1.05 MB
Views Total: 2926
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin To Make SVG Images Inline - svg-to-inline

svg-to-inline is a small jQuery plugin that convert SVG files embedded using object and img into inline SVG using SVG tag. So that you can easily apply your own CSS styles to the stroke, path, rect and polygon properties.

How to use it:

1. Put the jQuery svg-to-inline plugin's script after you've loaded jQuery JavaScript library.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery-svg-to-inline.js"></script>

2. Supposed that you have SVG files embedded in the webpage using object and img tags as follows.

<object type="image/svg+xml" data="demo.svg" class="svg demo"></object>
<img src="demo.svg"  class="svg demo">

3. Just call the function on the SVG files and done.

$( ".svg" ).svgToInline();

4. Apply your own CSS styles to the SVG files.

.demo {
  ...
}

.demo rect{
  ...
}

.demo path, .metallica polygon{
  ...
}

.demo polygon{
  fill: #000 !important;
}

Change log:

2016-10-16

  • some fixes.

2016-04-24

  • Refactoring and improvements

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