Invest into SVGs, they are top fancy
The quote above may be ironic, maybe even exaggerated, but it contains a bit of truth.
ScalableVectorGraphics are a way to draw an image, not with pixels, but with… math(s). Curves, lines, polygons and all those fancy math(s) things, you all know and love. If you open an svg like this one here and click “view page source” you will be greeted by tags, comparable to HTML, but this time it’s not p,h1 or div tags - but path and g tags in an <svg> root. You can do some fancy stuff with those, use turtle-like graphics, curves etc. to define a shape that you can zoom into with infinite resolution (or at least nearly infinite).
While that’s all good and cool the real reason I prefer SVGs over all the other formats are not rooted in any of those technical reasons, but in:
The simplest reason: a rect over any size takes only those few chars required for the polygon-tag and not data per pixel, this holds for all elements of SVG, the files are tiny in comparison to their PNG-rendered versions
Don’t like the color of that cat-ear? Want to match the fill pixel-perfect to your slide-deck theme? SVGs got ya’ covered: just change one or two fill= directives and done.
Instead of copying gigantic amounts of pixels, blitting and filling buffers you just do some string-manipulation. It’s faster and as a bonus: the Tag-based definitions of SVG map cleaner to generated content than pixels ever could.
Because i build a system that does exactly what i described above: It generates SVG-files from a template, and fast. You might seen it’s output already on your way here…
I am (obviously, duh :) ) talking about the tool building my OpenGraph preview images. If OpenGraph doesn’t click, then “embed previews” most likely will though. The page previews for social media all contain page title, subtitle and page link as well as a colored edge for the page-type up top.
Take a look at the following diagram that describes how the entire build chain works, triggered by a page-build or content-change
The reason for the Temp-files and Inkscape dependency is explained by the sad fact that OpenGraph doesn’t like embedding SVGs, and the Inkscape conversion is fast enough.
Using templating-engines for HTML is a widely used practice (go find a bigger page that is not doing it, I’ll wait)… so why not for other content as well. Even if this is just a minimal and limited usecase it’s none the less a light up the path to bigger, fancier things that may or may not lie up the path of procedural images.
