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 |
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.