Why would you do this? Instead of loading an image (jpg/png/svg) per platform, we can simply embed the SVGs into html. In this case, it saves from having 7 http requests and thus helps with website performance. CSS is also inline. The example below uses official brand colors. https://brandcolors.net/ and brand SVG logos from https://simpleicons.org/ … Read more
Found the following links useful https://www.heropatterns.com/ A collection of repeatable SVG background patterns for you to use on your web projects https://www.kisspng.com/ – collection of PNG Files https://simpleicons.org/ – FREE SVG icons for popular brands https://iconsvg.xyz/?ref=producthunt?ref=mdbootstrap.com https://cssgradient.io/gradient-backgrounds/ – Gradient backgrounds
Step 1. Gathering Information: Purpose, Main Goals, and Target Audience This stage, the stage of discovering and researching, determines how the subsequent steps will look like. The most important task at this point is to get a clear understanding of your future website purposes, the main goals you wish to get, and the target audience … Read more
The notable thing ofcourse by using these you don’t require any JS. Meta/Progress – e.g progress bars Pictureset – e.g mobile vs desktop images <Summary> / <detail> – e.g. FAQ Summary/Detail combined can be great for performance to reduce JS/CSS required.
Great tool for SVG optimization, tremendous results… https://github.com/svg/svgo This command will optimize all the SVGs in the target folder (-r recursively) and output them at the output folder (leaving the original SVGs untouched) Example 1 – optimize a folder call svgo -f “D:\code\alif-central\src\images” -r Example 2 – optimize a folder and output to new folder … Read more