Elysia Tools
Navigation
Workflow Playbook
Clean an approved icon set, choose inline or external SVG references, verify identifiers and coloring on the real page, and export individual raster fallbacks.
Hubs
This workflow is for a frontend developer delivering a reusable interface icon set. Keep one approved standalone SVG per source, with its intended role and small display size. Inspect those masters with svg-minifier-analyzer and compare the visual result after optimization. Review missing viewBox values before assembly; a rectangle inferred from dimensions may still clip an offset drawing. Keep gradients, masks and clip paths in the inventory. Browser-tab icons and app manifests belong in svg-favicon-icon-workflows, which has a different delivery checklist.
Use svg-sprite-generator for a batch of up to 30 files. Select a namespace prefix and document the generated IDs instead of assuming filenames survive unchanged. Deduplication compares viewBox and whitespace-normalized content, so record removed duplicates and update consuming references accordingly. Unique top-level IDs do not namespace every internal gradient or clip-path ID; inspect those references across the set. Preserve multicolor art. If stripping monochrome colors, recheck hollow shapes and explicitly choose fill or stroke behavior on the consumer. Removing fill=none can change the drawing.
For symbol mode, insert the downloaded sprite once and reference the generated symbol IDs. For external mode, place the file at the final application asset path and confirm which emitted fragment or group the consumer actually references. Treat usage snippets as a starting point and test every icon, including the last item in the set. A correct isolated preview does not prove the deployed reference works. Check light and dark backgrounds, active states and small sizes. The tool removes scripts and event attributes, but this does not establish comprehensive sanitization of arbitrary SVG. Use reviewed artwork. Give icon-only controls a meaningful accessible name and handle decorative icons separately.
If the destination needs raster assets, use svg-to-png or svg-to-webp on each accepted standalone master. Do not convert a hidden symbol collection and expect a visible contact sheet. Check actual pixel dimensions, alpha and legibility at the intended UI size, then deliver the sprite, source-to-ID map, required fallbacks and integration test notes together. Investigate unexpected cascade behavior with css-authoring-layout-and-cascade-workflows; continue the full page accessibility review with web-accessibility-audits.
Workflow playbook
Analyze each SVG, compare before and after optimization and keep approved geometry, colors and a usable viewBox in a recoverable master.
Merge the reviewed files with the chosen mode and prefix, review duplicate removals and inferred viewBox warnings, and inspect internal gradient or clip-path references.
Adapt generated usage examples to the deployed file and actual fragment targets; test every retained icon, UI state and accessible control label in the application.
Render the accepted standalone SVG masters as PNG for compatibility or WebP for supported destinations, then check dimensions, alpha and small-size readability.
Choose symbol mode for a sprite inserted once into the page. Choose the external path only after confirming the generated fragment target and deployment URL on the actual application.
Preserve authored colors for multicolor art. Strip color only for reviewed monochrome shapes, then define and test their intended fill or stroke; removal can erase fill=none semantics.
Export PNG or WebP from the accepted standalone icon when a destination cannot use the sprite. Do not rasterize the hidden symbol collection as if it were one visible image.