2D Scaling in Computer Graphics: How Proportional Scaling Keeps a Vector Logo Intact

The short answer

In 2D computer graphics, scaling is a geometric transformation that changes an object's size by multiplying its coordinates by scale factors: one factor for the horizontal axis (sx) and one for the vertical axis (sy). When both factors are equal, the scaling is uniform, or proportional. The object gets larger or smaller but keeps its shape and aspect ratio. When the factors differ, the scaling is non-uniform, and the object is stretched or squashed.

For a logo, proportional scaling is almost always the intended operation. It lets one mark appear at favicon size and on a billboard without distorting its geometry. Because a vector logo is stored as mathematically defined points and curves rather than a fixed grid of pixels, the software can apply the scale factor to those points and redraw the shapes cleanly at any size.

How the scaling transformation is defined

Each point (x, y) in the artwork is mapped to a new point (x′, y′). In its basic form, scaling is measured relative to the coordinate origin:

x' = x · sx
y' = y · sy

Matrix form:
| x' |   | sx  0 | | x |
| y' | = | 0  sy | | y |

Graphics systems usually work in homogeneous coordinates. Scaling then becomes a 3×3 matrix, so it can be combined with translation and rotation by matrix multiplication:

| x' |   | sx  0   0 | | x |
| y' | = | 0   sy  0 | | y |
| 1  |   | 0   0   1 | | 1 |

A factor greater than 1 enlarges the object. A factor between 0 and 1 shrinks it. A negative factor mirrors it across an axis. Proportional scaling is the special case where sx = sy.

Uniform versus non-uniform scaling

Property | Uniform (proportional) scaling | Non-uniform scaling

Scale factors | sx = sy | sx ≠ sy

Aspect ratio | Preserved | Changed

Angles and curve shapes | Preserved | Circles become ellipses; angles can change

Typical logo use | Resizing the mark for different placements | Generally a distortion of the approved artwork

Uniform scaling is a similarity transformation. Distances change by the same ratio in every direction, so angles and relative proportions stay the same. That is why it is the correct way to resize a logo. Non-uniform scaling breaks those relationships. Lettering becomes condensed or extended, round elements turn oval, and the visual balance the designer set is lost.

Scaling around a fixed point

Basic scaling is anchored to the origin, so any point not at the origin also moves toward or away from it. To resize a logo about its center or a corner, graphics systems use a three-step sequence. They translate the chosen fixed point to the origin, scale, and then translate back. Combined into one formula:

x' = xf + (x − xf) · sx
y' = yf + (y − yf) · sy

where (xf, yf) is the fixed (anchor) point

Design applications expose this as the reference point or anchor used when you drag a corner handle or enter a percentage. The anchor only decides where the resized logo ends up. It does not affect whether the proportions are kept. That depends only on whether the two factors are equal.

What actually scales in a logo file

Scaling behaves differently depending on what the file contains, so it matters which kind of content is being resized.

• Vector paths: anchor points and curve control points are multiplied by the scale factors, and the shapes are re-rendered sharply at the new size.
• Embedded raster images: a bitmap placed inside a vector file is still made of pixels. Enlarging it spreads the same pixels over a larger area, so it can look soft or pixelated even though the surrounding file is vector.
• Raster previews: some files include a pixel-based thumbnail or preview for quick display. A preview is a picture of the artwork, not the scalable artwork itself.
• Strokes and effects: whether outline widths, shadows or other effects scale with the shape depends on the application's settings. In SVG, for example, the vector-effect attribute with the value non-scaling-stroke keeps stroke width constant while the geometry is scaled.

A file extension alone does not confirm which of these a logo contains. A file saved as SVG, EPS, PDF or AI may hold true editable paths, an embedded bitmap, or a mix of both. To know whether proportional scaling will stay clean at every size, open the file and inspect the artwork, for example in an outline or wireframe view.

Proportional scaling in responsive layouts

On screens, the same principle applies when a logo has to fit containers of different sizes. In SVG, the viewBox attribute sets the artwork's internal coordinate system. The preserveAspectRatio attribute controls whether the graphic scales uniformly to fit its container or is allowed to stretch. Its default behavior scales uniformly and centers the artwork. Setting it to none permits non-uniform stretching. In CSS layouts, giving a logo one fixed dimension and letting the other adjust automatically keeps the scaling proportional.

Proportional scaling preserves geometry, but it does not guarantee legibility. Fine details, thin strokes and small text can become hard to read at very small sizes. That is why some brands supply simplified or alternate versions of a logo for small placements instead of relying only on scaling down.

A note on permissions

Resizing a downloaded logo is a technical operation. Permission to use it is a separate question. Being able to download a logo file does not mean you have permission to modify the artwork, use its fonts, or use the trademark in a particular context. Many brand guidelines explicitly forbid stretching, squashing or otherwise distorting the mark. Check the owner's usage terms before you alter or publish someone else's logo.

Gaps in the available information

This overview is based on general, verifiable principles of 2D transformations and common vector formats. No source material was provided about a specific logo, file, application or brand guideline. As a result, it gives no recommended minimum sizes, no exact settings for particular software, and no rules for any individual brand. Those details should come from the logo's own documentation or the tool you are using.