djula VS svgo

In this post, we are going to take a look at how to use SVG content or embed SVGs inside your HTML with the Djula templating engine in a Common Lisp web application.

Look at software you use and identify underlying libraries.

SVGO https://github.com/svg/svgo is used by many graphics software but hasn't seen donations commensurate with usage https://opencollective.com/svgo

There are still a lot of things cl-djula-svg is capable of doing. For the immediate future, I am looking at adding optimization capabilities something like what svgo is doing for svgr. If you know anything else needs to be done to improve the package, please open an issue in the repository.

Writing/patching JS/TS-based CLI tools like Prettier or SVGO

svgomg is just a web frontend for svgo. You can run it locally on the command line.

Often, you can considerably reduce the file size of an SVG text file without a noticeable reduction in perceptual quality just by reducing the precision of the coordinates.

The awesome SVG Optimizer [1] has a filter (cleanupNumericValues) to process SVG files to a fixed precision.

The equally awesome SVG Optimizer Missing Gui (SVGOMG) [2] provides a web-based GUI [3] to interactively adjust precision and see the resulting render (and file-size).

[1] https://github.com/svg/svgo

There is a great tool that can optimize an SVG, and it's open-source. It's called SVGO. It also has an interface where you can upload your SVG, toggle some buttons, and check the results in real time. However, beware that some options might change the SVG and lead to undesired changes.

There are a hundred of tools bases in the SVGO Project but for me this website has the best compression is really simple and useful to compress SVGs in seconds. The problem is that does not allow compressing multiple SVGs at the same time and is not going to happen in the future.

For SVG's, we can use the svgo parser, which optimizes the SVG code and outputs a minified result. The default svgo settings are pretty good, but we add removeDimensions to make them responsive and replace the hard coded colors with "currentColor" such that we can color them with React Native styles.