...
- Icons must be delivered to us in SVG file format.
- The SVGs files should meet the following technical qualifications:
No SVG elements except for paths.
- Flatten the SVG as much as possible.
Avoid groups or transforms if possible. No guarantee for icons working with complex groups and transforms.
- Don't use "shadow" and "stroke" effects. Flatten strokes into geometries with fill instead.
- Use only flat fills, not gradients or transparency.
Try to use consistent width/height boxes for all submitted icons
- Units must be in pixels.
- Don't use styles, but instead use attributes for color colour styling.
Bad: <style>.mystyle{fill: #FC0}</style>
Good: <path fill="#fc0">
...
The exact sizing of the icons in the resulting maps can vary, as we do scaling of icons to fit the maps.
But a rule of thumb is to design the icons to be displayed at a size between 20x20 and 30x30.
You do, however, control the relative sizing of the icon by the size of icon in relation to it's its viewport. The amount of "white spacing" around the icon when exporting it, decides the resulting size.
Rule of thumb: 16% buffer. 34x34 in a 50x50 box
Our rule - of - thumb is to have icons designed as 34x34 in a 50x50 box, and then adjusting individually as necessary. That should result in around 16% whitespace on each side of the icon.
Example:
Design Icons to be displayed on non-white backgrounds
...
Another tip is to design the icons such that they can be placed on non-white backgrounds.
...
Don't have transparent "holes" in your icons. Test your icons on top of a color coloured background and see that nothing of the background is visible through your icon.
...
Adding a thin, white border around the icons will make them more legible when placed on top of various patterned/colourful backgrounds.
Example:
Questions? Need help?
...
Don't hesitate to send us an email at support@mazemap.com