SVG Import & Export

Import vector graphics from SVG files or export Azyrom elements as SVG for use in web development, vector editing tools, or documentation.

Importing SVG Files

Method 1: Drag & Drop (Recommended)

1. Drag an SVG file from your file system
2. Drop it anywhere on the Azyrom canvas
3. SVG is automatically parsed and converted to Azyrom elements
4. Elements appear at drop location
5. All elements are selected for immediate manipulation

Method 2: File Menu

1. Click File → Import SVG
2. Select SVG file from file picker dialog
3. SVG is parsed and elements are created
4. Elements appear at canvas center (400, 300)

Method 3: Icon Picker (for Icons)

1. Click 🎨 Insert Icon button in toolbar
2. Browse 145 professional icons (Material + Font Awesome)
3. Click to insert icon as SVG element

Supported SVG Features

Shapes (Fully Supported)

• <rect> - Rectangles with optional rounded corners
• <circle> - Circles and ellipses
• <ellipse> - Oval shapes
• <line> - Straight lines
• <polygon> - Closed shapes with multiple points
• <polyline> - Open shapes with multiple points
• <path> - Complex vector paths (full path command support)

Path Commands (Fully Supported)

• M (Moveto) - Move to starting point
• L (Lineto) - Draw straight line
• H (Horizontal lineto) - Horizontal line
• V (Vertical lineto) - Vertical line
• Z (Closepath) - Close path
• C (Curveto) - Cubic Bézier curve
• S (Smooth curveto) - Smooth cubic Bézier
• Q (Quadratic Bézier) - Quadratic curve
• T (Smooth quadratic) - Smooth quadratic curve
• A (Arc) - Elliptical arc

Attributes (Supported)

• fill - Fill color (hex, rgb, rgba, named colors)
• stroke - Stroke color
• stroke-width - Stroke width (px)
• opacity - Opacity (0-1)
• transform - Translate, rotate, scale transforms

Groups & Text

• <g> - Groups with transforms
• <text> - Text elements (converted to Azyrom text)

Unsupported Features

• Gradients - Converted to solid color (first stop color)
• Patterns - Converted to solid color
• Filters - Not preserved (blur, drop-shadow, etc.)
• Animations - Static import only
• Embedded Images - Rasterized images not preserved
• Clipping Paths - Not currently supported
• Masks - Not currently supported

Import Behavior

• SVG viewBox is respected for positioning
• Transform attributes are applied to elements
• Colors are converted to RGBA format
• Stroke widths are preserved
• Elements maintain relative positions
• Font properties are preserved for text

Exporting to SVG

Single Element Export

1. Select one or more elements
2. Click File → Export Selection as SVG
3. Choose file location and name
4. SVG file is created with selected elements

Full Canvas Export

1. Click File → Export Canvas as SVG
2. Choose file location and name
3. SVG file is created with all canvas elements

Export Settings

• ViewBox - Auto-calculated from element bounds
• Coordinate System - Preserves exact element positions
• Colors - Exported as hex colors (#RRGGBB)
• Stroke - Preserved exactly (width, color, style)
• Opacity - Preserved for semi-transparent elements
• Text - Exported as <text> with font properties

SVG Output Format

<svg xmlns="http://www.w3.org/2000/svg" 
     width="800" height="600" 
     viewBox="0 0 800 600">
  <rect x="50" y="50" width="200" height="100" 
        fill="#3B82F6" rx="8"/>
  <circle cx="400" cy="300" r="50" 
          fill="#EF4444"/>
  <text x="100" y="200" 
        font-size="24" fill="#000000">
    Hello Azyrom
  </text>
</svg>

Use Cases

• Web Development - Export UI elements for HTML/CSS
• Vector Editing - Import in Illustrator, Inkscape, Figma
• Icon Creation - Export custom icons for design systems
• Documentation - Include vector graphics in docs
• Collaboration - Share designs in universal SVG format
• Code Generation - Use SVG paths in web/mobile apps

Best Practices

• Export individual icons as separate SVG files for web use
• Use "Export Selection" for precise control over exported elements
• SVG files are text-based and can be edited in any text editor
• For best web performance, optimize exported SVGs with SVGO tool
• SVG export preserves design fidelity better than PNG export
• Test imported SVGs to ensure expected rendering
• Simplify complex paths before export for smaller file sizes

Troubleshooting

Import Issues

• Gradient not showing - Converted to solid color (expected behavior)
• Missing elements - May use unsupported features (filters, masks)
• Wrong colors - Check if SVG uses gradients or patterns
• Incorrect positioning - Check SVG viewBox and transforms

Export Issues

• File too large - Simplify paths, reduce points
• Colors wrong - Check opacity and blend modes
• Missing elements - Ensure elements are within canvas bounds

Related Resources

• Icon System & Icon Picker
• Component Library Overview
• SVG Specification
• SVGO - SVG Optimizer