SVG Import

The @polotno/svg-import package converts SVG files into Polotno JSON format, enabling you to import vector designs into Polotno for further editing.

Installation

npm install @polotno/svg-import

Basic Usage

import { svgToJson } from '@polotno/svg-import';

const svg = `<svg viewBox="0 0 800 600">
  <text x="100" y="100" font-size="24">Hello World</text>
  <rect x="200" y="200" width="100" height="100" fill="blue"/>
</svg>`;

const json = await svgToJson({ svg });

// Load into Polotno store
store.loadJSON(json);

Recommended Workflow

A common use case is importing designs from other design tools:

1. Export from your design tool — Export your design as SVG from any vector editor (e.g., Figma, Canva, Adobe Illustrator)
2. Load the SVG file — Read the SVG content in your application
3. Convert to Polotno JSON — Use svgToJson() to convert
4. Load into Polotno — Use store.loadJSON() to load the converted design

import { svgToJson } from '@polotno/svg-import';

// Example: loading from file input
async function handleFileUpload(file: File) {
  const svgContent = await file.text();
  const json = await svgToJson({ svg: svgContent });
  store.loadJSON(json);
}

// Example: loading from URL
async function importFromUrl(url: string) {
  const response = await fetch(url);
  const svgContent = await response.text();
  const json = await svgToJson({ svg: svgContent });
  store.loadJSON(json);
}

Text Conversion Limitations

To preserve editable text:

• Figma: Use "Export" with SVG format — text is usually preserved
• Illustrator: Avoid "Create Outlines" before export, or use "Preserve Illustrator Editing Capabilities"
• Canva: Limited control — some fonts are automatically outlined

If editable text is critical, check your export settings or consider recreating text elements manually in Polotno after import.

Platform Support

For server-side SVG processing, consider pre-processing on the client or using a headless browser environment.

Troubleshooting

Import produces unexpected results:

• Simplify the SVG before importing (flatten groups, expand strokes)
• Check if text was converted to paths in the source application
• Try exporting with different settings from your design tool

Missing elements:

• Some advanced SVG features may not be supported
• Check browser console for warnings

Need help? Report issues and get support at community.polotno.com.