Replaces all of your SVG images (from a <img>
tag) by a <svg>
one. Allows better and easier manipulation on the shapes. Conserves original id
, class
and name
attributes of the <img>
tag.
Import the axios library and the main.js
file within your HTML document to make it work!
<script src="https://unpkg.com/axios"></script>
<script src="main.js"></script>
<a href="enhance.html">
<!-- Your SVG image -->
<img src="icon.svg">
<!-- Your SVG image -->
Enhance your work!
</a>
N.B. This will only be like this on the browser.
<a href="enhance.html">
<!-- Your SVG image -->
<svg viewBox="0 0 122 140" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:square;stroke-miterlimit:1.5;">
<g id="Logo">
<path d="M17.426,3.756l100.049,57.763l-0.476,42.459l-34.83,31.837l-51.42,-11.287l-26.993,-60.477l46.085,15.591l-32.415,-75.886Z" style="fill:#fff;stroke:#fb9500;stroke-width:4.17px;"></path>
<path d="M116.999,103.978l-67.158,-24.336l-32.415,-75.886l99.573,100.222Z" style="fill:#fff;stroke:#fb9500;stroke-width:4.17px;"></path>
</g>
</svg>
<!-- Your SVG image -->
Enhance your work!
</a>
This library depends on the the axios library, although it is temporary (I'll change that when I have time).