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
1and Simplify to10Simple, one-color (non-black) image: Colors to
2and Simplify to0
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!