SVG (Scalable Vector Graphics) is the ideal format for icons, logos, and graphics that need to scale perfectly at any size. Azyrom exports clean, optimized SVG code.
Why SVG?
- Infinitely scalable - No pixelation at any size
- Small file size - Efficient for web delivery
- Editable - Can be modified with code or other vector tools
- Animatable - Can be animated with CSS or JavaScript
- Accessible - Text remains selectable and searchable
Exporting SVG
- Select the elements to export
- Press
⌘/Ctrl + Shift + Eor File → Export - Choose SVG as the format
- Configure SVG options
- Click Export
SVG Options
Include ID Attributes
Add ID attributes based on layer names:
- Useful for CSS styling and JavaScript manipulation
- IDs are sanitized (spaces become dashes, etc.)
- Disable for smaller file size if not needed
Outline Text
Convert text to paths:
- Enabled - Text becomes shapes (fonts not required)
- Disabled - Text remains editable (fonts must be available)
Outline text for logos and icons where exact appearance matters. Keep text editable for content that might need updates or accessibility.
Flatten Transforms
Apply all transformations to path coordinates:
- Removes transform attributes from elements
- May increase file size but improves compatibility
- Useful when transforms cause rendering issues
Simplify Paths
Reduce the number of points in paths:
- Smaller file size
- May slightly change shape appearance
- Adjust tolerance to balance size vs. accuracy
SVG Structure Options
Presentation Attributes vs. CSS
| Presentation Attributes | CSS Styles |
|---|---|
<path fill="#ff0000"> |
<path style="fill:#ff0000"> |
| Better compatibility | Easier to override with CSS |
| More verbose | Can be centralized |
Responsive SVG
For responsive SVGs that scale with their container:
- Remove fixed width/height attributes
- Keep the viewBox attribute
- SVG will scale to fit its container
Optimizing SVG
For the smallest, cleanest SVG files:
- Simplify paths - Remove unnecessary points
- Flatten groups - Reduce nesting
- Use basic shapes - rect/circle instead of paths when possible
- Remove hidden elements - Delete anything not visible
- Outline strokes - Convert to fills if stroke features aren't needed
For production use, run your exported SVGs through an optimizer like SVGO to further reduce file size. Many build tools include SVG optimization plugins.
Copy as SVG Code
Get SVG code directly without saving a file:
- Select elements
- Edit → Copy as SVG (or right-click → Copy as SVG)
- Paste the SVG code directly into HTML or code editors
This is great for quickly adding icons to web projects.
What Exports Well to SVG
- ✓ Vector shapes (rectangles, circles, paths)
- ✓ Text (editable or outlined)
- ✓ Solid fills and gradients
- ✓ Strokes with basic properties
- ✓ Groups and transforms
- ✓ Masks and clip paths
What Doesn't Export to SVG
- ✗ Raster effects (blur, shadows) - Converted to filters or images
- ✗ Complex blend modes - May not render correctly
- ✗ Embedded images - Included as base64 or linked
- ✗ Some advanced stroke features
Use Cases
Icons
Export individual icons as SVG for web use. Consider creating an icon sprite for multiple icons.
Logos
SVG logos scale perfectly from favicon to billboard size.
Illustrations
Vector illustrations maintain quality at any display size.
Animations
Export SVG then add CSS or SMIL animations in code.