Sending logo-final.svg rarely ends the handoff. Someone will need a transparent PNG for a marketplace, a white mark for a dark footer, a black version for a one-color form, and a larger export for print or presentation software.
Prepare those decisions once. A compact brand kit protects the mark from ad hoc recoloring, screenshots, white rectangles, stretched proportions, and low-resolution copies.
FORMAT CHOICE
Keep SVG as the source; render PNG when the destination requires pixels
SVG stores geometry, paint, transforms, masks, and other vector instructions. It can scale to new dimensions without the blocky pixels of a fixed raster and remains useful for recoloring or path editing when the artwork was genuinely vectorized.
PNG stores pixels and supports transparency. It is widely accepted by social tools, document editors, marketplaces, email systems, and applications that do not support SVG. A PNG is a delivery format, not the editable master.
An .svg filename can still contain an embedded PNG. Inspect the source for paths and shapes, test scaling, and make one real edit before treating it as a vector master.
| Need | Use | Why |
|---|---|---|
| Responsive website or app mark | SVG | Sharp at multiple CSS sizes and usually compact |
| Further vector editing | SVG | Paths, fills, strokes, masks, and viewBox stay available |
| Social profile or marketplace | Transparent PNG | Broad compatibility with fixed upload requirements |
| Email or office document | PNG unless SVG support is confirmed | More predictable rendering across clients |
| Large raster placement | PNG rendered from SVG at the final size | Avoids enlarging a small existing bitmap |
THREE CORE VARIANTS
Original, white, and black solve different background problems
The original is the approved color expression. Use it when the background gives every color enough contrast and the destination supports the intended appearance.
The white variant is for dark photography, deep brand colors, video end cards, dark app themes, and surfaces where the full-color mark loses contrast. It should recolor all visible fills, strokes, and gradient stops while preserving holes and transparent space.
The black variant is the dependable choice for white paper, invoices, fax-like systems, embossing tests, one-color production, and contexts where color is unavailable. Do not create it by placing a black rectangle behind the original; the rectangle becomes part of the asset.
- ◆Test the white logo on charcoal, the darkest brand color, and a busy dark photograph.
- ◆Test the black logo on white, warm paper, and a light photograph.
- ◆Check that small negative spaces remain open in every variant.
- ◆Keep the same viewBox and proportions across all three files.
COLOR DOCUMENTATION
Document colors from the approved logo, not from memory
A measured palette should ignore transparent pixels and merge tiny tonal differences caused by anti-aliasing or tracing. Report only colors that genuinely appear. A one-color mark should not receive two invented supporting swatches just to fill a template.
HEX and RGB describe screen color. Print workflows may later need CMYK or spot-color decisions made with the printer and designer because a direct mathematical conversion does not guarantee the same physical appearance on every material.
Coverage percentages can clarify hierarchy. They show which color dominates the visible artwork, but they are not a rule for using those colors across every brand touchpoint.
{
"colors": [
{ "hex": "#2536E8", "rgb": { "r": 37, "g": 54, "b": 232 }, "coverage": 71.4 },
{ "hex": "#111827", "rgb": { "r": 17, "g": 24, "b": 39 }, "coverage": 20.1 },
{ "hex": "#FF7657", "rgb": { "r": 255, "g": 118, "b": 87 }, "coverage": 8.5 }
]
}RASTER EXPORTS
Render the PNG for the destination instead of scaling an old copy
Keep transparency unless a destination explicitly needs a background. Render from the SVG at the required width, preserving aspect ratio. Avoid taking screenshots or repeatedly resizing a small PNG because each step can soften edges and create halos.
Useful general exports include 512, 1024, 2048, and 4096 pixels wide, but the destination should decide the final choice. A favicon needs dedicated small-size testing; a print layout may prefer the SVG or a format requested by the printer.
| Placement | Practical starting file |
|---|---|
| Website header | SVG; transparent PNG fallback if required |
| App store or social avatar | Square PNG rendered to the platform specification |
| Presentation | SVG when supported; otherwise 2048px transparent PNG |
| Email signature | Small optimized PNG tested in real email clients |
| Print vendor | Ask for the vendor's preferred vector and color specification |
DELIVERY
Use boring names and a predictable folder
A recipient should understand every file without opening it. Separate SVG and PNG folders, include the variant and pixel width in filenames, and keep palette.json beside the assets. Avoid final-final2 or unexplained abbreviations.
Before sending, open every SVG and PNG, compare proportions, inspect transparency, and test the files outside the system that created them. Archive the editable master and record the approval date so future changes become versions rather than silent overwrites.
brand-kit/
svg/logo-original.svg
svg/logo-black.svg
svg/logo-white.svg
png/logo-original-2048px.png
png/logo-black-2048px.png
png/logo-white-2048px.png
palette.jsonSources
We checked product behavior against the linked primary documentation and separated observed CleanVector workflow facts from vendor claims. Pricing and features can change, so follow the source before making a purchase decision.
- W3C SVG 2: Embedded Content ↗
Primary specification showing how raster image content can exist inside an SVG document.
- MDN: SVG image element ↗
Practical reference for images embedded inside SVG.
- MDN: SVG viewBox ↗
Reference for preserving the SVG coordinate system and scalable viewport behavior.