Let’s look at the basic shapes we can use to make these that keep the code small and simple. I’ll go through different examples that explore the code of commonly used icons and how we can redraw them using some of the easiest SVG shapes we can make. This way, we get the benefits of smaller, controllable, and semantic icons in our projects without sacrificing quality or visual changes. That’s all fine, but wouldn’t be great if we could solve this at the file level instead of resorting to code-based approaches? I want to focus on a different perspective: how to make the same figures with less code using basic shapes.

Or, if we’re working in a server-side environment, we can always sprinkle in a little PHP (or the like) to extract the contents of the SVG file instead of dropping it straight in. We can work around this reusing chunks of code with the element or apply native variables to manage our SVG styles from one place. In some cases, the code for an inline SVG can be long that it makes a document longer to scroll, uncomfortable to work with, and, yes, a little bit heavier than it needs to be. That’s because they’re “drawn” in code, making them flexible, adaptable, and scalable in any context.īut when working with SVG, there’s always the chance that they contain a lot of unnecessary code.

There are different ways to work with icons, but the best solution always includes SVG, whether it’s implemented inline or linked up as an image file.

Checkmark svg free