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 and Pixel Snapping

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

Symbols

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

Bitmap Images

  • Use PNG or JPEG images in documents
  • Supports 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

Animatable Properties

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

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
  • Paste SVG code from a text editor or web page to Keyshape

Flexible Exporting

  • Export SVG with JavaScript animations for all modern browsers
  • Export SVG with CSS animations to get lightweight animations
  • Export SVG sprite sheets to create micro-interactions
  • Export animated GIFs to email and tweet them
  • Export lossless PNG image sequences and sprite sheets
  • Export MPEG-4 movies for YouTube and other video services
  • Share animations directly on Twitter, Facebook and other sharing services

Export Formats

  • SVG with JavaScript Animations
  • SVG with CSS Animations
  • SVG Image Sequences
  • SVG Sprite Sheets
  • Animated GIF
  • PNG Image Sequences and Sprite Sheets
  • JPEG Image Sequences and Sprite Sheets
  • MPEG-4 video

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
  • Linking
  • ...more to come!

System Requirements

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