https://github.com/simonsinclair/svg-gel-icon-set

Production-ready SVGs
https://github.com/simonsinclair/svg-gel-icon-set

Last synced: 9 months ago
JSON representation

Production-ready SVGs

• Host: GitHub
• URL: https://github.com/simonsinclair/svg-gel-icon-set
• Owner: simonsinclair
• Created: 2015-02-11T14:51:04.000Z (over 11 years ago)
• Default Branch: master
• Last Pushed: 2015-09-21T09:33:07.000Z (almost 11 years ago)
• Last Synced: 2025-09-12T00:44:52.490Z (10 months ago)
• Language: JavaScript
• Homepage:
• Size: 28.7 MB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# SVG GEL Icon Set

An intermediate repository containing Production-ready SVGs from our Global Experience Language icon set. These enable Developers to produce different coloured SVGs, and PNG fallbacks for browsers that do not support them, from a single asset.

## How do I get my SVGs into this repository?

Prerequisites:

- Adobe Illustrator

- ~~SVGO GUI [Download]~~

### 1/3: Preparing artwork from Adobe Illustrator

- Ensure the artwork is black *(RGB 0,0,0)* and sits on a transparent background.

- Select and Copy `CTRL+C` the icon in its entirety.

- Create a New Illustrator document `CMD+N` using the settings shown below for the new artboard:

- ![](support/illus-new-doc.png)

- Paste `CTRL+V` the artwork onto the new artboard, and with it still selected...

- Scale the longest edge to `32px`, being careful not to warp it, so that it fits within the artboard bounds.

- ![](support/illus-longest-edge-32.png)

- Ensuring the icon is still selected, align it to the center of the artboard, both horizontally and vertically, using the Align tool:

- ![](support/illus-center-x-y.png)

### 2/3 Saving

- Save a Copy `ALT+CMD+S` of the artwork and name it by its GEL-prescribed name:

- ![](support/illus-save-a-copy.png)

- Change the Save format to `SVG (svg)` using the dropdown:

- ![](support/illus-save-format.png)

- In the SVG Options panel that pops-up, click `More Options` (if they aren't showing already) and then set them using the following screenshot as a reference before clicking OK:

- ![](support/illus-svg-options.png)

### ~~3/3: Optimising~~

- ~~Open SVGO GUI [Download] and drag the newly-saved file(s) onto the drop-zone. This will optimise the file(s) in-place (replacing them).~~

*Optimising is now done developer-side.*

All done! Please [upload your Production-ready SVGs](https://myshare.app.box.com/files/0/f/3158519203/SVG_GEL_Icon_Set) into the appropriate Box folder.

## Questions?

Please contact:

- Joseph Wynn *(Technical, Implementation)*

- Neil Bramah *(Workflow, Box)*

- Simon Sinclair *(Workflow, Technical)*