Images & photos · Browser Image & Drawing Editor
Raster vs vector graphics: why drawings on a photo become pixels
· Background
image-editing canvas browser-processing
Raster images are grids of pixels; vector graphics are instructions for drawing shapes. This post explains the difference, why a photo can only ever be raster, and why anything you draw on it inherits the same fate at export.
The logo that got blurry and the photo that never could be 'vectorised' — two everyday confusions with one explanation
A blurry logo and an annotated photograph are often blamed on the same problem, but they begin as different kinds of material. A vector logo is a set of instructions for paths, strokes, and fills; a photograph is a finite field of sampled colour. The editor opens the photograph as a canvas-sized raster bitmap, so its working world is already a grid of pixels before a line or rectangle is drawn.
Draw a box over the photo, export it, and zoom into the edge. The result is a raster image whose annotation occupies pixels alongside the photograph. Compare that file with an original SVG at a larger display size and the distinction becomes visible: enlarging the export resamples its grid, while enlarging the SVG recalculates its path. This editor does not turn the first object into the second.
Raster: a grid of coloured cells — how PNG, JPEG and WebP store pictures and why scaling up invents pixels
Raster images record colour at positions in a grid. PNG, JPEG, and WebP differ in their encoding and compression, but the exported picture still resolves into pixels when displayed. A one-pixel boundary, an anti-aliased curve, and a small caption are all finite samples in the final image. Scaling the file upward asks an interpolation process to estimate additional samples; it does not recover an original drawing instruction.
That limitation matters when an annotation must remain crisp at many sizes. A screenshot callout intended for one fixed display can be exactly right as a raster export, while a brand mark destined for signs, print, and multiple interfaces should normally remain available as a vector asset. Use the editor for the composite image, not as a substitute for the source artwork that must scale independently.
Vector: shapes described mathematically — paths, strokes and fills in formats such as SVG, and why they scale without loss
Vectors describe geometry rather than storing every displayed pixel. An SVG path can specify a curve, a stroke width, a fill, and a transform; a renderer then calculates the pixels appropriate to the current size. That is why the same simple mark can remain clean when placed at several dimensions. The explanation is format-level background, not a claim that this editor emits or preserves such instructions.
The browser editor uses geometric information temporarily for line and shape gestures, which lets a preview follow the pointer before release. Once the gesture finishes, the result is painted into a raster layer. Export composites the visible layers and calls canvas.toBlob for PNG, JPEG, or WebP. There is no SVG export or vector project document in this path, so the geometry does not survive as an independent object.
Why photographs are raster by nature — sensors capture samples, not shapes, and no conversion changes that
Photographs are raster material because a camera records samples of light across a sensor and stores those samples as image data. Describing a photograph as vectors would require an interpretation that replaces its texture, noise, shading, and irregular detail with invented shapes. Upscaling or exporting it differently may change the grid, but neither operation changes what kind of information the original capture contains.
This distinction also explains why a photo and a logo can coexist in one edit without becoming the same thing. The logo may begin as a vector elsewhere, yet after it is drawn onto a raster photo in this editor, the combined result is a pixel grid. Preserve the original logo separately when future reuse matters, and treat the browser export as the finished image for its current purpose.
Drawing on a raster: what the editor does — annotations may be shapes while you edit, but the exported image is a single grid
During a gesture, line and shape tools can behave like compact geometric instructions: the editor knows the start point, end point, outline, and current preview. On release, those instructions are rendered into a raster layer. Brush marks are raster paint as they are made, and text is rasterised at placement rather than retained as a movable text object. The session therefore offers convenience without promising object-level editability later.
Export makes the boundary explicit. Visible raster layers are composited into one canvas, then encoded as PNG, JPEG, or WebP through the browser. Reopening that file gives you the photograph and marks as ordinary pixels; it does not give a recipient a selectable rectangle, reusable path, or editable caption. Keep the layered session or source assets if you may need to change the annotation rather than merely share the picture.
Choosing the right kind for the job — when to ask for a vector logo and when a raster export is exactly what you want
Choose a vector asset when the mark itself must travel: a logo needs multiple sizes, a diagram may be revised, or a symbol must be placed on many backgrounds. Choose a raster export when the goal is a ready-to-share screenshot, a proof with a callout, or a photograph containing a visible note. The right decision follows from the next use, not from a belief that one format is always superior.
The Browser Image & Drawing Editor is suited to the second category. It can place brush, line, rectangle, ellipse, and raster text marks on a photo, then export the composite as a raster file. It cannot output SVG or preserve a vector object model. If a client asks for the logo as an independent asset, return to the original vector source instead of extracting a larger version from the edited pixels.
Takeaway: know which one you are holding — how the Browser Image & Drawing Editor edits raster images and exports raster images, by design
The reliable mental model is simple: the editor may use geometry to describe a gesture, but the document and its export are raster images. Every opened photograph and editor layer has a finite pixel grid. Enlarging that grid resamples existing information, and exporting composites the visible layers into another raster. No step in this workflow creates a reusable vector path from a line that has already become pixels.
Check the file type and the intended recipient before you draw. If the recipient needs to view one finished picture, export the raster and inspect its edges at the actual display size. If the recipient needs to edit marks, recolour a logo, or scale artwork repeatedly, supply a proper vector or layered source. That distinction prevents a technically valid export from being mistaken for a different kind of deliverable.