広告が嫌いですか? 行く広告なし今日 

SVG Sprite Sheet Generator

開発者数学

広告・取り除く？

入力

出力

クライアント側

Upload SVG files and click Generate to create a sprite sheet.

Sprite Sheet SVG

Usage Snippet Type

Usage Snippets

Inline HTML Snippet

広告・取り除く？

ガイド

SVG Sprite Sheet Generator

Combine multiple SVG files into a single sprite sheet for efficient icon loading. Upload your SVGs via drag-and-drop, preview them in a grid, edit symbol IDs, and download a combined sprite file ready for production. Get usage code snippets for external, inline, and CSS background approaches. Optionally strip fills and strokes for CSS-colorable icons, and remove editor metadata to reduce file size.

使い方

Drag and drop your SVG icon files onto the upload area or click to browse. Each SVG is parsed and displayed in a preview grid with its auto-generated symbol ID. Edit any symbol ID by clicking on it. Toggle the optimization options to strip fills/strokes or remove metadata. Click generate to combine all icons into a single sprite sheet. Download the combined SVG file or copy the inline HTML. Use the generated code snippets to reference individual icons in your project.

特徴

Drag-and-Drop Upload – Upload multiple SVG files at once with drag-and-drop or file picker
Icon Preview Grid – See all uploaded icons displayed in a responsive grid with labels
Editable Symbol IDs – Auto-generated from filenames, click to customize before combining
Sprite Sheet Generation – Combines SVGs into a single file using symbol elements with viewBox preservation
Usage Code Snippets – Get ready-to-use code for external reference, inline reference, and CSS background methods
Fill/Stroke Removal – Strip fill and stroke attributes for icons you want to color with CSS
Optimization – Remove comments, metadata, and editor namespaces to minimize file size
File Size Comparison – See individual vs combined file sizes and the space savings

広告・取り除く？

 よくある質問

What is an SVG sprite sheet and why should I use one?

An SVG sprite sheet is a single SVG file that contains multiple icons defined as symbol elements. Instead of loading 20 separate SVG files (20 HTTP requests), you load one sprite file and reference individual icons with the use element. This reduces HTTP requests, improves page load performance, and makes icon management easier. Each symbol preserves its own viewBox so icons render at the correct proportions. Sprite sheets are especially valuable for websites with many icons across multiple pages.
What is the difference between external and inline sprite references?

External reference uses a separate sprite SVG file and references icons with href pointing to the file path plus the symbol ID, like sprite.svg#icon-name. The browser loads the sprite file once and caches it. Inline reference embeds the entire sprite SVG directly in the HTML page (usually hidden) and references icons with just the hash and ID. Inline sprites work immediately without an extra file request but increase HTML size and cannot be cached separately. External sprites are better for multi-page sites while inline works well for single-page applications.
Why would I remove fills and strokes from SVG icons?

Removing fill and stroke attributes from SVG icons allows you to control their color entirely with CSS. This is essential for icon systems where icons need to change color on hover, in dark mode, or across different UI contexts. Without removing the original attributes, CSS color changes may not work because inline SVG attributes have higher specificity than CSS rules. The fill/stroke removal option in this tool strips these attributes so you can set colors using CSS fill and stroke properties or the currentColor keyword.
How are symbol IDs generated from filenames?

The tool converts each filename to a URL-safe symbol ID by removing the .svg extension, converting to lowercase, replacing spaces and special characters with hyphens, and removing consecutive hyphens. For example, My Icon (v2).svg becomes my-icon-v2. You can edit any generated ID before combining. Each ID must be unique within the sprite sheet since it serves as the reference identifier when using the icon. Meaningful IDs like icon-arrow-right or icon-close make your code more readable than generic names.