SVG spritesheet maker
ssm is a command-line tool for creating and managing SVG spritesheets. It has 5 main functions:
- create: For creating spritesheets from a list of SVG sprites (i.e. SVG icons etc.).
- list: For listing the SVG sprites stored in a spritesheet.
- add: For adding SVG sprites to an existing spritesheet.
- remove: For removing SVG sprites from an existing spritesheet.
- export: For exporting SVG sprites from an existing spritesheet; Can be used for converting a
<symbol>
back into a standalone<svg>
or to display a format suitable for use in HTML (using<use>
).
For more details, run ssm -h
after installation.
To install the most stable version of this package, run:
$ pip install ssm-svg
Create spritesheet icons.svg
with search.svg
and menu.svg
as sprites:
$ ssm create -f icons.svg search.svg menu.svg
$ cat icons.svg
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<symbol id="search" viewBox="0 0 24 24">...</symbol>
<symbol id="menu" viewBox="0 0 24 24">...</symbol>
</defs>
</svg>
Create spritesheet and overwrite existing file (with the -F
option):
$ ssm create -f icons.svg search.svg menu.svg -F
Create spritesheet containing search.svg
and menu.svg
, with custom ID hamburger-icon
for menu.svg
(instead of defaulting to its file name):
$ ssm create -f icons.svg search.svg hamburger-icon=menu.svg -F
$ cat icons.svg
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<symbol id="search" viewBox="0 0 24 24">...</symbol>
<symbol id="hamburger-icon" viewBox="0 0 24 24">...</symbol>
</defs>
</svg>
List IDs of sprites in spritesheet:
$ ssm list -f icons.svg
hamburger-icon
search
Add facebook.svg
and instagram.svg
to spritesheet:
$ ssm add -f icons.svg facebook.svg instagram.svg
$ cat icons.svg
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<symbol id="search" viewBox="0 0 24 24">...</symbol>
<symbol id="hamburger-icon" viewBox="0 0 24 24">...</symbol>
<symbol id="facebook" viewBox="0 0 24 24">...</symbol>
<symbol id="instagram" viewBox="0 0 24 24">...</symbol>
</defs>
</svg>
Remove sprites with IDs facebook
and instagram
from spritesheet:
$ ssm remove -f icons.svg facebook instagram
$ cat icons.svg
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<symbol id="search" viewBox="0 0 24 24">...</symbol>
<symbol id="hamburger-icon" viewBox="0 0 24 24">...</symbol>
</defs>
</svg>
NOTE: Inserting the same ID more than once would cause an error.
Add facebook.svg
to spritesheet with custom ID fb-icon
(instead of defaulting to its file name):
$ ssm add -f icons.svg fb-icon=facebook.svg
$ cat icons.svg
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<symbol id="search" viewBox="0 0 24 24">...</symbol>
<symbol id="hamburger-icon" viewBox="0 0 24 24">...</symbol>
<symbol id="fb-icon" viewBox="0 0 24 24">...</symbol>
</defs>
</svg>
Export sprite with ID menu
from spritesheet:
$ ssm export -f icons.svg menu
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<!-- "menu" SVG elements -->
</svg>
Export sprite with ID menu
from spritesheet for use in HTML:
$ ssm export -f icons.svg menu --use
<svg><use href="icons.svg#menu"></use></svg>
Export sprites with IDs search
and menu
from spritesheet as exported_files/search.svg
and exported_files/menu.svg
respectively:
$ ssm export -f icons.svg --dir exported_files search menu
$ cat exported_files/search.svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<!-- "search" SVG elements -->
</svg>
$ cat exported_files/menu.svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<!-- "menu" SVG elements -->
</svg>