99 lines
3.3 KiB
Markdown
99 lines
3.3 KiB
Markdown
## Design Guidelines
|
|
|
|
The icons in this project follow closely the design guidelines established in the
|
|
[MUTCD Standard Highway Signs guide](http://mutcd.fhwa.dot.gov/ser-shs_millennium.htm),
|
|
2009 edition published by the US Federal Highway Administration.
|
|
|
|
The MUTCD is [in the public domain](http://mutcd.fhwa.dot.gov/knowledge/faqs/faq_general.htm#printq5)
|
|
and as such it is not copyrighted.
|
|
|
|
Each icon should be
|
|
|
|
* 25px x 25px
|
|
* SVG
|
|
* Single color fill
|
|
* Path outline only, no stroke
|
|
* Pixel grid aligned (where possible)
|
|
|
|
### Arrows
|
|
|
|
Arrows use the "Standard Arrow" described in MUTCD Standard Highway Signs
|
|
[Appendix](http://mutcd.fhwa.dot.gov/ser-shs_millennium.htm).
|
|
|
|
An upward facing Standard Arrow is included in this icon pack, and forms the basis of all turn
|
|
lane arrows.
|
|
|
|
<img alt='Standard Arrow' width='300px' src='docs/standard_arrow.png'/>
|
|
|
|
|
|
Arrowhead rotation angles are chosen based on the turn lane indication:
|
|
|
|
<table>
|
|
<tr>
|
|
<th>Through</th>
|
|
<th>Slight Left</th>
|
|
<th>Left</th>
|
|
<th>Sharp Left</th>
|
|
<th>Reverse Left</th>
|
|
</tr>
|
|
<tr>
|
|
<td>no rotation<br/>
|
|
<img alt='Through' width='100px' src='https://cdn.rawgit.com/openstreetmap/lane-icons/master/docs/through.svg'/>
|
|
</td>
|
|
<td>45 degrees<br/>
|
|
<img alt='Slight Left' width='100px' src='https://cdn.rawgit.com/openstreetmap/lane-icons/master/docs/slight_left.svg'/>
|
|
</td>
|
|
<td>70 or 90 degrees<br/>
|
|
<img alt='Left' width='100px' src='https://cdn.rawgit.com/openstreetmap/lane-icons/master/docs/left.svg'/>
|
|
</td>
|
|
<td>135 degrees<br/>
|
|
<img alt='Sharp Left' width='100px' src='https://cdn.rawgit.com/openstreetmap/lane-icons/master/docs/sharp_left.svg'/>
|
|
</td>
|
|
<td>180 degrees<br/>
|
|
<img alt='Reverse Left' width='100px' src='https://cdn.rawgit.com/openstreetmap/lane-icons/master/docs/reverse_left.svg'/>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
|
|
As the number of arrows increases, the arrows scale down:
|
|
|
|
<table>
|
|
<tr>
|
|
<th>1 Arrow</th>
|
|
<th>2 Arrows</th>
|
|
<th>3 Arrows</th>
|
|
<th>4 Arrows</th>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<ul><li>3px stroke</li><li>standard arrowhead</li></ul>
|
|
<img alt='Through' width='100px' src='https://cdn.rawgit.com/openstreetmap/lane-icons/master/docs/through.svg'/>
|
|
</td>
|
|
<td>
|
|
<ul><li>2.5px stroke</li><li>83% scaled arrowhead</li></ul>
|
|
<img alt='Left, Through' width='100px' src='https://cdn.rawgit.com/openstreetmap/lane-icons/master/docs/left-through.svg'/>
|
|
</td>
|
|
<td>
|
|
<ul><li>2.25px stroke</li><li>75% scaled arrowhead</li></ul>
|
|
<img alt='Left, Slight Left, Through' width='100px' src='https://cdn.rawgit.com/openstreetmap/lane-icons/master/docs/left-slight_left-through.svg'/>
|
|
</td>
|
|
<td>
|
|
<ul><li>2px stroke</li><li>66% scaled arrowhead</li></ul>
|
|
<img alt='Reverse Left, Left, Slight Left, Through' width='100px' src='https://cdn.rawgit.com/openstreetmap/lane-icons/master/docs/reverse_left-left-slight_left-through.svg'/>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
|
|
|
|
Other important rules for arrows:
|
|
* Bottom aligned with each other, 2px from icon bottom edge
|
|
* Left-right centered
|
|
* Smooth curves, no kinks
|
|
* Arrow shaft path connects to the arrowhead anchor point
|
|
|
|
|
|
### Other Icons
|
|
|
|
Other non-arrow icons (bus, hov, pedestrian, tram, etc) also imitiate the icons found
|
|
in the MUTCD Standard Highway Signs [Appendix](http://mutcd.fhwa.dot.gov/ser-shs_millennium.htm).
|