Sprites

This repo is to link together all the resources to provide a workflow to work with SVG and raster graphics.

It's still very much a WIP.

Frontend Intalling

1. npm install
2. bower install

Running the tasks

Just run grunt after you have installed.

Features

• Vector Icons - SVG Icons
• Fallback PNG for those vector icons.
• External cacheable SVG "sprite" file using symbol syntax.
• SVG for everyone making it work on lower IE.
• Ability to create critical fallback PNGs for when you modifiy the SVG Styles dramatically.
• Raster Icons - (Icons with heavy textures). No Longer in as it complicates the process
• Ability for colours/size to come through on the fallbacks
• A system to handle the mission critical png
• Work out naming convensions
• Ignore any modifiers
• Don't Strip out colours.
• Set up - Modernizr - rely on "no-svg" not "lt-ie9" for older browsers.
• Error report on dodgy SVG exports

Current Workflow

Suggested Workflow

1. Filled SVG Exported
2. Copy to directory
3. Strip fill content out
4. SVG Store Squish them together.
5. Make PNGs for Filled

Dependancies

1. SVG For Everybody - enables external svg uses on ie9,10,11.

Browser Testing Required

<tr>
    <th align="left">Chrome</th>
    <td colspan="6" align="center">Latest stable</td>
</tr>

<tr>
    <th align="left">Firefox</th>
    <td colspan="6" align="center">Latest stable</td>
</tr>

<tr>
    <th align="left">Safari</th>
    <td align="center">iOS 5</td>
    <td align="center">iOS 6</td>
    <td align="center">iOS 7</td>
    <td align="center">Safari 6.1 </td>
    <td colspan="2" align="center">Safari</td>

</tr>

<tr>
    <th align="left">Android</th>
    <td align="center">2.3</td>
    <td colspan="5" align="center">4</td>
</tr>
<tr>
    <th align="left">Windows</th>
    <td colspan="6" align="center">Windows 8</td>
</tr>

Internet Explorer	6.0	7.0	8.0	9.0	10.0	11.0

Using SVGs in the page

It enables externally linking to an external SVG file using the following syntax:

    <use xlink:href="/theme/images/compiled/vector-sprites-working.svg#icon-clothes"></use>
</svg>```