Proportional Scaling in Computer Graphics

Scaling in computer graphics is a transformation that changes an object's size by multiplying its coordinates by scale factors. Proportional scaling, also called uniform scaling, uses the same factor on every axis, so the object gets larger or smaller without changing shape. For anyone resizing a vector logo, this is the operation that keeps the mark recognizable: proportions, angles and the relationships between elements stay the same, and only the overall size changes.

The direct answer: what proportional scaling is

In two dimensions, scaling multiplies each x coordinate by a factor sx and each y coordinate by a factor sy. When sx equals sy, the scaling is uniform. Every distance in the shape is multiplied by the same amount, so the aspect ratio is preserved and angles are unchanged. When sx and sy differ, the scaling is non-uniform, and the shape is stretched or squashed along one axis.

• Scale factor greater than 1: the object enlarges.
• Scale factor between 0 and 1: the object shrinks.
• Scale factor equal to 1: the object is unchanged (the identity transformation).
• Negative scale factor: the object is mirrored across an axis as well as resized.

The scaling transformation as a matrix

Graphics systems usually express scaling as a matrix. The basic 2D form multiplies a point (x, y) by a diagonal matrix. Many systems use homogeneous coordinates, which add a third component so that scaling, rotation and translation can all be combined into one 3x3 matrix.

Basic 2D scaling:
  x' = sx * x
  y' = sy * y

Homogeneous form:
  | x' |   | sx  0   0 |   | x |
  | y' | = | 0   sy  0 | * | y |
  | 1  |   | 0   0   1 |   | 1 |

Uniform (proportional) scaling: sx = sy = s

The basic form scales relative to the origin, which means the object also moves unless it sits at the origin. To scale around a chosen point, such as a logo's center or corner, the standard approach is to translate that point to the origin, scale, then translate back. The combined result for a fixed point (xf, yf) is x' = xf + s(x - xf) and y' = yf + s(y - yf).

A worked scaling example with numbers

Take a triangle with vertices A(2, 2), B(6, 2) and C(4, 5). Its width is 4 units and its height is 3 units. The coordinates are illustrative, chosen only to show the arithmetic.

Case | A' | B' | C' | Width x Height | Shape preserved?

Original | (2, 2) | (6, 2) | (4, 5) | 4 x 3 | Yes

Uniform, s = 2, about origin | (4, 4) | (12, 4) | (8, 10) | 8 x 6 | Yes

Non-uniform, sx = 2, sy = 1, about origin | (4, 2) | (12, 2) | (8, 5) | 8 x 3 | No, stretched horizontally

Uniform, s = 2, about fixed point A(2, 2) | (2, 2) | (10, 2) | (6, 8) | 8 x 6 | Yes, and A stays in place

In the uniform cases, the width-to-height ratio stays at 4:3 and the triangle keeps its angles. In the non-uniform case the ratio becomes 8:3, so the triangle is distorted. The fixed-point case shows why pivot choice matters in practice: the result has the same size as scaling about the origin, but the anchored vertex does not move.

Why this matters for vector logos

A vector logo is described by paths made of anchor points and curve control points, plus fill and stroke definitions. Scaling a vector logo applies the transformation to those coordinates, and the renderer then draws the result at the output resolution. That is why true vector artwork stays sharp at any size: nothing is being stretched pixel by pixel.

Raster images behave differently. A bitmap is a fixed grid of pixels, so enlarging it requires resampling, which produces softness or visible pixelation, and reducing it discards detail. Uniform scaling still preserves a raster image's proportions, but it cannot add resolution that was never there.

Three cases are worth separating. Vector artwork scales cleanly. An embedded raster image inside a vector file (for example, a photo or a pasted bitmap placed inside an SVG, PDF, EPS or AI file) still scales as pixels, with the same quality limits as any bitmap. A raster preview, such as a thumbnail or an exported PNG shown alongside the source file, is not the editable artwork at all. A file extension alone does not establish which case applies: a file with a vector format extension can contain nothing but an embedded bitmap. Inspecting the file in a vector editor, for instance in an outline or wireframe view where real paths show up as lines, is the reliable way to confirm.

What proportional scaling does not handle automatically

• Stroke widths: depending on the application and its settings, strokes and effects may or may not scale along with the paths. If they do not, a scaled-down logo can look heavier and a scaled-up one lighter than intended. Converting strokes to filled outlines before delivery avoids this ambiguity.
• Live text: text that has not been converted to outlines depends on the font being available, so it may render in a substitute typeface regardless of how carefully it was scaled.
• Effects and raster-based styling: shadows, blurs and similar effects may be applied differently by different renderers and can rasterize at output time.
• Small-size legibility: uniform scaling keeps the geometry correct, but fine details and thin lines can become unreadable at very small sizes. Many brand systems address this with simplified or compact logo versions rather than relying on scaling alone; that is a design practice, not a property of the transformation.

Keeping proportions locked in responsive layouts

On the web, an SVG logo keeps its proportions when its coordinate system is defined with a viewBox and the element is sized on only one dimension, or sized on both with the default preserveAspectRatio behavior, which fits the artwork without distortion. Setting preserveAspectRatio to none allows non-uniform stretching, which is usually not wanted for a logo. With raster logos in HTML, setting a width and leaving the height as auto keeps the original ratio.

<svg viewBox="0 0 400 120" role="img" aria-label="Company logo">
  <!-- logo paths -->
</svg>

/* CSS: scale by width only; height follows the viewBox ratio */
.logo svg {
  width: 100%;
  max-width: 240px;
  height: auto;
}

In design applications, the equivalent is to scale with the aspect ratio locked, typically by holding a modifier key while dragging or by enabling a constrain-proportions control. The exact keys and option names vary by application, and no tool-specific details were supplied for this article, so check the documentation for the software in use.

Resizing someone else's logo

Proportional resizing is generally the kind of change brand guidelines expect, and stretching or distorting a logo is commonly listed as a prohibited use. Being able to download a logo file is not the same as having permission to modify it, use its fonts, or use the trademark in a particular context. Where a brand publishes usage guidelines, those govern minimum sizes, clear space and acceptable versions.

Evidence gaps

The explanation above relies on general, verifiable principles of geometric transformation and file formats. No specific logo, software version, minimum-size specification or measured rendering result was provided, so this article does not state recommended pixel sizes, application-specific defaults or quality comparisons. Those details should come from the relevant brand guidelines and software documentation.