SVG and JavaScript Image Placeholders

The Fine Art of Web Development by Martin Ivanov

Web developers love online services like lorempixel, placeimage and especially placekitten. They save us time during the initial coding of a website or service, providing customizable image placeholders so we can concentrate on the actual coding of the product instead of searching for suitable stock images. All of these services, however have one thing in common – they require Internet connection, which in my case is not always lightning fast. This is why I decided to create a similar service, which runs fully in the browser – AcidJs.ImgPlaceholder – a tiny JavaScript class (only 2Kb minified and g-zipped), utilizing base64-encoded SVGs and fully configurable via *-data properties.

render – The method is invoked automatically on page load, but it can be called also manually to create image placeholders on demand.

Supported Browsers

Any SVG-capable browser.

Check the AcidJs.ImgPlaceholder here. If you are also looking for similar text placeholders you may also want to give a try to XLipsum – a HTML5 WebComponent that can generate Lorem Ipsum texts in various formats.