Embedding SVG Icons with Twig Macro
Before we start diving into embedding SVG icons using Twig macros, let's discuss what a Twig macro is. If you read Twig's documentation, Macros are defined as follows:
Macros are comparable with functions in regular programming languages. They are useful to put often used HTML idioms into reusable elements to not repeat yourself.
Here is a small example of a macro that renders a form element:
Using Scalable Vector Graphics as Button Backgrounds
Last night I was working on a project where the mockups called for some assymetrical button shapes that were all different sizes. Rather than creating a half a dozen background images for each button length, I wondered if I might just use an SVG or Scalable Vector Graphic file as the background which I could then stretch as needed. As you know, there's no penalty of pixelation when stretching SVGs because they are not based on pixels. This would also save a lot of load time on the site, as I can load one vector image instead of half a dozen pixel-based images.