Hey Caitlin, let's break down why your SVG is so large, causing Brackets to crash, and how to fix it so it works smoothly with SpiritApp.

The Root Cause #

Your workflow from ProCreate (a pixel-focused tool) → PSD → Illustrator is likely introducing tons of redundant data, embedded rasterized content, and unnecessary code that bloats the SVG. Illustrator's default SVG export settings also add extra metadata and precision you don't need for web use.

Step-by-Step Fixes #

1. Optimize Illustrator's SVG Export Settings #

When exporting from AI, don't just hit "Export"—tweak these settings to cut down bloat drastically:

• Go to File > Export > Export As... and select SVG
• Click More Options to expand advanced settings:
  • Set CSS Properties to Style Attributes (avoids messy external classes or unused <defs>)
  • Uncheck Include Slices, Include Board, and Preserve Illustrator Editing Capabilities (these add useless metadata for web deployment)
  • For Images, if your design is all vector, set to Link (skip this only if you intentionally need embedded bitmaps)
  • Lower Decimal Places to 2 or 3 (reduces coordinate precision without breaking your design's appearance)

2. Clean Up Redundant Code in the SVG #

Even with optimized exports, AI might leave extra cruft. Use a lightweight text editor (like Notepad++) to clean things up:

• Delete long, auto-generated id values (replace them with short, meaningful names first, then swap to spirit-data-id for SpiritApp)
• Remove unnecessary xlink:href references—if these point to embedded raster images (not vector gradients), that's why you have thousands of lines per layer. Convert those raster layers to vector in AI first!
• Strip out unused <defs> content (like unused filters, gradients, or clipping paths)
• Delete AI's auto-generated comments and metadata (lines starting with <!-- Generator: Adobe Illustrator... -->)

3. Fix Raster-to-Vector Conversion Issues #

ProCreate is a pixel tool, so when you export to PSD and import into AI, your layers might be rasterized (not true vector):

• In Illustrator, select each layer and check the Properties panel—if it says "Image" instead of "Path", right-click it and choose Image Trace > Make and Expand to convert it to editable vector paths
• When exporting from ProCreate, try exporting as a PDF instead of PSD—PDF preserves vector-like shapes better than PSD for cross-tool use

4. Resolve Brackets Crashes #

Brackets struggles with large, unoptimized SVGs. Try these quick fixes:

• Clean up the SVG code in a lightweight editor before opening it in Brackets
• Disable any Brackets extensions that auto-scan or format files (like linting tools) temporarily while working with SVGs

Once you have a lean, clean SVG, you can safely replace the <g id="..."> attributes with <g spirit-data-id="..."> and embed it into your HTML body as SpiritApp requires.

内容的提问来源于stack exchange，提问作者Caitlin