Creating Inline Images for Plugins

The Framework Title Bar component commonly includes a small icon to represent the plugin, especially on smaller mashup views. This is the most common place SVG image files are used to display simple graphics or iconography in plugins, but the following steps can be used for other SVGs in your plugin.

To see a clear example of converting an SVG network call (https://...) to an inline SVG within a plugin, this commit by community member Stephen Yeargin is invaluable.

Converting an Image File to SVG

If you aren't already using an SVG file for your icon, some tools can help you do the conversion.

For PNG, pngtosvg.com is a great option. Depending on your image, you'll want to adjust the Colors and Simplify values to get the best results, but here are some examples:

Complex full color image: Colors to 1 and Simplify to 10
Simple, one-color (non-black) image: Colors to 2 and Simplify to 0

For JPG, you may need to do more preparation of your JPG, but there are numerous converters available.

Converting an SVG to Inline Code

The tool svg-2-code by nikitahl is a good option. The output <svg> code will need the width="400" height="400" values altered (24 is a good size for the Title Bar component), but otherwise, you've now created an inline SVG!

Liquid Plugin Code

In your plugin, you will want to use the Liquid capture variable in your Shared plugin view to easily use the inline SVG code and make it available to all your Views:


{%- capture svg_logo %}
<svg>
 ...
</svg>
{%- endcapture %}

Save your Shared view, then we can update the Title Bar in your View(s) using proper src nomenclature, the captured variable (svg_logo in the example) and the Liquid base64_encode filter:

<div class="title_bar">
  <img class="image image-stroke" src="data:image/svg+xml;base64,{{ svg_logo | base64_encode }}" />
...
</div>

Congratulations on making a more robust plugin!

PNG and Base64 Encoding

While its important to properly size your PNG before converting to Base64, it's another option if you don't or can't go the SVG route.

Using a site like Base64.guru allows you to upload a PNG image like this:

Set the Output Format to Data URI, then click to Encode, generating code like this:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAAB/klEQVRIie1Vu6riUBRdeZhEEEXUKkEUA2nEIq2gYJFGwZ+wFMTKQqyudoKF/2ClWCpW+QE70coXtulEFDHZt7rOSKJzbyEDw2zYzdqPddZmn3MYIiK80dh3Nv83CHjHcd5K4KnANE3IsgxZlmHb9ssGyWQSsixjOp16xnkv0OfzIRKJAABWqxWCwSDi8fhDzuFwwPF4RDgcxu12gyAI3iewbZteuSAIZBiGCy+Xy8RxHJ3P55f1ngp2ux2GwyEAwHEc7Pd7dLvdh5z1eg0iQq/XA8/zKJfLUFX1ewomkwmxLPtt5ziOxuOxpwIXwWg0okwmQyzLUrVaJdM0KZFIuJp2Oh0yTZNEUSSWZSmdTtNgMHg+osvlAtu2sd1usVgsAACKokDXdUiS5FKeSqWg6zoYhgEALJdLbDYbnE4ncBz3q+aLqVgs/mgsr7xQKNwVuO6BqqrI5XLeK/fCstksNE1z4S4CwzDQaDR+TFCv11EqlVy455r+bv1+Hyz7/Mmq1Wq43W5P438kqFQq4HnvNCJCvV5/Wc/Ytk0AYFkWLpcLAoEAJEmCZVn4+PjAbDa7JzebTUiShFardcfy+Tza7TYikQiu1yuOxyNEUUQsFntUEI1GH5gVRYGmaZjP5/j69Px+P0RRvL9TAKBpGhRFucdDoZC3gncZ8/9P/usEn7TmdRqwWqbRAAAAAElFTkSuQmCC

Put that inside an <img src="CODE_GOES_HERE"/> tag and you're all set: