Greasy Fork

Data URIs are very useful for small images, like:

<img alt="Newgrounds button" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAAAZCAIAAABPfsIJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAASdEVYdFNvZnR3YXJlAEdyZWVuc2hvdF5VCAUAAAGVSURBVEhLrZO9TsJgFIbPFUihWPpfSylQg0QUS0gMozHExcWfzcEFY+Ls6i04eyWOTl6Ct+Di5s+kb2w8NqeFJtDkyZfvvOecp99S2h8fj4bTTjj03E3X7i4HdmGABzaKdw89J3LszurAAxuFwY5jdcoCNsKbbbNdFrCRbYblQpbRKhcyjaCQ+2j6PbrCKfJcyNSDxeCz0CXgLrpZyNCbhbBR5LmQ0fAL+TdmWllI1zayxFa/bQRcspETdDHDZRpqaJ7gLjzA8ns8mzhbScLGpESOLkpMJkka0uqO4PNv/21vZmkekqQEuCNBnpSY5C2G6qopeIiOWPE8OEXy8XvHiTsS7mKStxhSa2aWx94Zrz31z9mIO+eYEVsJMBq5vAwueDkLumKemWsM663X+FKIEpCjK+YZqlWNeYxSf0sa5GIyDYz6Ak6cbaFDImYEVFP0xdz4Y9bhLrpZqKrohdw2J1/ja5wizwVvNKqVRlnARprqinQVYCPXivBUpaKtDjywke/0XLO7rtr4grKmLQd2YYDHd3o/nadGX0NM5CIAAAAASUVORK5CYII=">

This will save some images from being uploaded, and this supports SVG image. Which leads to the second request: allow SVG as image format for upload. Vector images will save lots of space compare to bitmap images. Many websites had use SVG for years.

Upload is limited to 5 per script/post, which is way too less for icons and, in my case, button previews (for different websites).

Not a big problem for me, since I can put all the buttons into one picture and add description onto it (doing this right now). However, if One would like to add website favicons or other kind of icons into the script description, they may have to use third party image hostings.

Scripting in SVG (in HTML) seems only work when the SVG is directly embedded into HTML as a inline SVG element. This source claims that:

SVG documents added to the page as images will have their JavaScript ignored

I personally confirmed this with an example script SVG on MDN. The SVG on MDN webpage works, it will change color on click.

<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
  <script>
  // <![CDATA[
  window.addEventListener('DOMContentLoaded', () => {
    function getColor () {
      const R = Math.round(Math.random() * 255).toString(16).padStart(2,'0')
      const G = Math.round(Math.random() * 255).toString(16).padStart(2,'0')
      const B = Math.round(Math.random() * 255).toString(16).padStart(2,'0')
      return `#${R}${G}${B}`
    }

    document.querySelector('circle').addEventListener('click', (e) => {
      e.target.style.fill = getColor()
    })
  })
  // ]]>
  </script>

  <circle cx="5" cy="5" r="4" />
</svg>

But if I turn it into this data URI, it won't work any more:

<img src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAgMTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+DQogIDxzY3JpcHQ+DQogIC8vIDwhW0NEQVRBWw0KICB3aW5kb3cuYWRkRXZlbnRMaXN0ZW5lcignRE9NQ29udGVudExvYWRlZCcsICgpID0+IHsNCiAgICBmdW5jdGlvbiBnZXRDb2xvciAoKSB7DQogICAgICBjb25zdCBSID0gTWF0aC5yb3VuZChNYXRoLnJhbmRvbSgpICogMjU1KS50b1N0cmluZygxNikucGFkU3RhcnQoMiwnMCcpDQogICAgICBjb25zdCBHID0gTWF0aC5yb3VuZChNYXRoLnJhbmRvbSgpICogMjU1KS50b1N0cmluZygxNikucGFkU3RhcnQoMiwnMCcpDQogICAgICBjb25zdCBCID0gTWF0aC5yb3VuZChNYXRoLnJhbmRvbSgpICogMjU1KS50b1N0cmluZygxNikucGFkU3RhcnQoMiwnMCcpDQogICAgICByZXR1cm4gYCMke1J9JHtHfSR7Qn1gDQogICAgfQ0KDQogICAgZG9jdW1lbnQucXVlcnlTZWxlY3RvcignY2lyY2xlJykuYWRkRXZlbnRMaXN0ZW5lcignY2xpY2snLCAoZSkgPT4gew0KICAgICAgZS50YXJnZXQuc3R5bGUuZmlsbCA9IGdldENvbG9yKCkNCiAgICB9KQ0KICB9KQ0KICAvLyBdXT4NCiAgPC9zY3JpcHQ+DQoNCiAgPGNpcmNsZSBjeD0iNSIgY3k9IjUiIHI9IjQiIC8+DQo8L3N2Zz4=">