Keyshape Features

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

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

Painting with Stroke and Fill

  • Use linear and radial gradients
  • 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

Layers and Groups

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

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

Hyperlinks

  • Create and edit hyperlinks

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

Timeline

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

Easing Presets

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

Animatable Properties

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

Standards Based File Format

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

Work with 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

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 and React Native apps*
  • Animated GIF
  • PNG Image Sequences and Sprite Sheets
  • JPEG Image Sequences and Sprite Sheets
  • MPEG-4 video

* available as a plugin

Plugins

  • Plugins can be created by third-party developers to add new features to Keyshape
  • Import plugins to open new file formats
  • Export plugins to write new file formats

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
  • Linking

System Requirements

  • macOS X 10.11 El Capitan or later
  • Hardware accelerated OpenGL