Understanding Export Settings
When exporting SVG to a raster format, three settings matter most: output format, resolution/scale, and quality. Getting these right ensures your exported images look great while keeping file sizes manageable. This guide covers the optimal settings for every common use case.
Format Selection Guide
PNG — Best for Transparency and Quality
Use PNG when you need lossless quality and transparency support. PNG is the most versatile export format and works well for almost any use case except when file size is the top priority.
- Background: Transparent (default) — preserves any alpha channels in your SVG
- Scale: 2x for web, 3x for print or high-DPI presentation
- Best for: Logos, icons, UI elements, any graphic with transparency
JPG — Best for Small File Size
Use JPG when you need the smallest possible file size and do not need transparency. JPG uses lossy compression, so there is always a quality trade-off.
- Quality: 85% for most uses, 90-95% for important visuals, 70-80% for thumbnails
- Background: Automatically white (JPG does not support transparency)
- Scale: 1x-2x is usually sufficient
- Best for: Email, social media, web pages where loading speed is critical
WebP — Best for Web Performance
WebP offers the best compression-to-quality ratio of any image format. It supports both transparency and lossy compression, making it ideal for performance-focused websites.
- Quality: 85% for lossy (best balance), 100% for lossless
- Background: Transparent supported
- Scale: 2x for standard web use
- Best for: Modern websites, Core Web Vitals optimization
PDF — Best for Print and Sharing
PDF is the standard for printing and document sharing. Use it when you need to send your SVG graphic to someone who cannot open SVG files, or when preparing for professional printing.
- Scale: 2x minimum, 3x for high-quality print
- Background: White (PDF does not support transparent backgrounds)
- Best for: Print materials, client deliverables, archiving
ICO — Best for Favicons
ICO is specifically for website favicons. The key is choosing the right pixel dimensions.
- Size: 32x32 (primary), 16x16 (minimum), 48x48 (Windows shortcut)
- Scale: 1x (the size IS the output)
- Background: Transparent for clean tab appearance
- Best for: Browser tab icons, bookmarks, shortcuts
Resolution and Scale Settings
What Does Scale Mean?
Scale multiplies the base dimensions of your SVG. If your SVG is 100x100 pixels:
- 1x scale: Output is 100x100 pixels
- 2x scale: Output is 200x200 pixels
- 3x scale: Output is 300x300 pixels
Higher scale means more pixels, better quality on high-DPI screens, but larger file size.
Recommended Scale by Use Case
| Use Case | Scale | Why |
|---|---|---|
| Standard web display | 1x | Matches CSS pixel dimensions |
| Retina/HiDPI screens | 2x | Looks sharp on 2x displays |
| Mobile devices | 2x-3x | Covers various screen densities |
| Print (300 DPI) | 3x or custom | Provides sufficient print resolution |
| Social media | 2x | Looks good after platform compression |
| Favicon | 1x | Use exact pixel sizes (16, 32, 48) |
Quality Settings for Lossy Formats
JPG and WebP support quality adjustment. Here is what different quality levels look like in practice:
| Quality | Visual Result | File Size Impact | Best For |
|---|---|---|---|
| 95-100% | Near-perfect | Large | Print, archival |
| 85-90% | Excellent | Moderate | Most web use |
| 75-80% | Good | Small | Thumbnails, previews |
| 60-70% | Acceptable | Very small | Low-bandwidth, mobile |
| Below 60% | Noticeable artifacts | Minimal | Not recommended |
Common Export Recipes
Logo for Website Header
Format: PNG | Scale: 2x | Background: Transparent
Social Media Profile Picture
Format: PNG | Size: 400x400 | Scale: 1x | Background: White or Transparent
Web Page Hero Image
Format: WebP | Quality: 85% | Scale: 2x | Background: As needed
Email Signature Logo
Format: PNG | Size: 200x60 (adjust to your logo) | Scale: 2x | Background: Transparent
Print-Ready Logo
Format: PDF or PNG | Scale: 3x | Background: White
Favicon Package
Format: ICO | Sizes: 16x16, 32x32, 48x48 | Background: Transparent
Start Exporting
Ready to export your SVG with optimized settings? Use our free SVG converter to convert SVG to any format with full control over resolution, quality, and background options.