As of 2020, SVG still has lots of hurdles in the HTML world. For those unfamiliar with SVG it is a Scalable Vector Graphic that doesn’t pixelate because it is an XML file with instructions like “start black here and go to here” These are not actual commands they look more like this [path fill=”none” stroke=”#000000″ stroke-width=”1.751″ stroke-linecap=”round” stroke-linejoin=”round” d=”M365.534,316.299L334.018,316.299L334.018″ class=”wOiKZeeF_7″>]}. Most of all because while as illustrators, we love SVG and they can be quite small in file size, they do not handle more complicated things like a coat of arms for instance in their html home away from home and they have to be simplified a bit before you can use tools to compress or animate them like this:
But as you can see the HTML is still having trouble deciding the right container size, so I end up with a lot of whitespace which means manually editing the file, which is a great feature but not practical day to day or in high usage situations. And notice how it is missing the staff, that is because animation requires me to inline the graphic like this:
And the reason you see nothing is because WordPress doesn’t play nicely with SVG, even with the best SVG Plugins available. So I guess I just wait and they’ll eventually make it seemless.