THE GITHTML FIELD GUIDE
Fix an SVG diagram that is clipped or tiny on a phone
Check the SVG's viewBox and exported bounds, then inspect its CSS dimensions and container. A responsive width cannot recover artwork outside the exported coordinate area, and shrinking a large diagram may make labels unreadable. Repair the export or split the diagram while preserving a text explanation of its important relationships.
Determine whether the export or layout is wrong
Open the SVG through a suitable local inspection path and compare it with the version embedded in the HTML. If the same arrows or labels are missing in both, the export bounds may be wrong. If the standalone visual is complete but the document clips it, inspect the surrounding container's width, height, and overflow rules.
The viewBox describes the coordinate region used for the SVG viewport. A fixed width and height on the containing element can impose a separate constraint. Avoid editing these values blindly until you know where the artwork actually lies. Preserve a copy of the original export so you can compare the full diagram with the repaired result.
Choose readability over forced fit
A wide architecture diagram can technically fit a phone while becoming useless. Reducing every node and label to a tiny size is not a successful mobile adaptation. Split independent flows, remove redundant visual decoration, or provide a simplified overview followed by detailed subsections. Keep important branches and dependencies intact when reorganizing the visual.
Use flexible sizing for diagrams that genuinely scale well. For unusually wide visuals, a contained scrolling region may be acceptable when the reader can understand how to explore it. In either case, explain the key relationships in nearby text. The text should preserve the conclusion even if the diagram remains difficult to inspect on a small screen.
Review the exported content
An SVG may contain scripts, remote references, or authoring metadata beyond the visible shapes. Review exported content before embedding it in a portable artifact, especially when the source is unfamiliar. Essential diagram rendering should not depend on loading another resource after the document opens. A filename alone does not establish that the asset is self-contained.
- Compare the original export with the embedded result.
- Check viewBox bounds and any fixed width or height.
- Inspect the parent container for clipping or minimum-width rules.
- Read every label at an ordinary phone viewing size.
- Split an over-complex diagram instead of shrinking it indefinitely.
- Verify that the adjacent prose describes the flow, branches, and important exceptions.
Sources and further reading
AI-assisted writing with source-linked guidance and illustrative examples. Read our editorial approach or report a correction.