⚠️ Deprecated - This plugin is no longer supported, but it is fully functional.
SVG Convert
SVG Convert is a jQuery plugin that takes an .svg image (<img>) and converts it in to raw SVG code (<svg>)
It is useful when dealing with Content Management Systems (CMS) where users upload .svg files. It allows you to then interact with the raw code, changing fills, strokes etc within the sites CSS.
Usage
Important: SVG's can only be converted when ran on a server environment. "Cross Origin Requests" fail on local environments.
Getting Started
Install
The simplest way to get up and running is to copy the svg-convert.js file from dist and place it in to your js folder inside your project.
Insert the code below before your </body> tag.
<script src="js/svg-convert.js"></script>To initialise the plugin, use the code below in your JS files.
$('.svg-convert').svgConvert();The SVG Convert class .svg-convert needs to just be added to .svg's that you want converting from images, to raw code.
<img src="images/monkey.svg" class="svg-convert">This will then convert the image. Any attributes (E.g. class, id, data- etc) you add to the image will be carried across after it has been converted (See Options below for more information)
Remember to load jQuery before to use this plugin.
Options
General
| Name | Type | Default Value | Description |
| svgCleanupAttr | array | ['width','height','id','x','y', 'xmlns','xmlns:a','xmlns:xlink', 'xml:space','enable-background', 'version','style'] | When converting to svg the script removes any attributes on the svg set inside this array. Use this to remove these attributes. |
| imgIncludeAttr | boolean | true | Any attributes (class, id, data-, width etc) you add to the image before it gets converted will be added to the svg after completion. |
| imgCleanupAttr | array | ['alt','src'] | If you don't want certain attributes from the image to be added on to the svg then add them in to the array |
| removeClass | boolean | true | 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 |
| addClass | string | svg-converted | After the image has been converted you can optionally add a class to the svg |
| onComplete | function | null | Callback that is called when all SVG's have been converted |
Roadmap
- Ability to set options on images with a
dataattribute.
