Back to Validator

Help Topics

Quick Actions

→ Back to Validator

How to Generate a BIMI-Compliant SVG Logo

BIMI requires a specific SVG format called SVG Tiny Portable/Secure (SVG Tiny PS). This guide will help you create or convert your logo to meet BIMI specifications.

📋 BIMI SVG Logo Requirements

Technical Specifications:

  • ✓
    Format: SVG Tiny 1.2 Portable/Secure (PS)
  • ✓
    Aspect Ratio: Square (1:1) - Required for Gmail
  • ✓
    Minimum Size: 96x96 pixels (Gmail requirement)
  • ✓
    Maximum File Size: 32KB (recommended)
  • ✓
    ViewBox: Space-delimited (not comma-delimited)
    ✓ Correct: viewBox="0 0 100 100"
    ✗ Wrong: viewBox="0, 0, 100, 100"

⚠️ Not Allowed in BIMI SVG:

  • ✗ JavaScript or scripting
  • ✗ External references (images, fonts, stylesheets)
  • ✗ Animation or interaction
  • ✗ Raster/bitmap images embedded
  • ✗ Non-standard SVG elements
  • ✗ External fonts (must convert text to paths)

🎨 Creating Your BIMI Logo

Option 1: Creating a New Logo

Recommended Tools:

  • • Adobe Illustrator (with SVG Tiny export)
  • • Inkscape (free, open-source)
  • • Sketch (Mac)
  • • Figma (with SVG export)

Design Guidelines:

  1. Create a square canvas (e.g., 1000x1000px)
  2. Design your logo with sufficient padding (10-15% margin)
  3. Use simple shapes and paths
  4. Convert all text to outlines/paths
  5. Avoid gradients if possible (solid colors work best)
  6. Test visibility at small sizes (32x32px)

Option 2: Converting Existing Logo

⚠️ Important for Gmail:

Gmail displays logos in circular frames. Ensure your logo looks good when cropped to a circle!

Conversion Steps:

  1. Open in vector editor
    • Import your existing logo (AI, EPS, PDF)
    • If raster (PNG/JPG), trace to vectors first
  2. Adjust to square format
    • Create square artboard
    • Center logo with appropriate padding
  3. Simplify the design
    • Remove unnecessary details
    • Merge similar colors
    • Simplify complex paths
  4. Convert text to paths
    • Select all text elements
    • Convert to outlines/paths

💾 Exporting as SVG Tiny PS

Adobe Illustrator:

  1. File → Save As → SVG
  2. Click "More Options"
  3. SVG Profiles: Choose "SVG Tiny 1.2"
  4. Fonts: Convert to outlines
  5. Images: Embed (avoid if possible)
  6. Decimal Places: 2
  7. Disable: JavaScript, SVG filters

Inkscape:

  1. File → Save As → Optimized SVG
  2. Enable: "Convert text to paths"
  3. Enable: "Collapse groups"
  4. Disable: "Keep editor data"
  5. Set precision to 2 decimal places

🔧 Optimization & Validation

Online SVG Optimizers:

  • • SVGOMG: Web-based optimizer with visual preview
  • • SVG Cleaner: Removes unnecessary code
  • • Nano SVG: Command-line tool for optimization

Validation Checklist:

  1. File size under 32KB
  2. Square aspect ratio (width = height)
  3. ViewBox uses spaces, not commas
  4. No external dependencies
  5. No scripting or animation
  6. Renders correctly at small sizes
  7. Logo centered with appropriate padding

🚨 Common Issues & Fixes

File Too Large

  • • Simplify paths and reduce anchor points
  • • Remove hidden elements
  • • Reduce decimal precision to 1-2 places
  • • Merge similar paths

Gmail Not Displaying

  • • Ensure square aspect ratio
  • • Check minimum 96x96 size
  • • Verify space-delimited viewBox
  • • Test circular crop appearance

Invalid SVG Format

  • • Remove all <script> tags
  • • Convert text to paths
  • • Remove external image references
  • • Ensure SVG Tiny 1.2 compliance

📄 Example BIMI-Compliant SVG

<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.2" baseProfile="tiny-ps" viewBox="0 0 100 100" 
     xmlns="http://www.w3.org/2000/svg">
  <title>Company Logo</title>
  <rect width="100" height="100" fill="#ffffff"/>
  <circle cx="50" cy="50" r="40" fill="#0066cc"/>
  <path d="M 35 50 L 45 60 L 65 40" 
        fill="none" stroke="#ffffff" stroke-width="4"/>
</svg>

Key features of this example:

  • Uses SVG Tiny PS profile
  • Square viewBox (100x100)
  • Space-delimited viewBox values
  • Simple shapes only
  • No external dependencies

🎯 Next Steps

  1. 1. Test your SVG with our BIMI Validator
  2. 2. Host your logo on a secure HTTPS server
  3. 3. Publish your BIMI DNS record
  4. 4. Consider getting a Verified Mark Certificate for full support