Keyshape Features

System Requirements

  • Mac with Apple Silicon or Intel processor
  • Hardware accelerated Metal GPU graphics
  • macOS 10.14 Mojave or later

Drawing

Drawing Tools

  • Use typical vector tools, such as the Node, Pen, Pencil, Rectangle, Ellipse, Hand and Zoom tool
  • Immediately see a preview of the shape as you draw

Path Operations

  • Adjust individual nodes and their control points
  • Convert text and rectangles into paths
  • Convert the outline of a stroke into a path
  • Combine and break apart paths
  • Unite, subtract, intersect and exclude two or more paths together

Layers and Groups

  • Organize your artwork into layers and groups
  • Rearrange objects by dragging and dropping them in the Object Tree

Appearance, Stroke and Fill

  • Use linear and radial gradients
  • Color swatches
  • Supports dashed strokes
  • Supported blending modes: Normal, Darken, Multiply, Color Burn, Lighten, Screen, Color Dodge, Overlay, Soft Light, Hard Light, Difference, Exclusion, Hue, Saturation, Color, Luminosity
  • Supported CSS shorthand filters: Blur, Drop Shadow, Brightness, Contrast, Grayscale, Saturate, Hue Rotate, Invert, Sepia, Opacity

Text Features

  • Supports text-on-path for curved text
  • Supports right-to-left text and bidirectional text
  • Create vertical text for East Asian scripts
  • Keep texts editable in your designs and automatically convert them to paths at export time

Grids, Guides and Snapping

  • Use multiple grids in one document
  • Add rotatable guides
  • Use pixel snapping to get pixel-aligned vector graphics
  • Snap to objects, node points, grids and guides

Symbols

  • Use symbols to reuse the same objects multiple times
  • Supports nested symbols

Bitmap Images

  • Supports PNG and JPEG images
  • Use embedded or linked images
  • Can automatically embed all images during SVG export

Animation & Interactivity

Timeline

  • Timeline-based animations with keyframes
  • Linear, spline and stepped easing timing functions
  • Repeated animations
  • Timeline snapping
  • Auto-keyframing
  • Time markers

Easing Presets

  • Use built-in easing functions
  • Create reusable custom easing functions

Animatable Properties

  • Use motion paths to move objects along paths
  • Animate position, rotation, scale, and skew properties
  • Animate stroke color, opacity and width properties
  • Animate fill color and opacity properties
  • Animate object opacity and visibility properties
  • Create line animations with animated dash offsets and dash arrays
  • Supports path shape morphing with animated path shapes

Preview Animations

  • Play animations back on the same canvas where you draw them
  • Up to 60 fps playback
  • Preview animations on web browsers with a click of a button

Hyperlinks

  • Create and edit hyperlinks

Interactivity

  • Start the animation when it is clicked or when the pointer enters it
  • Start the animation when it is scrolled into view
  • Select the mouse cursor for the document
  • Add custom JavaScript

Exporting, Importing & More

Export Formats

  • SVG with JavaScript Animations
  • SVG with CSS Animations
  • SVG Image Sequences
  • SVG Sprite Sheets
  • Animated Vector Drawables for native Android apps*
  • Lottie / Bodymovin animations for native Android, iOS, macOS, Windows and React Native apps*
  • Animated GIFs, Animated PNGs, Animated WebPs
  • PNG Image Sequences and Sprite Sheets
  • WebP Image Sequences and Sprite Sheets
  • JPEG Image Sequences and Sprite Sheets
  • MPEG-4 video with H.264 (up to 480 fps)
  • QuickTime video with ProRes 4444 (up to 480 fps)

* limited support, available as a plugin

Import SVG

  • Open SVG documents created in other vector graphics software, such as Sketch, Adobe Illustrator or Affinity Designer
  • Copy SVG code from Keyshape to a text editor
  • Copy-paste SVG code from a text editor or web page to Keyshape

Plugins

  • Plugins can be created by third-party developers
  • Import plugins to open custom file formats
  • Export plugins to write custom file formats

Standards Based File Format

  • Internal file format similar to SVG 2
  • Supports an uncompressed plain text format to store files in version control systems, such as Git

Supported SVG Features

  • Shapes: rect, ellipse, path, text, image
  • Transformations: translate, scale, rotate, skew
  • Stroke and fill color and opacity
  • Linear and radial gradients
  • Stroke cap and join styles with mitering
  • Stroke dashes
  • Vertical text
  • Blending modes
  • CSS shorthand filters
  • Symbols
  • Masking and clipping
  • Hyperlinking