Responsive SVG Backgrounds 

Why use a responsive background?

A canvas background can be part of the measurement instrument. It might divide a Sociogram into social contexts, show two independent dimensions, or provide regions that give spatial placement a specific meaning.

Ordinary PNG and JPEG images have a fixed shape. Network Canvas shows the whole image without cropping it, so an image designed for a landscape screen will leave empty space when it is shown on a portrait screen.

A responsive SVG behaves differently. Its lines and labels are positioned relative to the available canvas, allowing the layout to expand in both directions. Text remains readable rather than being stretched with the rest of the image.

Is a responsive SVG appropriate for your measure?

Responsive backgrounds are most appropriate when horizontal and vertical positions represent separate dimensions, or when regions should always extend to the edges of the canvas.

This distinction matters analytically. A responsive background preserves each position as a proportion of the horizontal and vertical space, but it does not preserve angles or distances when the screen changes shape. For example, concentric circles would become ellipses in portrait mode and should therefore remain a contained image.

Start with the template

You do not need to create an SVG from scratch. The easiest approach is to download this template and replace its four labels with terms from your own study.

The template uses a contextual name-generator example. Bidart and Charbonneau describe a contextual name generator for building a broad view of someone's network from the social contexts of everyday life.

The four example areas—Family, Friends, Work or study, and Community—are only illustrative. Contexts are not necessarily exhaustive or mutually exclusive. A person may be both a friend and a coworker, so your prompt should explain how participants should handle overlaps.

Adapt the template for your study

1. Plan the spatial task

Before editing the image, write down what placement in each region will mean. Keep labels short and use the same terms in the stage instructions. Consider:

• whether regions overlap conceptually;
• whether participants can use an “other” or “unsure” area;
• whether placement within a region has additional meaning;
• how nodes placed near a boundary should be interpreted; and
• whether the resulting positions will be analysed as categories, coordinates, or both.

2. Download and copy the template

Download the template above and keep the original unchanged. Make a copy with a descriptive name such as support-contexts.svg.

The .svg ending is important. It tells Architect and the operating system that the file is an SVG image.

3. Change the labels

An SVG is an image, but its labels are stored as ordinary words inside the file. You can change them with a plain-text editor:

• Windows: Notepad
• macOS: TextEdit, after choosing Format → Make Plain Text
• Linux: a plain-text editor such as Gedit or Kate

Open the copied SVG. It will look unfamiliar because you are seeing the instructions used to draw the image. You only need to use Find and Replace to change these visible terms:

Do not change punctuation or symbols such as <, >, ", /, =, or %. Save the file as plain text using UTF-8 encoding, and make sure its name still ends in .svg rather than .svg.txt.

4. Add the background in Architect

1. Open the Narrative, Network Composer, or Sociogram stage that will use the background.
2. In the Background section, choose Image.
3. Browse for your edited .svg file, or select it from the resource library if you have already added it.
4. Write stage instructions that explain the meaning of the regions or axes. The background should reinforce those instructions, not replace them.
5. Open Preview Mode and inspect the stage in portrait and landscape orientations.

Classify nodes from their coordinates

When a participant positions a node, Network Canvas stores the center of that node as two normalized coordinates in the prompt's layout variable:

• x = 0 is the left edge and x = 1 is the right edge.
• y = 0 is the top edge and y = 1 is the bottom edge.

The downward direction of the y-axis is worth noting because it is the opposite of a conventional Cartesian graph.

When exporting data, leave Use screen layout coordinates disabled. The normalized values are device-independent and correspond directly to the percentage positions used by a responsive SVG. See Data Export for more about this option.

In a CSV export, a layout variable called box_layout produces columns called box_layout_x and box_layout_y. Nodes that were not placed have missing values. GraphML exports contain the equivalent _X and _Y values.

Apply the template's quadrant rules

The template divides the canvas at 50% in both directions. This is equivalent to cutting the normalized coordinates at 0.5.

For example, a node at (0.25, 0.33) is in the upper-left quadrant. A node at (0.75, 0.67) is in the lower-right quadrant.

Decide how to treat boundaries

A node can be centered exactly on an axis or close enough that its visual area overlaps two regions. Specify this case before analysis rather than assigning it silently.

One approach is to define a boundary tolerance. A tolerance of 0.02 classifies any node within two percentage points of either axis as Boundary:

Choose R or Python below to see how to create a context column from the exported coordinates. The R example is shown by default.

boundary_tolerance <- 0.02

alters |>
  dplyr::mutate(
    context = dplyr::case_when(
      is.na(box_layout_x) | is.na(box_layout_y) ~ NA_character_,
      abs(box_layout_x - 0.5) <= boundary_tolerance |
        abs(box_layout_y - 0.5) <= boundary_tolerance ~ "Boundary",
      box_layout_x < 0.5 & box_layout_y < 0.5 ~ "Family",
      box_layout_x > 0.5 & box_layout_y < 0.5 ~ "Friends",
      box_layout_x < 0.5 & box_layout_y > 0.5 ~ "Work or study",
      box_layout_x > 0.5 & box_layout_y > 0.5 ~ "Community"
    )
  )