diff options
| author | Clement Ho <clemmakesapps@gmail.com> | 2018-11-01 15:19:22 +0000 |
|---|---|---|
| committer | Clement Ho <clemmakesapps@gmail.com> | 2018-11-01 15:19:22 +0000 |
| commit | 6848c4f93c7727d6975632135a04c5633c1781f1 (patch) | |
| tree | 79de7b002747e9906e7563a81bba5a1f1979b679 /doc/development/ux_guide | |
| parent | ccd8cd283c4fade866542ea70caed770f675940c (diff) | |
| parent | d3a407d66fa553f3ff8afd1b9e42f01b9912e14a (diff) | |
| download | gitlab-ce-gl-ui-tooltip.tar.gz | |
Merge branch 'master' into 'gl-ui-tooltip'gl-ui-tooltip
# Conflicts:
# app/assets/javascripts/commons/gitlab_ui.js
Diffstat (limited to 'doc/development/ux_guide')
| -rw-r--r-- | doc/development/ux_guide/tips.md | 18 |
1 files changed, 7 insertions, 11 deletions
diff --git a/doc/development/ux_guide/tips.md b/doc/development/ux_guide/tips.md index 8348de4f8a2..ceb9ed56ac4 100644 --- a/doc/development/ux_guide/tips.md +++ b/doc/development/ux_guide/tips.md @@ -1,20 +1,16 @@ # Tips -## Contents -* [SVGs](#svgs) - ---- - ## 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. +1. Use pathfinder tools to combine overlapping paths and create compound paths. +1. SVGs that are limited to one color should be exported without a fill color so the color can be set using CSS. +1. 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 your SVG in a text editor to ensure that it is clean. -You can open your svg in a text editor to ensure that it is clean. Incorrect files will look like this: ```xml @@ -35,10 +31,10 @@ Incorrect files will look like this: </svg> ``` -Correct file will look like this: +Correct files will look like this: ```xml <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 17" enable-background="new 0 0 16 17"><path d="m15.1 1h-2.1v-1h-2v1h-6v-1h-2v1h-2.1c-.5 0-.9.5-.9 1v14c0 .6.4 1 .9 1h14.2c.5 0 .9-.4.9-1v-14c0-.5-.4-1-.9-1m-1.1 14h-12v-9h12v9m0-11h-12v-1h12v1"/><path d="m5.4 11.6l1.5 1.2c.4.3 1.1.3 1.4-.1l2.5-3c.3-.4.3-1.1-.1-1.4-.5-.4-1.1-.3-1.5.1l-1.8 2.2-.8-.6c-.4-.3-1.1-.3-1.4.2-.3.4-.3 1 .2 1.4"/></svg> ``` -> TODO: Checkout [https://github.com/svg/svgo](https://github.com/svg/svgo) +> TODO: Checkout <https://github.com/svg/svgo>. |