I have tried multiple SVG injectors including:
- SVGInjector by iconic
- And the example provided in this answer.
The issue I have with both is that it's bad enough that placing the SVG in the src of an img tag takes one request, the scripts seem to be sending a second request.
Using JS, I would like this:
<img id="thumb-up" class="inject-me" src="https://cdn.rawgit.com/iconic/SVGInjector/master/examples/all-the-things/assets/svg/thumb-up.svg" alt="Thumbs Up!">
to inline such as this:
<svg class="injected-svg inject-me" id="thumb-up" viewBox="0 0 8 8" height="8" width="8" xmlns="http://www.w3.org/2000/svg">
<path d="M4.47 0c-.19.02-.37.15-.47.34-.13.26-1.09 2.19-1.28 2.38-.19.19-.44.28-.72.28v4h3.5c.21 0 .39-.13.47-.31 0 0 1.03-2.91 1.03-3.19 0-.28-.22-.5-.5-.5h-1.5c-.28 0-.5-.25-.5-.5s.39-1.58.47-1.84c.08-.26-.05-.54-.31-.63-.07-.02-.12-.04-.19-.03zm-4.47 3v4h1v-4h-1z"></path>
</svg>
Is there a way to inline the SVG that is already in the DOM without sending a second request?
