...the difference between raster images (like .png, .jpg and .webp) and vector images (like .svg). Understand why a print designer talks a lot about physical measurements like "cm" and "DPI...
...weaknesses of the following file formats: Rasterized formats: webp, png, jpg, gif Vector format: svg Read why we want to use WebP instead of PNGs and JPGs in the future...
Best results in other decks
...lorempixel or placehold.it you may generate test images yourself. Here we build a simple SVG image and wrap it into a data: URI. All browsers support SVG, and you can...
...Simple solution in modern JavaScript, e.g. for use in the client's browser: function svgUri(text) { let svg = ` ${text} ` return 'data:image/svg+xml;charset=utf8,' + window.escape(svg) } See the attached...
SVG files often contain redundant information, like editor metadata or hidden elements. When esbuild handles your static assets, you can easily optimize SVG files using svgo as a plugin. Here...
...is how to do it. Adding svgo as an esbuild plugin Add the svgo package to your project's package.json Adjust your esbuild.config.js like so: const esbuild = require('esbuild')