SVG Image optimisations and caching from s3

If you have been using svg image in your projects, you might have sure observe the downside which is its huge size compared to other image formats, since svg is a go-to image format where image quality will be always be the same irrespective of the container size.

Here are few tricks and tips to optimise svg images to be the best minimal size

Steps

1. Optimisation: After extracting svg from the figma design, optimise its size from below websites before using it in your code, these websites removes any unwanted attributes or do some conversions to reduce the image size
   SVG Cleaner
   SVG Viewer

2. Compression: Gzip Compress file using below methods
   Commands - gzip Command Examples in Linux – The Geek Diary
   Run this command in terminal ( gzip --best <filename>)

   Online tool - GZIP decompress/compress files from your browser

   You can also brotli compression which is compatible in all modern web browsers

3. Remove the .gz extension from the file name

4. Upload to s3: Upload the compressed svg object with metadata (System Defined, Content-Encoding: gzip)) to the s3 bucket

5. Finally you can access the image using cloudfront url, the image will be served in gzip compressed format

Tada! You're all set now!!
Happy Learning 🌟