Skip to main content
When a logo renders incorrectly in Brand Atlas, the cause is almost always in the file itself: missing fonts, embedded raster previews, wrong dimensions, or a colour profile mismatch. Work through the symptoms below.
Cause. The SVG includes text as live text rather than outlined paths. The browser substitutes a fallback font because the original is not available.Fix.
  1. Open the logo in your design tool.
  2. Convert text to outlines (Illustrator: Type → Create Outlines; Figma: Flatten Selection).
  3. Re-export and re-upload.
  4. If you specifically need the text to remain editable, embed the font via SVG’s @font-face declaration. Most design tools do not do this by default.
Cause. The file is a raster (PNG, JPG) at a resolution lower than the rendered size, or the SVG has an embedded raster preview being rendered instead of the vector content.Fix.
  1. Upload the SVG version. Brand Atlas prefers SVG for marks.
  2. If you must use PNG, upload at 3x the largest expected display size. A logo shown at 200px wide should be uploaded at 600px or higher.
  3. If the SVG has an embedded raster, re-export from your design tool with raster preview disabled.
Cause. The SVG was exported with anti-aliasing settings that do not transfer cleanly, or the file has an embedded background.Fix.
  1. Open the SVG file in a text editor. Check for a <rect> element with fill="#ffffff" or similar. Remove it.
  2. Re-export from the design tool with Transparent background enabled.
  3. For jagged outlines, check that Shape rendering is set appropriately (the default is usually fine; some exports force crispEdges which is rarely wanted).
Cause. A colour profile mismatch. The file is in a profile (Adobe RGB, P3) that Brand Atlas’s render pipeline does not preserve, so colours shift.Fix.
  1. Re-export the logo in sRGB. Most design tools default to this; check the export settings.
  2. For SVGs, use hex values in sRGB (which is the SVG default). Adobe RGB hex values render slightly different colours in browsers.
  3. If exact colour matching is critical for print, supply the Pantone match in the Colour System section; the printer uses Pantone, not the screen render.
Cause. Only the light-mode variant was uploaded. Brand Atlas needs both light and dark variants to render correctly in both themes.Fix.
  1. Create a dark-mode version of the logo (white or light on dark background, or with inverted colours where appropriate).
  2. Upload it in the Logo & Identity section, marked as the dark variant.
  3. The portal automatically picks the right variant based on the theme.
Cause. SVGs with many vector points or embedded raster previews can exceed reasonable file sizes.Fix.
  1. Run the SVG through an optimiser (SVGO, Vector Magic, or your design tool’s “optimised” export).
  2. Remove any embedded rasters.
  3. Aim for under 100KB for an SVG, under 500KB for a PNG.
  4. If the file genuinely needs to be larger, it is uploadable up to 10MB; consider whether the complexity is necessary.

​
Best-practice file preparation

A few habits that prevent most logo issues:
  • Always provide SVG plus PNG fallbacks. SVG for scalability; PNG at 1x, 2x, and 3x for older targets.
  • Outline all text. Logos are not edited text; outlining at export removes the font dependency.
  • Use sRGB. Every colour management system handles sRGB; not every system handles wider gamuts.
  • Include the dark-mode variant from the start. Even if you do not plan to use dark mode soon, future-proof.
  • Specify clear space and minimum size in the section. The asset is half the value; the rules around it are the other half.

​
When to escalate

Write to support@brandatlas.pro when:
  • The fixes above do not resolve the rendering issue.
  • The logo renders correctly in isolation but wrong inside Brand Atlas specifically.
  • A previously-correct render has degraded after a portal update.

Logo & Identity

The section reference.

Common mistakes

The mistakes list.

Brand record

What the section contributes to.