Field Guide
Designing logos in code.
Everything the Avid Tech recolor touched — vectors, alpha, compositing, rasterizing — turned into a working vocabulary you can build a tool on.
Read it top to bottom, or poke the live demos. The teal is your real brand color, threaded through the whole page.
01What actually happened
The recolor was three real operations, not “design.”
Your old teal logo already had the circle, white text and cursor on a transparent background. Nothing was drawn from scratch — it was recomposed. Three named moves did the whole job:
alpha compositing
Stacking a transparent image over a fill. Transparent pixels became black; teal and white stayed.
resampling
Scaling with a quality filter (LANCZOS) so edges stay smooth instead of jagged.
mode convert
RGBA → RGB: flattening the alpha channel away before saving a solid PNG.
02The one distinction that matters
Vector is math. Raster is pixels.
A logo should end life as a vector (SVG) — shapes defined by coordinates, sharp at any size. A raster (PNG/JPG) is a fixed grid of pixels; enlarge it and the grid shows. Drag the zoom — only one survives it.
| Raster | Vector | |
|---|---|---|
| What it is | A grid of pixels | Math — paths, curves, shapes |
| Formats | PNG · JPG · WEBP · GIF · AVIF | SVG · PDF · EPS · AI |
| Scaling | Blurs / pixelates when enlarged | Infinitely sharp at any size |
| Good for | Photos, complex images | Logos, icons, type |
| Editable | Just the pixels | Every shape independently |
Logos should almost always end up as SVG. It's the pro deliverable — it scales from a favicon to a billboard with zero quality loss.
03Design engineering
The graphics vocabulary a tool-builder needs.
This is the layer where design meets code — how images are represented and transformed, not how they're visually composed. Each term is a real attribute you set in code; the diagrams are live SVG (two are interactive).
Representation
— how an image is storedviewBox
The SVG's own coordinate system. Screen pixels map into it, so drawing logic is resolution-independent.
path · d
A freeform outline from Move / Line / Curve commands. The cursor mark is one path string.
bézier curve
A smooth curve from anchor points and control handles — the C (curve) commands inside a path.
fill · stroke
fill is the interior; stroke is the outline. Every shape can have either or both.
bounding box
The rectangle enclosing a shape. Drives selection, alignment and centering math.
color model
How a color is written — hex, RGB or HSL. HSL (hue-sat-light) is the most intuitive base for a color picker.
color space
The range of colors a medium can show (sRGB, Display-P3) and how they're modelled — this site's theme uses oklch.
resolution · DPI
Pixel density — dots per inch. More pixels means sharper output, and it's why a small raster looks rough when blown up.
alpha
Transparency. A transparent background exports a PNG with a real alpha channel.
Transformation
— how it's changedcompositing
Stacking layers with opacity and blend. The recolor was compositing — a transparent mark over a new background.
rasterization
The reverse of tracing — flattening vectors into a pixel grid. Every PNG export rasterizes the canvas.
tracing
Turning a raster into vector paths (potrace) — the bridge from a pixel image to an editable logo.
anti-aliasing
Softening the edge between shape and background with partial pixels, so diagonals don't look like stairs.
quantization
Reducing an image to few colors — the step that turns a busy photo into a clean, logo-ready palette.
04The toolchain
What to build on.
Vector / SVG
- Fabric.jsfull canvas editor engine — likely your backbone
- Konva.jsReact-friendly (via react-konva)
- potraceraster → vector tracing
- opentype.jstext → editable vector paths
Raster
- Sharpfast server-side resize / composite
- Canvas APIbrowser-native pixel work
- @imgly/bg-removalbackground removal in-browser
Export
- resvgSVG → PNG at any size
- canvas.toBlobclient-side PNG download
- XMLSerializerserialize the live SVG
The Lab editor deliberately uses none of these — it's plain SVG + React so the source itself is the lesson. Reach for Fabric/Konva when you need snapping and transform handles for free.
05The valuable part
Bring an image → extract → logo.
This is your differentiator, and the hard half. Scope it tight: clean, high-contrast images trace beautifully; busy photos don't. The amber steps are the genuinely hard ones — ship the rest first.
06How to get started
Ship in four passes.
These are a sequence — each pass is usable on its own and de-risks the next. Don't build the tracer until people already love the editor.
v0 · scratch editor
Shapes, text, drag, export
Circle + editable text + cursor, color pickers, undo/redo, PNG/SVG export. This is the Lab editor.
v1 · templates
Presets, icons, fonts
Starter layouts, an icon library, font picker, palette presets.
v2 · image import
Upload & recolor
Background removal, recolor, and place a real image into a composition.
v3 · vectorize
The tracing pipeline
potrace-based extraction. Hardest, highest-value — save it for last.