From befb425c920386fce62b649d43a7a556eb3d3ace Mon Sep 17 00:00:00 2001 From: Taurie Davis Date: Tue, 9 Aug 2016 21:57:46 +0000 Subject: Add svg guidelines to ui guide --- doc/development/ui_guide.md | 36 ++++++++++++++++++++++++++++++++++++ 1 file changed, 36 insertions(+) (limited to 'doc') diff --git a/doc/development/ui_guide.md b/doc/development/ui_guide.md index 65252288019..ca82e9182f7 100644 --- a/doc/development/ui_guide.md +++ b/doc/development/ui_guide.md @@ -47,6 +47,42 @@ information from database or file system * `rss` for rss/atom feed * `plus` for link or dropdown that lead to page where you create new object (For example new issue page) +### SVGs + +When exporting SVGs, be sure to follow the following guidelines: + +1. Convert all strokes to outlines. +2. Use pathfinder tools to combine overlapping paths and create compound paths. +3. SVGs that are limited to one color should be exported without a fill color so the color can be set using CSS. +4. Ensure that exported SVGs have been run through an [SVG cleaner](https://github.com/RazrFalcon/SVGCleaner) to remove unused elements and attributes. + +You can open you svg in a text editor to ensure that it is clean. +Incorrect file will look like this: + +```xml + + + + Group + Created with Sketch. + + + + + + + + + + +``` + +Correct file will look like this: + +```xml + +``` + ## Buttons -- cgit v1.2.1