Giter Club home page Giter Club logo

spritebot's Introduction

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:


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.

spritebot's People

Contributors

thomasjbradley avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

spritebot's Issues

Copy <use> statment on previous sprite doesn’t work

When a sprite is selected and the "Copy statement" menu is triggered it doesn’t copy that specific sprite, but the whole SVG itself.

screen shot 2018-01-18 at 10 33 28 am

Should also double check all the other copy commands do the correct thing too.

Re-dropping a file

If a file has been already processed and it is dropped into the interface again it should be reprocessed.

Allow dropping of previous sprite sheets

I think it'd be really great to be able to drop previously created sprite sheets and have Spritebot show all the symbols within (maybe as some sort-of sub-file type interface).

Symbols could the be added and removed to/from the sprite sheet. It'd be a much better user experience than having to completely regenerate the sprite sheet on every change.

Doubling IDs

When making symbols sometimes the ID doubles if there was already an ID on the SVG tag. Because I’m just using string replacement and not a full parser.

Should maybe remove all IDs from the SVG tag and replace them with Spritebot’s.

Spritebot Not Generating SVG Spite Sheet

Hey,

I am trying to use this tool, which from tutorials looks amazing, but after loading my SVGs and then clicking on the "Save Sprite Sheet" button nothing happens. I was hoping you could help me figure out why that may be.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.