=============================================================================== diagrams/ - shared SVG diagrams =============================================================================== Line drawings for slides and teaching material. Flat folder, same as images/. The difference from images/ is that these are STYLED FROM OUTSIDE. A diagram file holds geometry and class names; all colour, weight, radius and font live in framework/agDiagrams.css. Change that one file and every diagram here follows, including ones drawn years earlier. That works because of the second line of every .svg: Copy _template.svg to start a new diagram and it is already there. FULL REFERENCE, with every colour and class rendered: framework/agDiagramsGuide.html - open it in a browser WHAT IS IN HERE: diagrams.json - one entry per diagram, with its alt text and caption. The folder is flat on purpose, so this is how you find things: grep it rather than opening SVGs one at a time. convert.bat reports anything missing from it. ------------------------------------------------------------------------------- THE FOUR THINGS THAT MATTER ------------------------------------------------------------------------------- 1. NO fill, stroke or style attributes. Classes only. An inline style beats a stylesheet, so a shape carrying style="fill:#000000" ignores the shared sheet completely - and will still be ignoring it in three years when you restyle everything else. Inkscape does this to every object you draw, without asking. Use the "?" (unset) button in Fill & Stroke, and save as PLAIN SVG rather than Inkscape SVG. 2. viewBox="0 0 1200 675", every time. Not a default to adjust - THE box. Diagrams that share a frame read as a set; vary it per diagram and they stop looking related, however carefully the colours match. A cramped drawing is not a reason to grow the box. It is a reason to simplify the drawing, or split it in two. The real exceptions are shapes, not sizes. Four sizes exist, and leaving the first needs a reason about the SHAPE of the content: 1200 x 675 <<< THE DEFAULT. Full slide or full A4 text width. 600 x 675 Half width - one side of a two-column slide. 1200 x 400 Long and thin - timeline, spectrum, sequence. 600 x 1000 Tall and narrow - a stack, strata, a process running down the page. The WIDTH is not a free choice: 1200 if the diagram is displayed full width, 600 if displayed at half width. Strokes are in user units, so a 1200-wide box shown in a half-width column draws every line at half the thickness of the rest of the set. Width follows where it sits, height follows the content. The half-width size should be rare. Columns stack on a phone and lose the pairing that justified them; notes want explanation above and below a figure, not beside it; and in a lecture the thing next to the diagram should be your voice. 3. Colour is TWO classes - a role and a hue. Roles: ag-d-box, ag-d-solid, ag-d-line, ag-d-label-hue Core hues: ag-d-blue, ag-d-terracotta, ag-d-green <- reach for these first Highlight: ag-d-highlight <- ONE thing per diagram, never two Twelve more hues exist for drawing real objects (a red car, a yellow lemon). They are not for telling parts of a schematic apart. Leave the hue class off and it draws in ink. 4. Most of a good diagram is QUIET. ag-d-ink the subject ag-d-muted supporting ag-d-faint context ag-d-ghost scaffolding This is the whole difference between a diagram that looks professional and one that does not. If everything is ink, there is no subject. Draw it faint and promote only what you actually talk about. ------------------------------------------------------------------------------- A DIAGRAM WITH NO CLASSES LOOKS BLACK ------------------------------------------------------------------------------- That is the system working, not a fault. Unclassed shapes get the browser default because nothing has told the stylesheet what they are. Give the shape the class that says what it IS and the appearance follows.