# SVG Best Practices ### TL;DR If your logo looks small in Arcade: * The SVG likely contains extra invisible space * Arcade is using your file exactly as provided * Fixing the SVG (not resizing in Arcade) is the solution If you’re ever unsure, updating your logo in the Brand Kit with a cleaner SVG usually fixes the issue immediately. ## Logos, SVGs, and Why Your Logo Might Look Small Logos looking too small in Arcade is one of the common questions we get. In almost all cases, this isn’t caused by Arcade’s sizing — it’s caused by the **SVG file itself**. This article explains what an SVG is, why some logos appear small, what Arcade can and can’t adjust, and how to get a better logo file. *** ### What is an SVG? **SVG** stands for **Scalable Vector Graphics**. Unlike PNGs or JPGs, SVGs are made of paths and shapes instead of pixels. That means: * SVGs can scale up or down without getting blurry * They’re ideal for logos * They often have transparent backgrounds However, SVGs also include **invisible layout information**, like padding and viewboxes — and that’s where problems usually start. *** ### Why does my logo look small in Arcade? If your logo looks tiny, it’s almost always because: #### 1. The SVG has a large invisible canvas Your logo artwork may only take up a small portion of the SVG’s total area. Arcade scales the *entire SVG*, not just the visible shapes. So if the logo is surrounded by extra empty space, the visible logo will appear smaller. In this case, we recommend cropping your SVG at [svgcrop.com](http://svgcrop.com). #### 2. The SVG was exported incorrectly Common export issues include: * Extra padding added by design tools * A viewBox that’s much larger than the logo itself * The logo being grouped or positioned off-center Arcade respects the SVG exactly as it’s uploaded — we don’t crop or rewrite it. *** ### Can Arcade resize or fix my SVG automatically? No, and that’s intentional. If you want to update your SVG, you can go to [svgcrop.com](http://svgcrop.com) to adjust it. Arcade preserves your logo exactly as uploaded and scales it consistently across templates. This ensures your branding stays accurate, but it also means we can’t fix structural issues inside the SVG file itself. *** ### What *can* Arcade do with logos? Arcade can: * Scale the SVG proportionally * Place it consistently across templates * Respect transparency * Apply your Brand Kit colors where applicable Arcade cannot: * Remove invisible padding * Edit the SVG’s viewBox * Recenter or crop the logo artwork * Convert a low-quality SVG into a better one *** ### What does “transparent background” mean? A transparent background means: * The logo has **no white box** behind it * It blends cleanly into any background color or image SVGs *can* support transparency, but not all do. Common issues: * The SVG includes a white rectangle behind the logo * The logo was exported from a PNG and wrapped in an SVG container * The background was flattened during export If your logo appears with a white box, the background isn’t truly transparent. *** ### How can I check or edit my SVG? If you’re not a designer, you still have options. #### Easy ways to inspect or fix an SVG You can open SVGs in tools like: * **Figma** * **Adobe Illustrator** * **Sketch** * **Inkscape (free)** What to look for: * Is the logo centered? * Is there extra empty space around it? * Is there a background shape? * Does the logo fill most of the canvas? If trimming the canvas makes the logo larger, that’s the fix. *** ### Who should I ask at my company for help? If this feels technical, that’s okay — it usually is. The best people to ask: * A designer (brand, product, or marketing) * Anyone who manages your brand guidelines * The person who provided your original logo files * An agency or contractor who created your branding A helpful thing to say: > “Can you send me an SVG logo that’s tightly cropped, centered, and has a transparent background?” *** ### How do I get a better SVG if I don’t have one? Options include: * Asking your design team for a **web-optimized SVG** * Exporting a new SVG from Figma or Illustrator with padding removed * Using your official brand assets (not website downloads) * Avoiding SVGs that were converted from PNGs automatically If you only have a PNG or JPG, a designer may need to recreate or clean up the SVG. *** ### What does a “good” SVG logo look like? A strong SVG for Arcade: * The logo fills most of the canvas * Minimal or no invisible padding * Transparent background * Centered artwork * Clean paths (not raster images wrapped in SVG) These files scale beautifully and look great across all Arcade templates.