Replaced inline png with inline svg

[HerrZatacke]

I suggest using an encoded svg instead of a png, as this reduces the filesize significantly.

Filesize before substitution: 121.803 Bytes Filesize after substitution: 17.560 Bytes Results in a reduction of the minified library by ~85%

The svg uses a radialGradient and feGaussianBlur to closely approximate the oiginal vignette.

The raw (unencoded) source of the svg:

<svg xmlns="http://www.w3.org/2000/svg" width="80" height="60" viewBox="0 0 80 60">
  <defs>
    <radialGradient id="a">
      <stop offset=".3" stop-opacity="0"/>
      <stop offset=".35" stop-opacity=".01"/>
      <stop offset=".4" stop-opacity=".03"/>
      <stop offset=".45" stop-opacity=".05"/>
      <stop offset=".5" stop-opacity=".09"/>
      <stop offset=".55" stop-opacity=".13"/>
      <stop offset=".6" stop-opacity=".18"/>
      <stop offset=".65" stop-opacity=".23"/>
      <stop offset=".7" stop-opacity=".28"/>
      <stop offset=".75" stop-opacity=".33"/>
      <stop offset=".8" stop-opacity=".37"/>
      <stop offset=".85" stop-opacity=".41"/>
      <stop offset=".9" stop-opacity=".44"/>
      <stop offset=".95" stop-opacity=".47"/>
      <stop offset="1" stop-opacity=".49"/>
    </radialGradient>
  </defs>
  <filter id="b" x="0" y="0">
    <feGaussianBlur in="SourceGraphic" stdDeviation="2"/>
  </filter>
  <path fill="url(#a)" filter="url(#b)" d="M-20-30h120V90H-20z"/>
</svg>

[phonezawphyo]

Would love to have this. +1

[HerrZatacke]

@phonezawphyo Oh - good my phone beeped after your comment. It remind's me to tell everyone here that (unfortunately) the svg vignette does not work with IE or Edge 😢 I realized that much later and forgot to update here.

In the end i had to go back to using an "regular" image. But i used it as an external "regular" image asset.