Making SVG import into Cavalry as smooth as drawing an arrow and letting it fly 🏹

Quiver improves on Cavalry's native SVG import by adding support for gradients, images, editable text and more.

Demo

Quiver1-5-0Demo.mp4

Features

• Send SVGs from Figma to Cavalry in one click
• Import or paste SVGs from other software
• Supports embedded images, gradients, shadows, blurs, editable text and more

Plus, additional features:

• Convert To Rectangle: create a rectangle from the bounding box of a selected layer
• Dynamic Align: Dynamically adjust the pivot point of a layer
• Flatten Shape: Flatten all selected shapes into one layer
• Rename Layers: Renames all selected layers as [name] 1, [name] 2 etc.

Installation

1. Extract the ZIP file.
2. Copy Quiver.js and the quiver_assets folder into your Cavalry Scripts folder.
3. In Cavalry, open the Scripts menu and select Quiver.

Figma Plugin (optional)

1. In Figma, right click on any frame and go to Plugins > Development > Import plugin from manifest...
2. Open your Cavalry Scripts folder, go to quiver_assets/Quiver for Figma and select manifest.json
3. Done!

FigmaPluginInstallation.mp4

Usage

In Cavalry, open the Scripts menu and select Quiver.

Important

Make sure you have a Cavalry project selected.

Transfer from Figma in one click. Select a frame and use the Figma plugin.

Manual import

Otherwise click Paste to fire an SVG from your clipboard, or click Import to select a file.

See Preparing your SVGs to make sure your SVG files have the right settings.

Convert to Rectangle

Converts selected shapes to rectangles while preserving:

• Fill and stroke styling
• Opacity and blend modes
• Position and hierarchy

Dynamic Align

Automatically adjusts anchor points based on layer scale. Useful for maintaining alignment during animations

Flatten Shape

Flattens complex shapes into simpler editable paths.

Rename Layers

Batch rename selected layers. Eg. [name] 1, [name] 2 etc.

Preparing your SVGs

Importing from Figma

1. Select the frame you want to export
2. Under Export in the side panel, select SVG
3. Click the 3 dots and ensure your settings match below:

• Include bounding box
• Include "id" attribute (this retains layer names)
• Simplify Stroke
• Outline Text
• Ignore overlapping layers

4. Export or copy your frame as SVG!

Importing from Affinity

Coming soon!

Supported features

Feature name	Supported
Rectangles <rect>	✅
Circles <circle>	✅
Ellipse <ellipse>	✅
Paths <path>	✅
Polygons <polygon>	✅
Lines <line>	In beta
Polyline <polyline>	✅
Text <text>	✅
Tspan <tspan>	✅
Color	✅
Opacity	✅
Linear gradient	✅
Radial gradient	✅
Strokes	✅
Stroke dashes	✅
Line caps	✅
Line joins	✅
Drop shadows	✅
Blur	✅
Images	✅
Patterns	✅
Blend modes	✅
Masks and clip paths	✅
Background blur	❌
Text alignment	❌

Roadmap

We're actively working on:

• Adding support for Canva and Affinity
• Improving text alignment
• Supporting more filter effects

Credits

Made possible by your friends in the Canva Creative Team.

Idea and main development by Jack Jaeschke. UI, icons and additional development assistance by Sam Mularczyk. Repo maintained by Phillip Tibballs, Jack Jaeschke and Sam Mularczyk. Made with the assistance of Cursor!

Feel free to open pull requests, dig through the code and use this to build your own tools. We release these freely to help further the Cavalry community!

License

MIT