JSFiddle - React, Tailwind, and code Playground

by brandonzylstra

HTML

<h3>Progressive Enhancement</h3>

<p>You can replace your Mosaic-style images with SVG images, and then transform them in ways not possible with Mosaic-style images.</p>
<img src="http://api.jquery.com/resources/hat.gif" />
<br>

JavaScript

svg_image = '<svg width="100" height="100"><image id="trns" transform="rotate(90,50,50)" width="100" height="100" xlink:href="http://api.jquery.com/resources/hat.gif"/></svg >'
$(function () {
    $('img').replaceWith(svg_image);
    $('svg image').attr('transform', 'rotate(60,50,50)');
});