This online tool stemmed from webpage authoring where hosts disable the keep-alive HTTP headers forcing a new connection for each resource. A way to combine many arbitrary images in a single SVG file to reduce network overhead was needed, something that did all the necessary positioning and dimension calculating.
SVG Spritesheet Builder is a simple web app for creating SVG spritesheets from uploaded images, supporting PNG, JPG, SVG, WEBP, and AVIF formats.
With intuitive drag-and-drop uploading and rearranging, you can easily add your images and choose between custom sizing or preserving original dimensions for pixel-perfect results. The app lets you configure spacing, number of columns, and sprite naming, and generates optimized downloadable SVG spritesheets with clean code all processed client-side for privacy and accessibility.
The app provides a real-time preview as you build, making it even easier to fine-tune your spritesheet before downloading.
Rather than using background positioning to display each image, the HTML and CSS code to use shows how to reference each image via a fragment identifier in the img() of background-image or src of img tags. But you can also use it as the src of an iframe, or even as the poster attribute of a video.
Comments with suggestions, and also code contributions are welcome!
GitHub repo
Top comments (0)