Skip to content
Store
AZBuy(opens in a new tab)

Logo construction grids from any SVG, without Illustrator

Keyline reads your logo and draws its construction: circles fitted to the curves, keylines, tangents, angles, golden ratio, a module grid and clear space. Then it exports a layered SVG, a high resolution PNG and a ready presentation sheet. It is one HTML file that runs offline in your browser.

Buy on Gumroad(opens in a new tab)$24

Chrome, Edge, Firefox or Safari. Works offline.

Keyline: Logo Grids and Construction Lines from Any SVG, No Illustrator Needed

What Keyline does

  • Circles fitted to your curves

    Least squares fits on the curves themselves. Each circle is listed with its radius, centre and largest distance from the curve, and circles of the same size share a label.

  • Box, center lines and diagonals

    From the true extremes of the curves, not from the handles.

  • Keylines and tangents

    Every straight edge extended across the canvas, and tangent lines where curves turn level or upright.

  • Angle guides

    The angle of every slanted edge, plus rays from the centre every 15, 22.5, 30 or 45 degrees.

  • Golden ratio and modular grid

    0.382 and 0.618 lines, a golden rectangle with its squares and spiral, and a module grid that shows how many anchors sit on it.

  • Clear space and minimum size

    Clear space as a share of the logo or a value you type, and a minimum size in px and mm with a pixel preview.

  • Exports

    A layered SVG with one named layer per guide for Figma, Affinity, Illustrator and Inkscape, a PNG up to 8000 px, and a presentation sheet as PNG and vector PDF.

Who it is for

  • Brand designers preparing logo construction slides for clients
  • Designers who work in Figma, Affinity or Inkscape instead of Illustrator
  • Design students presenting a logo project

Details

Runs in
Chrome, Edge, Firefox or Safari, offline
Reads
SVG from Figma, Affinity, Illustrator, Inkscape, Canva and others
Exports
Layered SVG, PNG up to 8000 px, sheet as PNG and vector PDF
Sheet sizes
1920x1080 and 3000x2000, dark or light
File
One HTML file, no install, no account
Price
$24, paid once

How it works

  1. 1

    Unzip Keyline.zip and open Keyline.html in your browser.

  2. 2

    Drop your logo SVG on the canvas, or paste SVG code. In Figma: right-click the logo, then Copy as, Copy as SVG.

  3. 3

    Turn layers on and off on the right, and set the circle tolerance.

  4. 4

    Export a layered SVG, a PNG or a presentation sheet.

Questions

Do I need Illustrator?

No. Keyline runs in Chrome, Edge, Firefox or Safari on Windows, Mac and Linux. Reads SVG from Figma, Affinity, Illustrator, Inkscape, Canva and others: paths, groups, transforms, compound paths, use and symbol, CSS classes, clip paths and basic shapes, or SVG code pasted from Figma with Copy as SVG.

How exact are the circles?

Each circle is a least squares fit to points spread evenly along the curves. Keyline shows how far the curve strays from each circle, so you can tell true circles from close ones. You set the tolerance.

Does my logo get uploaded?

No. Keyline is one HTML file that runs offline. Your logo stays on your computer.

Which apps open the exports?

The layered SVG opens in Figma, Affinity, Illustrator and Inkscape, with each guide as its own named group. The PNG and PDF sheets work anywhere, Canva included.

Can I use it for client work?

Yes. Use it on your own logos and your clients' logos, and send them the sheets. Please do not share or resell the Keyline file.

Is there a free version?

Keyline Lite is free. It draws the bounding box, center lines and diagonals and saves a PNG.

Get Keyline

Logo Grids and Construction Lines from Any SVG, No Illustrator Needed

Need help after you buy? Reply to your receipt email and describe what happened. We will help you get it running.

Buy on Gumroad(opens in a new tab)All products

More from the store

All products