Using Custom Fonts With SVG in an Image Tag
When we produce a PNG image, we use an <img> tag or a CSS background, and that's about it. It is dead simple and guaranteed to work.
PNG is way simpler to use in HTML than SVGUnfortunately, the same cannot be said for SVG, despite its many advantages. Although you're spoiled for choices when using SVG in HTML, it really boils down to inline, <object> and <img>, all with serious gotchas and trade-offs.
Problems with inline SVG
If you're inlining SVG, you lose the ability to use browser cache, Gzip compression between servers and browsers, and search engine image indexing (inline SVG is not considered as an image). Even though your image may not have changed one bit, they are always reloaded and this causes slower loading times for your website, a trade-off that most are n...