Calculate where an SVG drawing lands inside its display box

Establish two reference points, not one attractive preview

SVG 2’s Candidate Recommendation defines placement. For viewBox(10,20,100,100) and viewport(200,80) at origin, centered meet uses min(200/100,80/100)=0.8 and padding 60. x′=0.8(x−10)+60, y′=0.8(y−20). None uses x′=2(x−10). Corners become (60,0)/(140,80) versus (0,0)/(200,80).

Choose a deliberately asymmetric drawing with identifiable marks near opposite corners and one in the middle. Record their authored positions and what each means. A centrally placed symbol is a poor sole witness because different placements can agree there. That limited observation should prompt a stronger test, not premature approval.

Keep the component’s allocated rectangle separate from the drawing’s internal reference. Obtain both from the implementation owner rather than measuring a screenshot by eye. Preserve the original asset so a proposed placement repair can be compared with an actual geometry edit. Name which of those changes the owner is proposing before accepting a new file.

Read the calculation as a correspondence

Put the authored points in the left column and the predicted destinations in the right. Show the horizontal and vertical operations separately so the reviewer can trace an unexpected location without guessing. The supplied Python assertions compute the stated fixture; they do not render SVG or certify a browser. An arithmetic result is a known expectation against which the receiving evidence can later be compared.

Ask the designer which candidate preserves the approved relationship between the marks. Filling all available space is not automatically the goal. A mark that appears at the correct center can coexist with distorted or unexpectedly displaced neighbors. Conversely, deliberate unused space may be the correct result rather than an export defect. The drawing’s communication purpose determines which outcome is acceptable.

Use the corner rows to locate the disagreement. If the receiving evidence matches one candidate consistently, investigate why that candidate was selected before altering individual annotations. Moving a single label can hide the symptom while leaving the rest of the drawing under the same unintended treatment. The repair should explain all relevant points, not only the one that attracted attention.

Keep annotation coordinates in the same decision

Identify whether an annotation belongs inside the drawing or is separately positioned by the surrounding component. Record its reference point and intended attachment. A label whose location is specified elsewhere may need its own correspondence to the same feature. Do not assume that visually adjacent elements share one placement contract simply because the editor displays them together.

Have the receiving owner provide the exact candidate in the intended component, with its actual dimensions recorded. Compare both corner witnesses and the annotation. Note any additional transformation the component applies. If the available evidence cannot distinguish an asset mapping from an outer-layout change, leave the cause unresolved rather than applying compensating offsets in both places.

After the owner supplies a correction, test a second supported component shape with the same source. This is not a request for a broad responsive-design audit. It checks whether the declared placement rule, rather than an accidental adjustment for one rectangle, explains the result. Keep intentional design exceptions named and separate from the general contract.

Hand off the explanation and its remaining test

Retain the point table, chosen candidate, owner’s rationale and actual rendered evidence when it becomes available. State which part was computed and which part was observed. The specification’s publication status does not establish the implementation of an export tool, image viewer or browser, and no receiving renderer was executed for the mathematical fixture here.

When the drawing or component changes, rerun the retained points before reusing an old offset. If the authored geometry has genuinely moved, update the reference with the designer’s approval instead of pretending the previous coordinates remain authoritative. The deliverable should make a future mismatch explainable: it identifies the expected relationship and the stage responsible for it, without turning a placement correction into an undocumented redesign.

Make the reasoning concrete.

A fictional product diagram has a centered emblem and a corner annotation. The emblem looks correct after embedding, but the annotation no longer points to its feature.

The team requests the correspondence record instead of approving an isolated nudge. Its computed expectation remains distinct from the pending renderer check.

Take the questions into your next brief.

Use these prompts in your own notes. Nothing is submitted from this page.

1. Source

   Which authored points identify consequential features?

2. Destination

   What rectangle does the component actually allocate?

3. Calculation

   Where should the selected witnesses land?

4. Attachment

   Which coordinate reference positions the annotation?

5. Evidence

   Which expectations were computed and which were observed?

Watch for the wrong conclusion.

• Approving from the center alone.
• Repairing multiple symptoms with unrelated offsets.
• Calling mathematical assertions a renderer test.

Sources & scope

Workflows and fictional business examples are original editorial analysis. Source mechanics and their repeated applications are charged. Python mathematical assertions were executed; no browser or 3D renderer test, real asset edit, configuration change or publication is claimed.

• Coordinate Systems, Transformations and Units — SVG 2 →Primary specification chapter · Supports: Supports coordinate mapping.