SVG Guides

1. What is an SVG?

Scalable Vector Graphics (SVG) is an XML-based image format for two-dimensional graphics. Unlike raster image formats (such as JPEG or PNG) that store information in a grid of colored pixels, SVGs store image data as mathematical formulas. This means SVGs can be scaled up or down infinitely without losing quality or becoming pixelated.

2. SVG vs PNG: When to use which?

• Use SVG for:Logos, icons, UI elements, simple illustrations, and anything that needs to look crisp on high-resolution displays or be animated via CSS/JavaScript.
• Use PNG for:Complex images, photographs, detailed artwork with millions of colors, or when you need strict rendering compatibility across email clients and older systems. When you need a reliable fallback, use our SVG to PNG converter.

3. How to Optimize SVG Files

Vector editors like Illustrator or Figma often export SVGs with a lot of unnecessary metadata, hidden layers, and empty groups. To reduce file size:

• Remove editor-specific metadata and unused <defs>.
• Round coordinate numbers (e.g., using 1 decimal place instead of 5).
• Use optimization tools like SVGO (or web interfaces like SVGOMG) before putting SVGs into production.

4. Using SVGs on Websites

• As an <img> tag:The simplest method, but prevents you from interacting with the SVG's internal elements via CSS or JavaScript.
• Inline SVG:Pasting the raw SVG code directly into your HTML allows full control over styling (like changing `fill` colors on hover).
• CSS Backgrounds:Good for decorative patterns. Ensure the SVG is URL-encoded or base64 converted for compatibility.

5. SVG Best Practices

• Always include a viewBox: A `viewBox` attribute ensures your SVG scales responsively inside its container. Avoid relying solely on fixed `width` and `height`.
• Convert text to outlines: If your SVG relies on custom fonts, convert text to paths before exporting so it renders perfectly on any device without missing fonts.
• Add accessibility tags: Use <title> and <desc> tags inside your SVG so screen readers can properly interpret your visual content.

6. Common Problems & Solutions

SVGs can sometimes be tricky when rendering in different environments (like email clients or strict markdown files).

• Missing Fonts:If a font doesn't load, your design will look broken. Solution: Embed the font as base64, or convert the text layers to vector paths.
• Broken Patterns or Filters:Some systems block advanced SVG features (like <filter> or <pattern>) for security reasons.
• The Ultimate Fix: Convert to PNGIf your environment strictly rejects SVGs or breaks their rendering, the safest fallback is converting it to a high-quality raster image. Use our CrushSVG Converter on the homepage to generate a pixel-perfect PNG exactly as intended.

7. How to Convert SVG to PNG for Outlook & Gmail Emails

Email clients like Outlook, Gmail, Apple Mail, and Yahoo Mail have very limited SVG support. Most of them either block SVGs entirely or render them incorrectly — showing broken images, missing fonts, or invisible graphics. The only reliable solution is to convert your SVG to a PNG before embedding it in an email.

• Why Outlook blocks SVGs:Outlook uses Microsoft Word's rendering engine, which does not support the SVG format. Any SVG will show as a broken image or be completely invisible.
• Gmail's SVG restriction:Gmail strips SVG tags for security reasons. Your icon or illustration will simply disappear in the inbox.
• The fix - Use CrushSVG:Paste or upload your SVG on CrushSVG. Set a high resolution (e.g. 2x scale for retina displays), click Convert, and download the PNG. Then embed it in your email template using a standard <img> tag with a descriptive alt attribute.

8. How to Export SVG from Figma as Transparent PNG

Figma is the go-to design tool for most teams today, but exporting a Figma SVG as a high-resolution transparent PNG with all styles preserved requires a few careful steps.

• Step 1 - Export as SVG from Figma:Select your frame or component in Figma. Go to the right panel → Export → choose SVG format. Make sure "Include id attribute" is unchecked to keep the file clean.
• Step 2 - Convert on CrushSVG:Upload your exported SVG file to CrushSVG. The transparent background is preserved automatically - no extra steps needed. Set your desired width, height, or scale factor for retina-ready output.
• Step 3 - Download your PNG:Download the crisp transparent PNG. It will retain all gradients, shadows, masks, and effects exactly as designed in Figma - ready for presentations, websites, or email templates. Need assistance? Visit our Support Center.

9. Why SVG Does Not Display in Gmail or HTML Emails

You carefully designed a beautiful SVG logo or icon, but when you send the email - it's just blank or broken. Here's exactly why this happens and how to permanently fix it.

• Root Cause - Email Security Policies:SVG files are XML-based and can embed scripts, animations, and external links. Gmail, Outlook, and many other clients block SVGs entirely to prevent XSS (Cross-Site Scripting) attacks and phishing exploits.
• Which clients block SVGs:Gmail (all platforms), Outlook 2007–2021, Windows Mail, Yahoo Mail, and most mobile email apps do not render SVGs. Only Apple Mail on newer macOS versions has partial support.
• The permanent solution:Always convert your SVG to PNG before using it in any email campaign. Use CrushSVG to generate a pixel-perfect, high-resolution PNG that works in 100% of email clients — including the most strict ones.