Remove inline SVG bloat from your HTML document
JavaScript HTML CSS
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
README.md
desvg.js
index.html
mob.css
package.json
style.css

README.md

deSVG

What does it do?

deSVG takes the <img /> tags you supply. It then grabs, using AJAX, the raw SVG you've set in the src attribute and replaces that <img /> with the <svg /> it downloads.

Install

Grab the files from this repo, or install from npm

Usage

window.addEventListener('load', function(){
 	// 1. selector for the <img /> tags to replace
 	// 2. whether to strip inline style tags from SVG paths
	deSVG('.replace-svg', true);
});

If you do not wish for two network requests to be made per image, instead of using the src attribute, you can pass in the images path via data-src="path/to/file". Note that this may cause layouts to jump and no image to be displayed whilst it is being fetched.

Demo

Check out this JSFiddle.

Source

Check out the commented source which should explain it's functionality in greater detail.