DeSVG
Remove inline SVG bloat from your HTML document
Install / Use
/learn @benhowdle89/DeSVGREADME
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.
Related Skills
node-connect
342.0kDiagnose OpenClaw node connection and pairing failures for Android, iOS, and macOS companion apps
frontend-design
84.7kCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
openai-whisper-api
342.0kTranscribe audio via OpenAI Audio Transcriptions API (Whisper).
commit-push-pr
84.7kCommit, push, and open a PR
