iD/svg/iD-sprite

These folders contain graphics used by iD.

Overview

To add a graphic, create a .svg file and save it anywhere under here.

Some guidelines:

• icons/: 20x20px solid fill-only, used throughout iD
• operations/: 20x20px solid fill-only, used as commands
• presets/: 60x60px large preset icons
• turns/: various sizes, graphics for turn restrictions
• graphics/: miscellaneous stuff

Controlling colors with CSS

We often use CSS to override the fill colors of the graphics. In your SVG graphics, you can allow up to two override-able colors by using the following magic color values:

• fill="currentColor"
• fill="inherit"

For example, in operation-reflect-long.svg:

<svg version="1.1" x="0" y="0" width="20" height="20" viewBox="0 0 20 20">
    <path d="M9,18 L11,18 L11,2 L9,2 L9,18 z" fill="currentColor"/>
    <path d="M13,14 L13,6 L18,6 L18,8 L15,8 L15,14 M5,14 L5,8 L2,8 L2,6 L7,6 L7,14" fill="inherit"/>
</svg>

Elsewhere, in CSS:

.flash-icon.operation use {
    fill: #222;     /* overrides the `inherit` */
    color: #79f;    /* overrides the `currentColor` */
}
.flash-icon.operation.disabled use {
    fill: rgba(32,32,32,0.7);       /* overrides the `inherit` */
    color: rgba(40,40,40,0.7);      /* overrides the `currentColor` */
}

This gives iD a lot of flexibility to control the runtime styling of the graphics.

The above example means that classing a button as .disabled will automatically grey out the colors (you don't need to make separate grey versions of every button).