Why does changing the name in an SVG wordmark spread letters apart or rotate the whole ending?

Identify what is controlling each character

A font’s normal spacing is not the only possible source of gaps. A designer can place individual characters with coordinate lists. Reusing those instructions with a different name can preserve the old placement pattern even when the new word needs a different layout.

MDN distinguishes tspan x from dx: x provides absolute coordinates, while dx offsets the current text position and can accumulate across characters. Check the actual attribute name and values. Substituting one list for the other because both contain numbers is not a neutral formatting change.

Executed position comparison

In a synthetic Chrome 155 page, we rendered MUG with a parent x of 20. The absolute tspan x list 40, 100, 160 placed the three character starts at those coordinates. A relative dx list of 20, 60, 100 instead produced starts of approximately 40, 112.005 and 224.009 in that rendering environment.

The second relative character started 60 units after the preceding character’s end; the third started another 100 units after its predecessor’s end. Those measurements show why the resulting spread is not described by the absolute list. Font metrics and the rendering environment are part of this fixture; these numbers are not universal brand-spacing recommendations.

Check the tail of a short rotation list

Our separate synthetic word MUGSHOP had rotate values 0, 0, 20. The rendered geometry reported zero degrees for its first two characters and 20 degrees for every remaining character. It did not rotate only the third character and then return to zero.

Illustrative exercise: input A changes a short product-family wordmark to a longer approved name. Input B keeps the same name but replaces an absolute placement list with relative offsets. For A, inspect both the list length and the intended rotation for all remaining letters. For B, compare starting positions rather than treating a wider word as a font failure.

Approve lettering after the actual substitution

Preserve the original asset and make a working copy. Record the approved name, coordinate-list intent and any deliberate tilted letters. Test the final complete name, not only its first three characters. If a list is accidental residue from a previous design, have the editor revise that explicit layout instead of compensating with another unrelated spacing adjustment.

The fixture tests rendered SVG geometry in one browser. It does not evaluate optical balance, font licensing or import behavior in a design application. After the coordinate mechanism is correct, perform the separate visual-spacing review at the intended logo size.

Inspect the actual measurement data

These data describe the synthetic checks scoped in the article, not real-product, publishing-platform or subjective-quality acceptance. The SVG assertions also retain the unsupported hypothesis.

• synthetic-svg-character-measurements.csv · SHA256 91ab1ca0024d43572b37685066e8d0817a470d89db8d4c1807bf83d6e06df020
• synthetic-svg-assertions.csv · SHA256 ad19d481d5aa02b2b21ec828fa3527f422d5177754d7b7387c29b2e89c58c881

Illustrative exercise — name substitution and character instructions

These are illustrative exercise rows. Save a copy and record your own observations; the example is not an executed acceptance test.

Download review worksheet (CSV)