Use uniform, non-scaling-stroke.

lib/pages/creature-page.tsx

@@ -49,7 +49,6 @@ type AttachmentChildren = JSX.Element | JSX.Element[];
 
 type CreatureContextType = SvgSymbolContext & {
   attachmentScale: number;
-  cumulativeScale: number;
   parent: SvgSymbolData | null;
 };
 
@@ -58,7 +57,6 @@ const DEFAULT_ATTACHMENT_SCALE = 0.5;
 const CreatureContext = React.createContext<CreatureContextType>({
   ...createSvgSymbolContext(),
   attachmentScale: DEFAULT_ATTACHMENT_SCALE,
-  cumulativeScale: 1,
   parent: null,
 });
 
@@ -98,8 +96,6 @@ const CreatureSymbol: React.FC<CreatureSymbolProps> = (props) => {
           value={{
             ...ctx,
             parent: data,
-            cumulativeScale: ctx.attachmentScale * ctx.cumulativeScale,
-            strokeScale: 1 / ctx.cumulativeScale,
           }}
         >
           {props.children}

lib/svg-symbol.tsx

@@ -3,9 +3,10 @@ import { SVGProps } from "react";
 import { BBox } from "../vendor/bezier-js";
 import { FILL_REPLACEMENT_COLOR, STROKE_REPLACEMENT_COLOR } from "./colors";
 import { Specs } from "./specs";
-import { float } from "./util";
 import { VisibleSpecs } from "./visible-specs";
 
+const DEFAULT_UNIFORM_STROKE_WIDTH = 1;
+
 export type SvgSymbolData = {
   name: string;
   bbox: BBox;
@@ -29,15 +30,15 @@ export type SvgSymbolElement = (
 export type SvgSymbolContext = {
   stroke: string;
   fill: string;
-  strokeScale: number;
   showSpecs: boolean;
+  uniformStrokeWidth?: number;
 };
 
 const DEFAULT_CONTEXT: SvgSymbolContext = {
   stroke: "#000000",
   fill: "#ffffff",
-  strokeScale: 1,
   showSpecs: false,
+  uniformStrokeWidth: DEFAULT_UNIFORM_STROKE_WIDTH,
 };
 
 export function createSvgSymbolContext(
@@ -68,16 +69,19 @@ function reactifySvgSymbolElement(
   key: number
 ): JSX.Element {
   let { fill, stroke, strokeWidth } = el.props;
+  let vectorEffect;
   fill = getColor(ctx, fill);
   stroke = getColor(ctx, stroke);
-  if (strokeWidth !== undefined) {
-    strokeWidth = float(strokeWidth) * ctx.strokeScale;
+  if (strokeWidth !== undefined && ctx.uniformStrokeWidth) {
+    strokeWidth = ctx.uniformStrokeWidth;
+    vectorEffect = "non-scaling-stroke";
   }
   return React.createElement(
     el.tagName,
     {
       ...el.props,
       id: undefined,
+      vectorEffect,
       strokeWidth,
       fill,
       stroke,