SVG Interface for Max/MSP (jweb)

An interactive SVG interface that runs inside Max's jweb object. Click or drag across SVG elements to trigger messages; receive messages from Max to update visual state.

Quick Start

1. Place your SVG file in the interface/ folder and name it interface.svg
2. Point a jweb object at interface/svg_interface.html
3. Connect the jweb outlet to your patch — clicks output <id> 1 (triggered) and <id> 0 (released)

Making an SVG Interactive

Any SVG file can be made interactive. You only need to modify the elements you want to respond to clicks.

Step 1: Add class="interactive" and a unique id

Open your SVG in a text editor. Find the element you want to make clickable and add two attributes:

<rect
  id="kick_drum"
  class="interactive"
  x="10" y="10" width="80" height="80"
/>

• class="interactive" — enables mouse interaction and color states
• id="kick_drum" — this exact string is sent to Max when clicked

This works on any SVG shape: <rect>, <circle>, <ellipse>, <polygon>, <path>, etc.

Step 2: Leave everything else alone

Elements without class="interactive" are ignored — backgrounds, labels, decorative paths, groups, etc. all render normally with no special treatment.

<!-- These are untouched — just decoration -->
<rect width="400" height="300" fill="#111118"/>
<text x="50" y="50" fill="#888">Label</text>

Tips for SVGs from design tools

If your SVG was exported from Illustrator, Figma, or Inkscape:

• Layer/object names often become the id attribute automatically — rename them in the design tool before exporting
• Add class="interactive" manually in a text editor after export (design tools don't typically set custom classes)
• Inline fill/stroke styles are automatically stripped from interactive elements at load time, so you don't need to clean those up manually
• pointer-events="none" on labels/text prevents them from blocking clicks on shapes beneath

Visual States

Interactive elements have two stroke states and independent fill control:

Stroke state	Appearance	Set by
off	Default stroke	—
triggered	Highlighted stroke	Mouse interaction

Fill color starts black and is controlled independently via setColor messages from Max.

Max Messages

Output (jweb → Max)

Mouse interactions output from the jweb outlet:

Action	Output
mousedown on element	kick_drum 1
mouseup / mouseleave	kick_drum 0

Input (Max → jweb)

Send these messages to the jweb inlet:

Message	Effect
set kick_drum 1	Set trigger state on (no output)
set kick_drum 0	Set trigger state off (no output)
setColor kick_drum 255 0 0	Set element fill to red (RGB 0-255)
loadSVG "path/to/file.svg"	Load a different SVG
setTrigColor 255 96 64	Set triggered stroke color (RGB 0-255)
setOffColor 58 58 74	Set off stroke color (RGB 0-255)
setBackground 26 26 26	Set background color (RGB 0-255)
setLineWidth 2	Set stroke-width on all SVG elements
setInteractiveLineWidth 3	Set stroke-width on interactive elements only
resetAll	All zones to off

Default Colors

Edit the CONFIG object at the top of svg_interface.html to change the global stroke defaults:

offStroke:      "#6a6a8a",
triggeredStroke:"#e8ff90",

File Structure

interface/
  svg_interface.html   ← loaded by jweb
  interface.svg        ← your interactive SVG