A designer receives a small image of a company logo and is asked to use it on a large exhibition panel. The image looks fine in an email signature, but enlarging it reveals uneven edges and soft lettering. Changing the filename or exporting it at a higher pixel count does not restore the original drawing.
The problem is the representation that survived. A vector master could retain the paths defining the mark. A flattened raster copy retains a particular set of pixel samples. Both can look excellent at an appropriate size, but they support different transformations and preserve different editing options.
Understanding that distinction is useful beyond choosing a file extension. It helps explain why a screenshot cannot simply become a scalable illustration, why a vector icon may still need small-size adjustments, and why keeping the editable source matters even when the published image looks correct.
Geometry and Samples Describe Different Things
A vector graphic represents objects through geometry and properties such as position, fill, stroke, and transformation. A circle can be defined by its centre and radius. The drawing need not store a separate colour value for every pixel of every future display size. SVG’s specification describes a format supporting these kinds of shapes, paths, and text.
A raster image represents a sampled image on a grid. Its pixel dimensions specify how many samples are available across and down. The image might come from a camera, a screen capture, a painting application, or the rasterisation of vector artwork. Raster describes the representation, rather than whether the image was photographed or drawn.
On a conventional screen, both ultimately become displayed pixels. A vector renderer calculates coverage and colour from the geometry at the requested size; a raster renderer displays or resamples existing image samples. Vector graphics therefore do not avoid rasterisation altogether. They allow the rasterisation to happen from retained geometry when output is needed.
This also explains why a vector container can contain resolution-dependent material. An SVG may embed a raster photograph alongside paths and labels. Enlarging the document preserves the geometric definitions, but it cannot create additional recorded detail in the photograph. Inspect the actual content before treating a file as entirely resolution independent.
Resizing a Raster Changes the Sampling
Suppose a screenshot is 800 pixels wide and displayed at 400 CSS pixels. The browser has enough source pixels for two device pixels per CSS pixel at that width, assuming the relevant display conditions. Displaying the same screenshot at 1,600 CSS pixels asks those original samples to cover a much larger area.
Upsampling creates a larger output grid by estimating values between the available samples. Different methods can produce smooth edges or preserve visible pixel blocks. The result can be useful, but the additional samples are not newly captured detail from the original interface or scene.
Downsampling has a different consequence: information must be represented using fewer samples. Fine lines, small text, and repeating patterns can change appearance or disappear. Appropriate filtering reduces some artefacts, but it cannot preserve every detail when the output has insufficient resolution to distinguish them.
The CSS Images specification includes controls related to image rendering and scaling. Their practical effect depends on browser support and the image itself. Pixel art may deliberately use hard-edged enlargement, while a photograph generally benefits from smoother resampling. There is no universally best visual result independent of the content.
Vector Scaling Preserves Geometry, Not Every Design Decision
A vector curve can be recalculated for a larger output without enlarging an existing pixel grid. That is a substantial advantage for a logo used across a website, a presentation, and a printed banner. The original curve remains available rather than having to be guessed from its earlier rasterisation.
Small sizes still require judgement. A detailed mark may become illegible at favicon dimensions because several features compete for very few output pixels. An icon with a thin stroke can look uneven when its edges fall between pixel boundaries. Designers sometimes create simplified variants or adjust strokes and alignment for particular sizes.
Text brings similar constraints. Retaining text objects can preserve editability, but rendering depends on the available font and layout behaviour. Converting letters into paths preserves their outlines while removing the ordinary text representation. That can be appropriate for a logo, but it has consequences for editing, searching, and accessibility.
Effects can complicate the picture further. Shadows, textures, and filters may be rasterised during export or processed at a chosen resolution. A document can therefore contain vector geometry while some visible effects depend on an intermediate pixel grid. Check the exported result at its intended size instead of relying on the source application’s classification.
Separate Pixel Dimensions From Print Density
An image’s pixel dimensions and its intended physical size are different quantities. A 3,000-pixel-wide raster image printed at ten inches wide supplies 300 image pixels per inch. Printing the same samples at twenty inches wide supplies 150 pixels per inch. Changing a density metadata field without resampling does not add samples.
The suitable density depends on the output process, viewing distance, and image content. Close reading of small diagram labels imposes different demands from viewing a large sign across a room. Avoid treating one pixels-per-inch value as a universal rule for every printed asset.
Printer dots per inch describe another part of the process. A printer can use multiple marking dots to reproduce the tone or colour associated with an image sample. Its advertised dot resolution is not interchangeable with the pixel dimensions required for a photograph.
For web delivery, begin with the rendered dimensions and expected display densities. Physical-size metadata generally does not provide the useful answer to whether a screenshot will be sharp in a browser. Check the image at the actual CSS size and supply appropriate raster candidates where the layout requires them.
Edit the Representation That Retains the Needed Structure
A vector source lets a designer move a path, alter a stroke, or change the shape of an object. A layered raster project may also preserve substantial editing structure: masks, text layers, adjustment layers, and separate painted elements. Raster does not necessarily mean that the working document is one flat, uneditable surface.
Flattening is the important distinction when the original components are needed later. A screenshot of a chart does not retain its underlying data series. A flattened raster export of a label does not retain editable text simply because the original project contained it. Keeping the source project avoids having to reconstruct those elements from the final appearance.
| Requirement | Useful source to retain | What a flattened export may lose |
|---|---|---|
| Change a logo’s proportions | Editable vector paths | Original curves and separate objects |
| Retouch a photograph | High-quality raster master or suitable original | Editing latitude and earlier detail |
| Update a chart’s values | Data and chart specification | Values, series, and generation settings |
| Revise a technical diagram | Text or structured diagram source | Labels, relationships, and layout rules |
For this site’s diagrams, Mermaid source preserves the labels and connections used to generate the SVG. That is useful because changing the process can be handled as an edit to the diagram’s structure. The generated SVG is a delivery result, while the source retains the information needed to regenerate it.
Conversion Does Not Recreate the Original
Rasterising a vector drawing produces a raster image at selected dimensions. The derivative can be entirely appropriate for an application that requires pixels, including a fixed-size preview. It no longer necessarily contains the geometry needed to regenerate a different output with the same flexibility.
Tracing takes the other direction by estimating paths from raster boundaries. A clear, high-contrast symbol may trace well. A photograph or a small screenshot can generate excessive paths and still fail to reproduce the intended detail. Tracing is reconstruction, rather than recovery of the exact original objects.
AI enlargement can create a plausible higher-resolution image, but the invented details should not be mistaken for original evidence. That distinction matters for screenshots, technical labels, and records where a changed digit or symbol can alter meaning. A visually convincing reconstruction is not automatically a faithful record.
Encoding and compression are separate choices. Lossless compression can preserve a raster image’s encoded samples without making them resolution independent. Similarly, converting an already degraded JPEG into PNG preserves the resulting samples, not the detail discarded earlier.
Choose the Master and the Published Asset Together
A photographic image is naturally represented by samples, while a geometric logo often benefits from retaining paths. Many projects need both: a diagram may contain a raster screenshot, and an illustration may combine painted textures with vector labels. The appropriate workflow can preserve each component in its useful form.
File formats also have different capabilities. PNG is a raster format, whereas SVG can describe geometry and include raster content. Native design documents can retain editing features that a web export omits. The companion article on SVG versus PNG examines embedding, accessibility, and delivery choices in more detail.
Compare the final assets at the sizes readers will encounter. Check legibility, edge quality, colour and transparency, transfer size, and the work needed to revise the image later. A large or complex vector export can be less practical than an appropriate raster derivative, while a low-resolution raster copy can be inadequate even when its file is small.
The most useful outcome is a suitable published image backed by a source that preserves future options. Keeping those two needs visible prevents an apparently convenient export from becoming the only surviving version of an important graphic.
