Scene view symbols come from SVG files: the behavior, container, rigidbody, camera and particles icons live in src/viewport/icons/ and are changed by editing the file and running npm run build; they are bundled, parsed once and drawn into a Graphics by the new module symbolIcons.ts, currentColor becomes the theme color of the symbol, the origin sits in the middle with a centered viewBox and the same units as before, so the symbols are pixel for pixel unchanged; what depends on the object (camera frame, collider outline, one-way cone) stays in code; unit tests keep the files to what Pixi's SVG parser and a browser draw alike (no transform, no polygon, fill always given), e2e 5c reads the five symbols in the theme color (#175)

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

tools/e2e/05-drawing.mjs

@@ -1,3 +1,5 @@
+import { LANES, MAKE_OBJECT } from './lib/scaffold.mjs';
+
 /** Draw order: symbols always above sprites, `z` above hierarchy order. */
 export async function drawing(t) {
   const { check, json, shot, click, locate, typeText, press, undo, mutate, select, object } = t;
@@ -48,4 +50,57 @@ export async function drawing(t) {
   await shot('14-z-order');
   await undo();
   check('undo restores z', (await object('o1')).position.z === 0, `z=${(await object('o1')).position.z}`);
+
+  // 5c. The symbols are SVG files (#175): one of each in a lane of its own, read where each has a
+  //     solid colour of the theme. Offsets are in world units from the symbol's centre.
+  const PLACED = { 's-beh': 'mover', 's-box': 's-box-a', 's-rb': 's-rb-a', 's-cam': 'cam', 's-pt': 's-pt-a' };
+  const SPOTS = [
+    ['s-beh', 8, 0, '#b066ff'],
+    ['s-beh', -6, -3, '#ffffff'],
+    ['s-box', -4, -4, '#3fb8c9'],
+    ['s-box', 4, 4, '#3fb8c9'],
+    ['s-rb', 0, 3, '#4fd18b'],
+    ['s-rb', 0, -4, '#4fd18b'],
+    ['s-cam', 0, 0, '#8a90a0'],
+    ['s-cam', 17, 0, '#8a90a0'],
+    ['s-pt', 12.728, 12.728, '#c26a1f'],
+    ['s-pt', -12.728, -12.728, '#c26a1f'],
+  ];
+  const ids = Object.keys(PLACED);
+  await mutate(`
+    const p = __gm.state.project;
+    const scene = __gm.state.activeScene;
+    ${MAKE_OBJECT}
+    p.assets.push(
+      { id: 's-box-a', type: 'container', name: 's-box-a', props: { enabled: true }, objects: [] },
+      { id: 's-rb-a', type: 'rigidbody', name: 's-rb-a', props: { bodyType: 'static' } },
+      { id: 's-pt-a', type: 'particles', name: 's-pt-a', props: {}, graph: { nodes: [], edges: [] } },
+    );
+    Object.entries(${JSON.stringify(PLACED)}).forEach(([id, assetId], i) => {
+      const o = make(id, assetId, '', ${LANES.symbols}, id);
+      o.position.x = (i - 2) * 120;
+      scene.objects.push(o);
+    });
+    __gm.state.select(null);
+    __gm.lookAt(0, ${LANES.symbols});`);
+  const wrong = await json(`(() => {
+    const zoom = __gm.objectRect('s-beh').w / 28;
+    return ${JSON.stringify(SPOTS)}.flatMap(([id, dx, dy, want]) => {
+      const r = __gm.objectRect(id);
+      const got = __gm.pixelAt(Math.floor(r.x + dx * zoom), Math.floor(r.y + dy * zoom));
+      return got === want ? [] : [id + ' ' + dx + ',' + dy + ': ' + got + ' != ' + want];
+    });
+  })()`);
+  check(
+    'every symbol draws its SVG in the theme colour',
+    wrong.length === 0,
+    wrong.join('; ') || `${SPOTS.length} spots`,
+  );
+  await shot('15-symbols');
+  await mutate(`
+    const p = __gm.state.project;
+    const scene = __gm.state.activeScene;
+    scene.objects = scene.objects.filter((o) => !${JSON.stringify(ids)}.includes(o.id));
+    p.assets = p.assets.filter((a) => !['s-box-a', 's-rb-a', 's-pt-a'].includes(a.id));
+    __gm.lookAt(0, 0);`);
 }

tools/e2e/lib/scaffold.mjs

@@ -24,6 +24,7 @@ export const LANES = {
   physics: -3500,
   shapes: -3900,
   queries: -4300,
+  symbols: -4700,
 };
 
 /**