Skip to content
A GUI app to the SVGO library with the addition of creating SVG sprite sheets.
Branch: master
Clone or download
Latest commit 2e04e45 Nov 29, 2017
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.readme
app
build
.editorconfig
.gitignore Add the build process Dec 18, 2016
CHANGELOG.md
LICENSE
README.md
package.json
spritebot.js Disable the undo actions when a sprite is focused Jul 21, 2017
yarn.lock

README.md

Spritebot

Your awkwardly ostentatious optimizing robot.

This application is essentially a GUI wrapper around SVGO, but without all the configuration of SVGOMG.

I was inspired to create it because my students needed a simpler SVG batch processing tool since SVG-GUI isn’t maintained any more.

The additional feature Spritebot brings, that isn’t available in the other tools, is the generation of SVG sprite sheets.

Built with Javascript, Node.js & Electron.


Download

Download the latest version of Spritebot below:

⬇ Download for MacOS

⬇ Download for Windows


Using the sprite sheets

The sprite sheets that Spritebot creates will have <symbol> tags for each active SVG that’s been added into Spritebot.

If the SVGs are reverted to their original, unoptimized format they will not be included in the sprite sheet.

The id for each <symbol> will be the SVGs filename without the .svg extension.

Using an external SVG image file

Save the sprite sheet into your images folder. Then, in your HTML, you can use the SVG <use> statement to display a single sprite at a time:

<svg><use xlink:href="images/sprite-sheet.svg#icon-green" /></svg>

Using sprites pasted into HTML

You can paste the sprite sheet into your HTML file directly, then use the sprites from there.

I suggest hiding the <svg> tag with the hidden attribute, like so:

<svg hidden>
  ⋮
</svg>

Then further down, in your HTML you can use a single sprite with the <use> statement:

<svg><use xlink:href="#icon-green" /></svg>

More tutorials…

Check out the lessons & tutorials I use for my students for more details information.


License & copyright

© 2017 Thomas J Bradley — GPL.

You can’t perform that action at this time.