SVG Style Guide: Difference between revisions

Latest revision as of 13:29, 31 July 2025

This article covers how SVG files from The Noun Project should be prepared for use in Foundry.

Files are generally either 100px (older) or 1,200px (newer). They should always be adjusted to 100px, with the content's maximum dimensions being expanded to 95px (length or width, which ever is greater) and centered in the canvas. Each element should have a 1px outer stroke in black (#000000).

Colors

Most icon types will be Default Grey, while those intended to be used with Condition Lab & Triggler status effects should be Conditionally White unless another appropriate color presents itself.

Default Gray
#CCCCCC

Conditionally White
#FFFFFF

Sequence of Seven Ate Nine

Use these colors when items have generally similar effects and icons, only differentiated by rating — commlinks, rigger control consoles, cyberdecks, and so on.

0th Order White^[1]
#FAFAFA

1st Order Purple
#CC66CC

2nd Order Blue
#6666CC

3rd Order Green
#66CC66

4th Order Yellow
#CCCC66

5th Order Orange
#AA6633

6th Order Red
#CC6666

7th Order Grey
#666666

8th Order Black
#333333

Glorious Purpose

Adept Three-Part Cyan
#66CCCC

Bioware Blue
#33CCCC

Cyberware Grey
#CCCCCC

Low-Light Blue
#0066CC

Matrix Green
#33CC99

Mystical Purple
#CC00CC

Technomancy Gold
#CC9933

Thermographic Orange
#CC6600

Positive Quality Green
#00CC00

Negative Quality Red
#CC0000

Notes

↑ Older icons use #FFFFFF, but it's not worth the aggravation of updating them all.

[1] Older icons use #FFFFFF, but it's not worth the aggravation of updating them all.

[1]

@@ Line 1: / Line 1: @@
-[[Category:Style Sheet]]__NOTOC__
+[[Category:Style Guide]]
+This article covers how SVG files from [https://thenounproject.com/ The Noun Project] should be prepared for use in Foundry.
-==Dimensions==
+Files are generally either 100px (older) or 1,200px (newer). They should always be adjusted to 100px, with the content's maximum dimensions being expanded to 95px (length or width, which ever is greater) and centered in the canvas. Each element should have a 1px outer stroke in black ({{Code|#000000}}).
-{{Table:SVG Dimensions}}
-SVG files from [https://thenounproject.com/ The Noun Project] are generally either 100px (older) or 1,200px (newer). The starting canvas size determines a number of parameters that should be used for the contents.
-Regardless of the size, the content should be centered within the canvas and the outer stroke is black ({{Code|#000000}}).
-{{Clear}}
 ==Colors==
-Most icon types will be '''Default Grey''', while those intended to be used with [https://foundryvtt.com/packages/combat-utility-belt Combat Utility Belt] status effects should be '''CUB White''' unless another appropriate color presents itself.
+Most icon types will be '''Default Grey''', while those intended to be used with [https://foundryvtt.com/packages/condition-lab-triggler Condition Lab & Triggler] status effects should be '''Conditionally White''' unless another appropriate color presents itself.
 <div style="display: flex; flex-wrap: wrap;">
 {{Color|Default Gray|CCCCCC}}
-{{Color|CUB White|FFFFFF}}
+{{Color|Conditionally White|FFFFFF}}
 </div>
 ===Sequence of Seven Ate Nine===
+Use these colors when items have generally similar effects and icons, only differentiated by rating &mdash; commlinks, rigger control consoles, cyberdecks, and so on.
 <div style="display: flex; flex-wrap: wrap;">
 {{Color|0th Order White<ref>Older icons use {{Code|#FFFFFF}}, but it's not worth the aggravation of updating them all.</ref>|FAFAFA}}
@@ Line 20: / Line 17: @@
 {{Color|3rd Order Green|66CC66}}
 {{Color|4th Order Yellow|CCCC66}}
-{{Color|5th Order Orange|CC6600}}
+{{Color|5th Order Orange|AA6633}}
 {{Color|6th Order Red|CC6666}}
 {{Color|7th Order Grey|666666}}
@@ Line 28: / Line 25: @@
 ===Glorious Purpose===
 <div style="display: flex; flex-wrap: wrap;">
+{{Color|Adept Three-Part Cyan|66CCCC}}
 {{Color|Bioware Blue|33CCCC}}
 {{Color|Cyberware Grey|CCCCCC}}
+{{Color|Low-Light Blue|0066CC}}
 {{Color|Matrix Green|33CC99}}
+{{Color|Mystical Purple|CC00CC}}
+{{Color|Technomancy Gold|CC9933}}
+{{Color|Thermographic Orange|CC6600}}
 {{Color|Positive Quality Green|00CC00}}
 {{Color|Negative Quality Red|CC0000}}