studio/guide/export.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="inkvec-guide" content="studio">
<title>Export · Inkvec Studio guide</title>
<link rel="stylesheet" href="guide.css">
</head>
<body>
<div class="shell">
  <aside class="side" aria-label="Guide"><a class="guidebrand" href="index.html"><img src="logo-mono.svg" alt=""> <span>Inkvec Studio</span></a><div class="grp"><h4>User guide</h4><a href="index.html">Overview</a><a href="install.html">Install and first launch</a><a href="getting-started.html">Getting started</a><a href="viewer.html">The viewer</a><a href="result.html">Result</a><a href="tune.html">Tune</a><a href="palette.html">Palette and colour groups</a><a href="export.html" aria-current="page">Export</a><a href="minify.html">Minify SVG</a><a href="fabricate.html">Fabricate</a><a href="batch.html">Batch</a><a href="settings.html">Settings</a><a href="shortcuts.html">Keyboard and mouse</a><a href="troubleshooting.html">Troubleshooting</a></div><div class="grp"><h4>Tutorials</h4><a href="tutorials/jpeg-logo.html">Clean up a JPEG logo</a><a href="tutorials/favicon-asset-pack.html">A favicon and an asset pack</a><a href="tutorials/vinyl-htv.html">Layered vinyl and iron-on</a><a href="tutorials/laser.html">Laser: DXF and G-code</a></div><div class="grp"><h4>Online</h4><a href="https://logolabs.github.io/inkvec/">Inkvec documentation</a><a href="https://logolabs.github.io/inkvec/studio/export.html">This page on the web</a></div><p class="guidenote">This copy of the guide is part of the app and works without a network.</p></aside>
  <main><article><h1 id="export">Export</h1>
<p>When the drawing is right, three buttons at the foot of the rail take it out of the app:
<strong>Export</strong> (files in a folder), <strong>Copy SVG</strong> (the clipboard) and the comparison card.</p>
<h2 id="the-export-sheet">The export sheet</h2>
<p><strong>Export</strong>, or <kbd>Ctrl</kbd>+<kbd>E</kbd> (<kbd>⌘</kbd>+<kbd>E</kbd> on a Mac), opens the
export sheet over the rail.</p>
<p><img alt="The export sheet: a checklist of formats, each with its size, and the destination" src="img/export.webp"></p>
<p>Tick what you want:</p>
<table>
<thead>
<tr>
<th>Row</th>
<th>Files written</th>
<th>Ticked at first</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>SVG</strong></td>
<td><code>name.svg</code>: the drawing as traced</td>
<td>yes</td>
</tr>
<tr>
<td><strong>SVG (minified)</strong></td>
<td><code>name.min.svg</code>: the same drawing with no ids, no groups and no trailing zeros</td>
<td>yes</td>
</tr>
<tr>
<td><strong>PNG · 512 / 1024 / 2048</strong></td>
<td><code>png/name-512.png</code>, <code>png/name-1024.png</code>, <code>png/name-2048.png</code></td>
<td>yes</td>
</tr>
<tr>
<td><strong>ICO and favicon set</strong></td>
<td><code>favicon/favicon.ico</code> (16, 32 and 48 px inside), and <code>favicon/favicon-16.png</code>, <code>-32.png</code>, <code>-48.png</code></td>
<td>no</td>
</tr>
<tr>
<td><strong>Asset pack (.zip)</strong></td>
<td><code>name-assets.zip</code>: everything above, plus <code>palette.json</code> and a <code>README.txt</code></td>
<td>yes</td>
</tr>
</tbody>
</table>
<p><code>name</code> is the name of the image you opened. The size beside each row is the real size of the files
it will write: the app builds them all in memory first and reports what it built, so nothing is an
estimate. The button at the bottom says how many files and how many bytes in total.</p>
<p><strong>To</strong> is the destination folder. It starts at the <em>Default output folder</em> from
<a href="settings.html#general">Settings</a> if you set one; <strong>Choose</strong> or <strong>Change</strong> picks another. With none
chosen, Export asks for one. <strong>Close</strong>, <kbd>Esc</kbd>, or a click outside the sheet closes it.</p>
<p>From the keyboard the sheet works like any dialog: it takes the focus when it opens (on the first
format), <kbd>Tab</kbd> and <kbd>Shift</kbd>+<kbd>Tab</kbd> move between its rows without leaving it,
<kbd>Space</kbd> ticks or unticks a row, and when it closes the focus goes back to where it was.</p>
<p><strong>Export</strong> always runs a <strong>fresh full trace</strong> first, then writes the files. What is on screen may be
a draft, and a draft should never be shipped by accident. When the files are written, a note says
where, with <strong>Show in folder</strong>.</p>
<h3 id="the-asset-pack">The asset pack</h3>
<p>The zip always holds the complete set, whichever loose rows are ticked:</p>
<div class="codehilite"><pre><span></span>name.svg
name.min.svg
png/name-512.png, name-1024.png, name-2048.png
favicon/favicon.ico, favicon-16.png, favicon-32.png, favicon-48.png
palette.json
README.txt
</pre></div>

<p><code>palette.json</code> lists every ink with its hex value, the colour that was measured (<code>traced</code>), and its
share of the canvas; a gradient also lists its stops. <code>README.txt</code> is written for whoever opens the
pack later: the source file and its size, the size it was traced at, the colour difference and
coordinate count, what each file is, and the first item from
<a href="result.html#what-this-trace-could-not-recover">what this trace could not recover</a>, if there was
one.</p>
<p>Without the asset pack, <code>palette.json</code> is written loose beside the SVG.</p>
<h3 id="things-to-know">Things to know</h3>
<ul>
<li><strong>PNGs keep the drawing's proportions.</strong> 512, 1024 and 2048 are widths: a logo twice as wide as
  it is tall comes out 512×256, 1024×512 and 2048×1024. The favicon files are square, as favicons
  must be, with a wide or tall drawing centred on a transparent background. A mark that should
  fill its favicon is best traced from a square crop (see the
  <a href="tutorials/favicon-asset-pack.html">favicon tutorial</a>).</li>
<li><strong>Snapped colours are exported.</strong> The fresh trace measures the colours again, and your snaps are
  applied to it before anything is written, so every file carries the colours on screen (see
  <a href="palette.html#snapping-an-ink-to-an-exact-colour">the palette</a>).</li>
<li>The SVG always has the image's full size, whatever size it was traced at.</li>
</ul>
<h2 id="copy-svg">Copy SVG</h2>
<p><strong>Copy SVG</strong> puts the drawing on the clipboard as SVG text, ready to paste into Figma, Illustrator,
Inkscape or a code editor. It copies the drawing exactly as it is on screen, snapped colours
included. If the status strip says <em>draft shown</em>, wait for the full trace before copying.</p>
<h2 id="the-comparison-card">The comparison card</h2>
<p>The button with the share icon, beside Copy SVG, makes a poster of the result: the image and the
SVG side by side, and optionally the numbers and a zoomed detail where the vector edge cuts through
the source's pixels.</p>
<ul>
<li><strong>Format</strong>: <em>Landscape</em> (1600 × 900) or <em>Square</em> (1080 × 1080).</li>
<li><strong>Appearance</strong>: dark or light.</li>
<li><strong>On the card</strong>: <em>The numbers</em> (colour difference, coordinates, file size), <em>A zoomed detail</em>
  (with its magnification, 4× to 24×), and <em>The file name</em>. The file name is off by default, so a
  card of an unreleased logo does not give its name away.</li>
</ul>
<p><strong>Save PNG</strong> writes it (as <code>name-card.png</code>, by default); <strong>Copy image</strong> puts it on the clipboard.</p>
<h2 id="studio-lite">Studio Lite</h2>
<p>In Studio Lite there is no destination folder: Export and Save PNG download the files through your
browser, into its downloads folder.</p><nav class="pagenav" aria-label="Previous and next page"><a class="prev" href="palette.html"><span class="dir">Previous</span><span class="lbl">Palette and colour groups</span></a><a class="next" href="minify.html"><span class="dir">Next</span><span class="lbl">Minify SVG</span></a></nav></article></main>
  <aside class="rail" aria-label="On this page"><h2 class="railh">On this page</h2><ul><li class="l2"><a href="#the-export-sheet">The export sheet</a><ul><li class="l3"><a href="#the-asset-pack">The asset pack</a></li><li class="l3"><a href="#things-to-know">Things to know</a></li></ul></li><li class="l2"><a href="#copy-svg">Copy SVG</a></li><li class="l2"><a href="#the-comparison-card">The comparison card</a></li><li class="l2"><a href="#studio-lite">Studio Lite</a></li></ul></aside>
</div>
</body>
</html>