inkvec / index.html
Incorporo-user's picture
Inkvec 0.2: the presentation page, and Inkvec Studio Lite under studio/
c399cae verified
Raw History Blame Contribute Delete
54.6 kB
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Inkvec</title>
<meta name="description" content="Inkvec by LogoLabs traces logos, icons and flat artwork to exact SVG. Inkvec Studio Lite runs the whole editor in your browser; nothing is uploaded.">
<link rel="icon" type="image/svg+xml" href="favicon.svg">
<style>
/* LogoLabs design system: warm charcoal ramp, one copper accent, Playfair Display + Inter.
The fonts are the Studio's own subset copies, served from this site: the page makes no
request to anyone else. */
@font-face{font-family:"Inter Studio";src:url("fonts/inter-latin.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Playfair Studio";src:url("fonts/playfair-latin.woff2") format("woff2");font-weight:400 900;font-display:swap}
:root{
--paper:#1a1816;--card:#211f1c;--stage:#141210;--void:#0c0a09;--surface:#2a2724;--highlight:#35322e;
--ink:#faf8f5;--dim:rgba(250,248,245,.75);--faint:rgba(250,248,245,.55);--muted:rgba(250,248,245,.4);
--rule:rgba(250,248,245,.08);--rule2:#2a2724;
--accent:#c9754a;--accent-hover:#d4896a;--accent-ink:#1a1816;--accent-soft:rgba(201,117,74,.12);--accent-subtle:rgba(201,117,74,.08);
/* Copper as text on a copper-tinted ground (a pressed toggle, the chosen gallery case):
--accent-soft over --card composites to #352922, where --accent is 4.1:1 and fails WCAG 2.2
SC 1.4.3 (4.5:1 below 24 px; r2-product's axe run). The lighter copper is 5.1:1 there and
5.9:1 on --card. */
--accent-text:#d4896a;
--gold:#b8976c;
--good:#34d399;--goodbg:rgba(52,211,153,.15);--bad:#f87171;--check:#2a2724;
--anchor:#f87171;--handle:#b8976c;--wire:#faf8f5;
--shadow:0 8px 24px -4px rgba(12,10,9,.5);--shadow-lg:0 20px 50px -12px rgba(12,10,9,.6);
--glow:0 0 30px rgba(201,117,74,.25);
--font-display:"Playfair Studio","Playfair Display",Georgia,serif;--font-body:"Inter Studio",Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
--font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
--radius:12px;--radius-sm:8px;--radius-lg:16px;--radius-full:9999px}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.5 var(--font-body);-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}a:hover{color:var(--accent-hover);text-decoration:underline}
/* A link inside a sentence is underlined, not told apart by its colour alone (WCAG 2.2 SC
1.4.1); navigation, buttons and tiles keep their own shapes. */
.note a,.lede a,.cta-note a,.caption a,.how a,footer a{text-decoration:underline;text-underline-offset:2px}
button,.btn{font:600 13.5px/1 var(--font-body);color:var(--ink);background:var(--card);border:1px solid var(--rule);border-radius:var(--radius-sm);padding:10px 14px;cursor:pointer;transition:border-color .15s,background .15s,transform .1s,box-shadow .15s;display:inline-flex;align-items:center;gap:8px;text-decoration:none}
button:hover,.btn:hover{border-color:rgba(250,248,245,.18);text-decoration:none;color:var(--ink)}button:active,.btn:active{transform:translateY(1px) scale(.98)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);padding:15px 28px;font-size:16px;border-radius:var(--radius-full)}
.btn.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);box-shadow:var(--glow);transform:translateY(-1px);color:var(--accent-ink)}
.btn.big{padding:15px 24px;font-size:15px;border-radius:var(--radius-full)}
.btn svg{width:18px;height:18px}
button[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-text)}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
code{font-family:var(--font-mono);font-size:.92em}
h1,h2,h3{font-family:var(--font-display)}
h2{font-size:clamp(22px,3vw,30px);letter-spacing:-.02em;font-weight:600;margin:0 0 6px;text-wrap:balance}
.sec{margin-top:72px}
[hidden]{display:none!important}
/* top bar */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:14px;padding:14px 24px;border-bottom:1px solid var(--rule);background:var(--card)}
.top .mark{width:28px;height:28px;color:var(--accent)}
.top .name{font-family:var(--font-display);font-weight:700;font-size:19px;letter-spacing:-.01em}
.top .by{color:var(--dim);font-size:13px}
.top nav{margin-left:auto;display:flex;gap:18px;font-size:13.5px;font-weight:600;align-items:center}
.top nav a{color:var(--dim)}
.top nav a:hover{color:var(--accent)}
.top nav a.go{color:var(--accent)}
main{max-width:1180px;margin:0 auto;padding:30px 22px 80px}
/* hero */
.hero{display:grid;grid-template-columns:1.15fr 1fr;gap:36px;align-items:center;padding:28px 0 8px}
@media (max-width:900px){.hero{grid-template-columns:1fr}}
h1{font-size:clamp(32px,4.6vw,52px);line-height:1.06;letter-spacing:-.025em;font-weight:700;margin:0 0 14px;text-wrap:balance}
.lede{color:var(--dim);max-width:62ch;margin:0 0 24px;font-size:16.5px}
.ctas{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.cta-note{color:var(--faint);font-size:13px;margin:14px 0 0;max-width:60ch}
.cta-note b{color:var(--dim)}
.drop{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:250px;padding:26px;border:1.5px dashed var(--rule);border-radius:var(--radius-lg);background:var(--card);cursor:pointer;transition:border-color .12s,background .12s;text-align:center}
.drop:hover,.drop.over{border-color:var(--accent);background:var(--accent-soft)}
.drop input{position:absolute;width:1px;height:1px;opacity:0}
.drop:focus-within{outline:2px solid var(--accent);outline-offset:3px}
.drop .big{font-weight:700;font-size:17px}
.drop .small{color:var(--dim);font-size:13.5px;max-width:44ch}
.drop svg{width:34px;height:34px;color:var(--accent)}
.samples{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:6px}
.samples a{display:inline-flex;align-items:center;gap:7px;padding:5px 10px 5px 5px;border:1px solid var(--rule);border-radius:999px;color:var(--dim);font-size:12.5px;font-weight:600;background:var(--stage)}
.samples a:hover{border-color:var(--accent);color:var(--ink);text-decoration:none}
.samples img{width:22px;height:22px;border-radius:50%;background:#fff;object-fit:contain}
.drop.holding{cursor:default}
.drop.holding > :not(.handoff):not(input){display:none}
.handoff{display:flex;flex-direction:column;align-items:center;gap:8px}
.handoff .acts{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:6px}
.handoff .btn.primary{padding:12px 22px;font-size:15px}
/* what's new */
.newgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;margin-top:18px}
.new{background:var(--card);border:1px solid var(--rule);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow)}
.new h3{margin:0 0 6px;font-size:17px;font-weight:600;letter-spacing:-.01em}
.new p{margin:0;color:var(--dim);font-size:13.5px}
.tag{display:inline-block;font:700 10.5px/1 var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
/* viewer */
.viewer{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.viewer.single{grid-template-columns:1fr}
@media (max-width:720px){.viewer{grid-template-columns:1fr}}
.pane{position:relative;aspect-ratio:1;max-height:600px;background:var(--stage);border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);cursor:grab;touch-action:none;user-select:none}
.viewer.single .pane{aspect-ratio:auto;height:min(70vh,600px)}
.pane:active{cursor:grabbing}
.pane .checker{position:absolute;inset:0;z-index:0;background-image:linear-gradient(45deg,var(--check) 25%,transparent 25%),linear-gradient(-45deg,var(--check) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--check) 75%),linear-gradient(-45deg,transparent 75%,var(--check) 75%);background-size:18px 18px;background-position:0 0,0 9px,9px -9px,-9px 0}
.pane .cam{position:absolute;left:0;top:0;width:100%;height:100%;transform-origin:0 0;z-index:1}
.pane .layer{position:absolute;inset:0}
.pane .layer>*{position:absolute;inset:0;width:100%;height:100%}
.pane .layer img{object-fit:contain;display:block}
.pane .layer svg{display:block}
.pane .rightwrap{position:absolute;inset:0;z-index:2}
.pane .rightwrap .cam{z-index:auto}
.pane svg.wire path,.pane svg.wire circle,.pane svg.wire ellipse,.pane svg.wire rect,.pane svg.wire polygon{fill:none!important;stroke:var(--wire);stroke-width:1px;vector-effect:non-scaling-stroke;stroke-opacity:.9}
.pane svg.ov{pointer-events:none}
.pane svg.ov .h{stroke:var(--handle);stroke-width:1px;vector-effect:non-scaling-stroke;fill:none;stroke-opacity:.85}
.pane svg.ov .hd{stroke:var(--handle);stroke-width:3.5px;vector-effect:non-scaling-stroke;stroke-linecap:round;fill:none}
.pane svg.ov .a{stroke:var(--anchor);stroke-width:6px;vector-effect:non-scaling-stroke;stroke-linecap:round;fill:none}
.pane .divider{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--accent);z-index:4;cursor:ew-resize;transform:translateX(-1px)}
.pane .divider::before{content:"";position:absolute;top:0;bottom:0;left:-14px;right:-14px}
.pane .divider::after{content:"";position:absolute;top:50%;left:50%;width:34px;height:34px;transform:translate(-50%,-50%);border-radius:50%;background:var(--accent);box-shadow:0 2px 10px rgba(12,10,9,.4)}
.pane .ptag{position:absolute;top:10px;left:10px;z-index:3;font:600 11px/1 var(--font-body);letter-spacing:.08em;text-transform:uppercase;padding:5px 8px;border-radius:6px;background:rgba(250,248,245,.92);color:var(--accent-ink);pointer-events:none}
.pane .ptag.r{left:auto;right:10px}
.zoomlbl{position:absolute;right:10px;bottom:10px;z-index:4;font:500 11px var(--font-mono);padding:4px 7px;border-radius:6px;background:rgba(250,248,245,.92);color:var(--accent-ink);pointer-events:none}
.tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:10px 0}
.tools .lbl{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin:0 2px 0 4px}
.tools .legend{display:flex;gap:12px;color:var(--dim);font-size:12.5px;margin-left:auto}
.tools .legend i{display:inline-block;width:10px;height:10px;border-radius:50%;vertical-align:-1px;margin-right:5px}
.seg{display:inline-flex;background:var(--card);border:1px solid var(--rule);border-radius:var(--radius-full);padding:3px;gap:2px;flex-wrap:wrap}
.seg button{border:0;background:transparent;border-radius:var(--radius-full);padding:7px 10px;font-size:12.5px;color:var(--dim)}
.seg button[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent-text)}
/* gallery */
.gal{display:grid;grid-template-columns:300px 1fr;gap:16px;margin-top:18px;align-items:start}
@media (max-width:820px){.gal{grid-template-columns:1fr}}
/* Every example in one panel that scrolls inside itself, as tall as the viewer beside it
(set from the viewer's own height), a section per set. On a narrow screen, one strip. */
.cases{height:560px;overflow-y:auto;overscroll-behavior:contain;border:1px solid var(--rule);border-radius:var(--radius);background:var(--card);padding:0 10px 10px;scrollbar-width:thin}
.sethead{position:sticky;top:0;z-index:1;display:flex;justify-content:space-between;align-items:baseline;padding:10px 2px 8px;background:var(--card);font:700 11px/1 var(--font-body);letter-spacing:.07em;text-transform:uppercase;color:var(--dim)}
.sethead span{color:var(--faint);font-weight:600;letter-spacing:.02em;text-transform:none}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-bottom:6px}
.case{display:flex;flex-direction:column;align-items:stretch;gap:4px;padding:5px;border-radius:var(--radius-sm);text-align:left;background:var(--stage);min-width:0;overflow:hidden}
.case .th{aspect-ratio:1;width:100%;border-radius:5px;background:#fff;overflow:hidden;display:grid;place-items:center}
.case .th img{width:100%;height:100%;object-fit:contain}
.case .nm{width:100%;font-size:11px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--dim)}
.case[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft)}
.case[aria-pressed="true"] .nm{color:var(--accent-text)}
.caption{margin:8px 0 0;font-size:13px;color:var(--dim)}
.caption b{color:var(--ink)}
@media (max-width:820px){
.cases{height:auto!important;max-height:none;display:flex;align-items:stretch;gap:8px;overflow-x:auto;overflow-y:hidden;padding:8px}
.sethead{position:sticky;left:0;writing-mode:vertical-rl;transform:rotate(180deg);padding:4px;justify-content:center;gap:6px}
.tiles{display:flex;gap:6px;margin:0}
.case{width:84px;flex:none}
}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.chip{display:inline-flex;gap:6px;align-items:baseline;font-size:12.5px;padding:5px 9px;border-radius:999px;background:var(--rule2);color:var(--dim)}
.chip b{color:var(--ink);font-weight:700}
.chip.win{background:var(--goodbg);color:var(--good)}.chip.win b{color:var(--good)}
.chip.vt{border:1px solid var(--rule);background:transparent}
/* versus */
.versus{display:grid;grid-template-columns:1fr;gap:18px;align-items:start;margin-top:18px}
.bignums{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width:1000px){.bignums{grid-template-columns:repeat(2,1fr)}}
.bignum{background:var(--card);border:1px solid var(--rule);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow)}
.bignum .k{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.bignum .v{font-family:var(--font-display);font-size:32px;font-weight:600;letter-spacing:-.01em;line-height:1.1;margin:6px 0 2px;color:var(--accent)}
.bignum .v small{font-family:var(--font-body);font-size:15px;color:var(--dim);font-weight:500}
.bignum .s{font-size:12.5px;color:var(--dim)}
.bars{background:var(--card);border:1px solid var(--rule);border-radius:var(--radius);padding:6px 16px 14px;box-shadow:var(--shadow);overflow-x:auto}
.bars table{width:100%;margin-bottom:10px;border-collapse:collapse;font-size:12.5px;white-space:nowrap}
.bars caption{text-align:left;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);padding:12px 0 8px}
.bars th,.bars td{padding:8px 8px;text-align:right;border-bottom:1px solid var(--rule2)}
.bars th:first-child,.bars td:first-child{text-align:left;white-space:normal;min-width:170px}
.bars thead th{color:var(--faint);font-weight:600;font-size:11px;letter-spacing:.04em;text-transform:uppercase}
.bars tbody tr:last-child td{border-bottom:0}
.bars tr.win td{color:var(--ink)}
.bars tr.win td:first-child{color:var(--accent);font-weight:600}
.note{color:var(--faint);font-size:12.5px;margin-top:10px;max-width:110ch}
.how{max-width:74ch}
.how p{color:var(--dim);margin:0 0 10px}
.desk{display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:var(--card);border:1px solid var(--rule);border-radius:var(--radius-lg);padding:20px 22px;box-shadow:var(--shadow)}
.desk p{margin:4px 0 0;color:var(--dim);font-size:14px;max-width:70ch}
footer{margin:60px auto 0;max-width:1180px;padding:0 22px 30px;color:var(--faint);font-size:12.5px;display:flex;gap:16px;flex-wrap:wrap}
footer .v{margin-left:auto}
/* Inside Hugging Face's frame, a gap in the page's own dark between their header and ours. */
html.framed body{border-top:6px solid var(--void)}
html.framed .top{box-shadow:0 -6px 0 var(--void),inset 0 1px 0 rgba(201,117,74,.35)}
@media (max-width:640px){.top nav a:not(.go){display:none}.bignums{grid-template-columns:1fr}.tools .legend{margin-left:0}}
</style>
</head>
<body>
<header class="top">
<svg class="mark" viewBox="254.5 140.5 514.25 742.25" fill="currentColor" aria-hidden="true"><path d="M511.3 140.6c-23.3 79.8-103 178.5-144.9 232.75L335.45 415.4a467.73 467.73 0 00-64.8 115.4c-65.5 193.1 80.8 351.3 237.85 351.7 21.26 1.1 42.56-1.3 63.06-7 90.8-18.87 211.87-120.04 195.47-280.9-17.9-164.8-187.55-272.65-251.8-443.84Zm10.2 374.9a61.05 61.05 0 00-67.1 81.6 61.05 61.05 0 00104.3 17.26 61.05 61.05 0 00-37.2-98.86ZM511.4 817.65l177.16-201.3-43-.15a44.56 44.56 0 00-36.2 18.47l-97.8 111.67-102.2-116.67c-16.06-18.94-38.06-12-74.9-13.4 5.7 7.3 159.75 179.73 176.93 201.4Z" fill-rule="evenodd"/></svg>
<span class="name">Inkvec</span><span class="by">by LogoLabs</span>
<nav><a href="#new">What's new</a><a href="#showcase">Before &amp; after</a><a href="#versus">Results</a><a href="#how">How it works</a><a href="https://github.com/logolabs/inkvec" target="_blank" rel="noopener noreferrer">GitHub</a><a class="go" href="studio/index.html">Open the Studio &rarr;</a></nav>
</header>
<main>
<section class="hero">
<div>
<h1>Exact vectors from your logo, in your browser.</h1>
<p class="lede">Inkvec traces logos, icons and flat artwork to SVG the way an artist would draw them: edges where the anti-aliasing says they are, circles as circles, one clean path per colour, gradients as gradients. <b>Inkvec Studio Lite</b> is the whole editor, running here as WebAssembly on your own processor. Nothing is uploaded.</p>
<div class="ctas">
<a class="btn primary" id="open" href="studio/index.html"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg>Open Inkvec Studio Lite</a>
<a class="btn big" href="https://github.com/logolabs/inkvec/releases" target="_blank" rel="noopener noreferrer"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3v12m0 0l-4-4m4 4l4-4M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2"/></svg>Desktop app</a>
</div>
<p class="cta-note" id="ctanote">Best on a laptop or desktop screen. Inside the Studio, <b>Full screen</b> is in the top bar.</p>
</div>
<label class="drop" id="drop">
<input type="file" id="file" accept="image/png,image/jpeg,image/webp,image/gif,image/bmp,image/tiff,image/svg+xml,.svg">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 16V4m0 0l-4 4m4-4l4 4"/><path d="M4 16v3a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-3"/></svg>
<div class="big">Drop a logo to open it in the Studio</div>
<div class="small">PNG, JPEG, WebP, GIF, BMP, TIFF or SVG. It is handed to the Studio inside this browser and traced there.</div>
<div class="samples" id="samples"></div>
</label>
</section>
<section class="sec" id="new">
<h2>What's new in 0.3.1</h2>
<p class="lede">With editability on, a trace is drawn more the way artists draw, and on a JPEG the edges land closer to the artist's. 0.3.0 brought traces closer to what the artist drew in every mode and condition, and much closer on the resized JPEGs and screenshots logos usually arrive as.</p>
<div class="newgrid">
<div class="new"><span class="tag">Editing</span><h3>Every edit has to pay for itself</h3><p>With editability on, a smooth join, a node at an extreme or an arc rewritten as cubics is kept only when the numbers it saves outweigh the fit it costs. The bonus each kind of edit receives was learned from the artists' own files. Against the plain trace, edge placement improves by up to 0.9%, and the drawing is 8 to 9% closer to the artists' by a battery of 28 drawing statistics.</p></div>
<div class="new"><span class="tag">Noisy input</span><h3>Edges on a JPEG</h3><p>The boundary solve fitted edges to the codec's ringing. On a lossy image that is not restored it is now skipped. On icons resized and saved at quality 80, edges sit 7% closer to the artist's and Quality's dE00 is 5.6% lower.</p></div>
<div class="new"><span class="tag">Fidelity</span><h3>Closer to the artist's file</h3><p>Quality's colour difference from the artist's own file (dE00) is 12.5% lower at 128 px, 12.1% at 512 px and 15.2% at 512 px on an opaque ground; Fast's is 9 to 12% lower. Quality also writes fewer parameters: 1.32 per artist parameter at 512 px opaque, down from 1.96.</p></div>
<div class="new"><span class="tag">Noisy input</span><h3>JPEGs and screenshots</h3><p>A JPEG's colour bleeds two or three pixels across every edge. Those halos now go back to the inks they lie between instead of becoming shapes of their own. On icons resized and saved at quality 80, Quality's dE00 is 10.4% lower and Fast writes 4.13 parameters per artist parameter, down from 7.29.</p></div>
<div class="new"><span class="tag">Shapes</span><h3>Whole shapes, under what covers them</h3><p>A shape partly hidden by another used to come back as the sliver that shows. Quality now draws it whole: the simplest shape that leaves every visible pixel as it was. A letter's counter is cut out of its glyph instead of painted over it, and each fill is one compound path.</p></div>
<div class="new"><span class="tag">Strokes</span><h3>Strokes by default</h3><p>Where a shape is a centreline and one width, Quality writes it as a stroked path whenever that is the shorter description at as good a fit. It had been opt-in; it now costs about a sixth more time on a 512 px trace.</p></div>
<div class="new"><span class="tag">Editing</span><h3>Nodes where a designer puts them</h3><p>Nodes sit at a curve's horizontal and vertical extremes, with the handles on the axis, where the fit prefers them. With editability on, a circular arc becomes cubics cut at its extremes and the joins are smooth, the way drawing tools write curves.</p></div>
<div class="new"><span class="tag">Proofs</span><h3>Proved, then checked</h3><p>A pixel's coverage is an area, so a column of pixels gives a boundary's exact mean height, whatever its slope. That theory is machine-checked in Lean, and results the theorems speak about are accepted only by checkers generated from the proofs.</p></div>
</div>
<p class="note">Full list, with the measurements behind each figure: the <a href="https://github.com/logolabs/inkvec/blob/main/CHANGELOG.md" target="_blank" rel="noopener noreferrer">changelog</a>.</p>
</section>
<section class="sec" id="showcase">
<h2>Before and after, with the geometry showing</h2>
<p class="lede" id="showlede">Every example in one scrolling panel: real brand logos, the benchmark's cases and more icons and emoji, each rendered from its source file at 1024&nbsp;px on white and traced from that raster by Inkvec (the current build) and by the other engines. Pick one to open it. The raster on the left, a trace on the right, moving together as you zoom. Switch the right side between engines, or the view to a wipe or an A/B flick. <b>Anchors</b> shows every on-curve point; <b>Handles</b> adds each curve's control points with their tangents.</p>
<div class="gal"><div class="cases" id="cases"></div><div><div class="tools" id="galtools"></div><div class="viewer" id="galview"></div><p class="caption" id="galcap"></p><div class="chips" id="galchips"></div></div></div>
</section>
<section class="sec" id="versus">
<h2>Inkvec vs the field</h2>
<p class="lede" id="versuslede"></p>
<div class="versus">
<div class="bignums" id="bignums"></div>
<div class="bars" id="bars"></div>
</div>
<p class="note" id="vtnote"></p>
<p class="note" id="tmnote" style="margin-top:14px;border-top:1px solid var(--rule);padding-top:12px"><b>Trademark notice &amp; nominative fair-use disclaimer:</b> All third-party trademarks, logos, brand names, and company marks displayed in this showcase are the property of their respective owners. Their depiction is strictly for nominative, non-commercial educational benchmarking and comparative vectorization demonstration. Inkvec and LogoLabs are not affiliated with, sponsored by, or endorsed by these trademark holders.</p>
</section>
<section class="sec how" id="how">
<h2>How it works</h2>
<p>Inkvec decides the geometry from the evidence in the pixels. It finds the inks by minimum description length, builds a planar map where every boundary is shared by exactly two shapes so there are never gaps, solves every boundary at once against an exact coverage render of the image, then fits lines, arcs, curves, circles and gradients priced in parameters. The result carries the artist's structure: a word is one path, a circle is a <code>&lt;circle&gt;</code>, and the number of coordinates follows the artwork rather than a tolerance slider.</p>
<p>Inkvec Studio Lite is the desktop app's own interface and code: the Studio's Rust core compiled to WebAssembly, run in a Web Worker on a pool of threads, one per core (where the browser allows it: a page opened in its own tab does). The trained denoiser for JPEG and screenshot damage is downloaded once, in the background as the Studio opens, and runs on your GPU through ONNX Runtime Web.</p>
</section>
<section class="sec">
<div class="desk">
<div><h2 style="margin:0">Inkvec Studio for the desktop</h2><p>The same editor for Windows, macOS and Linux, with folders of images traced in one batch, the <code>inkvec</code> command line, the right-click menu and traces up to 16384 px. Free and open source (Apache-2.0).</p></div>
<a class="btn big" href="https://github.com/logolabs/inkvec/releases" target="_blank" rel="noopener noreferrer">Download from GitHub</a>
</div>
</section>
</main>
<footer><span>Everything runs in your browser. Nothing is uploaded.</span><span>Inkvec is built by LogoLabs for its work on <a href="https://logolabs.org">logo generation using AI</a></span><span><a href="studio/guide/index.html">User guide</a></span><span>All trademarks property of respective owners (nominative fair use).</span><span>&copy; LogoLabs</span><span class="v mono" id="ver"></span></footer>
<script type="module">
const $ = id => document.getElementById(id);
const fmt = (v, d) => (v === undefined || v === null || Number.isNaN(v)) ? "—" : Number(v).toFixed(d);
const el = (tag, cls, html) => { const e = document.createElement(tag); if (cls) e.className = cls; if (html !== undefined) e.innerHTML = html; return e; };
const esc = s => String(s).replace(/[&<>"]/g, c => ({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;"}[c]));
// ---------------------------------------------------------------- the way into the Studio
// Hugging Face shows this page inside an iframe on huggingface.co, which sends no isolation
// headers, and a frame is cross-origin isolated only if every page above it is (web.dev,
// "Making your website cross-origin isolated using COOP and COEP"; MDN, crossOriginIsolated).
// A Studio opened inside the frame therefore runs on one core and without the denoiser,
// while the same address in a tab of its own is isolated, since the static host sends the
// headers itself: 2048 px Quality traces 1.7-3.5x faster there (r2-product, measured). So
// inside the frame every way into the Studio opens it in a tab of its own. At the static
// host's own address the page is isolated and the Studio opens in this tab, as before.
const framed = (() => { try { return window.self !== window.top; } catch { return true; } })() ||
[...(location.ancestorOrigins || [])].some(o => /(^|\.)huggingface\.co(:\d+)?$/.test(o.replace(/^[a-z]+:\/\//, '')));
const ownTab = framed && !self.crossOriginIsolated;
document.documentElement.classList.toggle('framed', framed);
if (ownTab) {
$("ctanote").innerHTML = `Best on a laptop or desktop screen. The Studio opens in a tab of its own, where it runs on every core and can use the denoiser.`;
for (const a of document.querySelectorAll('a[href^="studio/index.html"]')) a.target = "_blank";
}
// A dropped, chosen or pasted file never leaves the machine. At the static host's own
// address it is handed over through this origin's IndexedDB and the Studio opens in this
// tab. Inside Hugging Face's frame neither storage nor messages reach the Studio's own tab:
// the frame's storage is partitioned under huggingface.co (the tab cannot read it), and the
// Studio's isolation (COOP same-origin) puts its tab in another browsing context group, which
// cuts it off from this frame. Measured in a framed stand-in: the window.open handle reads
// closed once the Studio loads, a postMessage to it is dropped, the tab's window.opener is
// null, and BroadcastChannel is partitioned too. What does cross is the address, so the file
// rides in the URL fragment, which is never sent to any server (RFC 3986, section 3.5).
// Not from the literature: the fragment as a hand-off between a partitioned frame and an
// isolated tab; see also: WHATWG HTML, "Cross-origin opener policies" (browsing context
// group switches), and Chromium's storage partitioning (third-party storage keyed by the
// top-level site).
const HANDOFF_DB = "inkvec-handoff";
// The largest file that fits: base64 makes 1.5 MB into 2,000,000 characters, inside
// Chromium's 2 MiB limit on a URL (url::kMaxURLChars); a longer one opens as about:blank.
const HANDOFF_MAX = 1_500_000;
function handOffHere(name, bytes){
const req = indexedDB.open(HANDOFF_DB, 1);
req.onupgradeneeded = () => req.result.createObjectStore("files");
req.onsuccess = () => {
const tx = req.result.transaction("files", "readwrite");
tx.objectStore("files").put({ name, bytes }, "open");
tx.oncomplete = () => { location.href = "studio/index.html?open=handoff"; };
};
req.onerror = () => { location.href = "studio/index.html"; };
}
// base64url (RFC 4648, section 5), in slices so a large file never builds one huge argument list.
function base64url(bytes){
let s = "";
for (let i = 0; i < bytes.length; i += 0x8000) s += String.fromCharCode.apply(null, bytes.subarray(i, i + 0x8000));
return btoa(s).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
}
function handOffUrl(name, bytes){
return bytes.length <= HANDOFF_MAX ? `studio/index.html#open=${base64url(bytes)}&name=${encodeURIComponent(name)}` : null;
}
const drop = $("drop");
function release(){
drop.classList.remove("holding");
$("handoff")?.remove();
}
// Inside the frame: the file goes to a tab of its own. A browser lets a page open a tab only
// just after a click or a key press (transient user activation); choosing a file or pressing
// Ctrl+V leaves one, a file dropped from another application does not. Without one, the
// drop zone holds the file and offers the tab as a button, whose click is the activation.
function holdForTab(name, bytes, url){
release();
const mb = (bytes.length / 1e6).toFixed(1);
const card = el("div", "handoff");
card.id = "handoff";
card.setAttribute("role", "group");
card.setAttribute("aria-label", "Open the file in the Studio");
card.append(el("div", "big", url ? `${esc(name)} is ready to open` : `${esc(name)} is ${mb} MB`));
card.append(el("div", "small", url
? "It opens in a tab of its own, where the Studio runs on every core and can use the denoiser."
: `From inside Hugging Face's page, a file can reach a tab of its own only inside the page address, which holds up to ${(HANDOFF_MAX / 1e6).toFixed(1)} MB. Open the Studio in its own tab and drop the file there, or open it here, on one core.`));
const acts = el("div", "acts");
const tab = el("button", "btn primary", url ? "Open in its own tab" : "Open the Studio in its own tab");
tab.type = "button";
tab.dataset.act = "tab";
tab.addEventListener("click", e => { e.preventDefault(); e.stopPropagation(); window.open(url || "studio/index.html", "_blank"); release(); });
const here = el("button", "btn", "Open here, on one core");
here.type = "button";
here.dataset.act = "here";
here.addEventListener("click", e => { e.preventDefault(); e.stopPropagation(); handOffHere(name, bytes); });
const other = el("button", "btn", "Another file");
other.type = "button";
other.dataset.act = "cancel";
other.addEventListener("click", e => { e.preventDefault(); e.stopPropagation(); release(); });
acts.append(tab, here, other);
card.append(acts);
drop.classList.add("holding");
drop.append(card);
tab.focus();
}
async function handOff(file){
const name = file.name || "pasted image";
const bytes = new Uint8Array(await file.arrayBuffer());
if (!ownTab) return handOffHere(name, bytes);
const url = handOffUrl(name, bytes);
if (url && navigator.userActivation?.isActive && window.open(url, "_blank")) return;
holdForTab(name, bytes, url);
}
$("file").addEventListener("change", e => { const f = e.target.files[0]; e.target.value = ""; if (f) handOff(f); });
drop.addEventListener("click", e => { if (drop.classList.contains("holding")) e.preventDefault(); });
drop.addEventListener("dragover", e => { e.preventDefault(); drop.classList.add("over"); });
drop.addEventListener("dragleave", () => drop.classList.remove("over"));
drop.addEventListener("drop", e => { e.preventDefault(); drop.classList.remove("over"); const f = e.dataTransfer.files[0]; if (f) handOff(f); });
document.addEventListener("paste", e => { const f = [...(e.clipboardData?.files || [])][0]; if (f) handOff(f); });
for (const [file, label] of [["flat-logo.png", "Flat logo"], ["crest-filigree.png", "Crest"], ["signature-bw.png", "Signature"]]){
const a = el("a"); a.href = `studio/index.html?sample=${file}`; a.innerHTML = `<img src="studio/samples/${file}" alt="">${label}`;
if (ownTab) a.target = "_blank";
a.addEventListener("click", e => e.stopPropagation());
$("samples").appendChild(a);
}
// ---------------------------------------------------------------- geometry overlays
function parsePath(d, tx, ty){
const toks = d.match(/[MLHVCSQTAZmlhvcsqtaz]|-?\d*\.?\d+(?:e[-+]?\d+)?/gi) || [];
const anchors = [], handles = [];
let i = 0, cx = 0, cy = 0, sx = 0, sy = 0, cmd = null, pc = null, pcx = 0, pcy = 0;
const num = () => parseFloat(toks[i++]);
const push = (x,y) => anchors.push([x+tx, y+ty]);
const hd = (ax,ay,bx,by) => handles.push([[ax+tx,ay+ty],[bx+tx,by+ty]]);
while (i < toks.length){
const t = toks[i];
if (/[A-Za-z]/.test(t)){ cmd = t; i++; if (cmd==='Z'||cmd==='z'){ cx = sx; cy = sy; pc = null; continue; } }
if (!cmd) break;
const rel = cmd === cmd.toLowerCase(); const C = cmd.toUpperCase();
if (C === 'M'){ let x = num(), y = num(); if (rel){x+=cx;y+=cy;} cx=x;cy=y;sx=x;sy=y; push(x,y); cmd = rel?'l':'L'; pc=null; continue; }
if (C === 'L'){ let x = num(), y = num(); if (rel){x+=cx;y+=cy;} cx=x;cy=y; push(x,y); pc=null; continue; }
if (C === 'H'){ let x = num(); if (rel) x+=cx; cx=x; push(cx,cy); pc=null; continue; }
if (C === 'V'){ let y = num(); if (rel) y+=cy; cy=y; push(cx,cy); pc=null; continue; }
if (C === 'C'){ let x1=num(),y1=num(),x2=num(),y2=num(),x=num(),y=num(); if (rel){x1+=cx;y1+=cy;x2+=cx;y2+=cy;x+=cx;y+=cy;} hd(cx,cy,x1,y1); hd(x,y,x2,y2); cx=x;cy=y; push(x,y); pc='C'; pcx=x2; pcy=y2; continue; }
if (C === 'S'){ let x2=num(),y2=num(),x=num(),y=num(); if (rel){x2+=cx;y2+=cy;x+=cx;y+=cy;} const x1 = pc==='C' ? 2*cx-pcx : cx, y1 = pc==='C' ? 2*cy-pcy : cy; hd(cx,cy,x1,y1); hd(x,y,x2,y2); cx=x;cy=y; push(x,y); pc='C'; pcx=x2; pcy=y2; continue; }
if (C === 'Q'){ let x1=num(),y1=num(),x=num(),y=num(); if (rel){x1+=cx;y1+=cy;x+=cx;y+=cy;} hd(cx,cy,x1,y1); hd(x,y,x1,y1); cx=x;cy=y; push(x,y); pc='Q'; pcx=x1; pcy=y1; continue; }
if (C === 'T'){ let x=num(),y=num(); if (rel){x+=cx;y+=cy;} const x1 = pc==='Q' ? 2*cx-pcx : cx, y1 = pc==='Q' ? 2*cy-pcy : cy; hd(cx,cy,x1,y1); hd(x,y,x1,y1); cx=x;cy=y; push(x,y); pc='Q'; pcx=x1; pcy=y1; continue; }
if (C === 'A'){ num();num();num();num();num(); let x=num(),y=num(); if (rel){x+=cx;y+=cy;} cx=x;cy=y; push(x,y); pc=null; continue; }
i++;
}
return {anchors, handles};
}
// The translation of an element and its groups: the only transform these tracers write.
const offsetOf = e => { let x = 0, y = 0; for (let n = e; n && n.tagName.toLowerCase() !== 'svg'; n = n.parentElement){ const m = (n.getAttribute('transform')||'').match(/translate\(\s*(-?[\d.e+-]+)[ ,]*(-?[\d.e+-]+)?\s*\)/i); if (m){ x += parseFloat(m[1]); y += parseFloat(m[2]||'0'); } } return [x, y]; };
function svgEl(text){
const s = new DOMParser().parseFromString(text, 'image/svg+xml').documentElement;
if (!s || s.tagName.toLowerCase() !== 'svg') return null;
// Some engines write only a width and a height; the pane needs a viewBox to scale into.
if (!s.getAttribute('viewBox')){ const w = parseFloat(s.getAttribute('width')), h = parseFloat(s.getAttribute('height')); if (w > 0 && h > 0) s.setAttribute('viewBox', `0 0 ${w} ${h}`); }
s.removeAttribute('width'); s.removeAttribute('height'); s.setAttribute('preserveAspectRatio','xMidYMid meet');
return document.importNode(s, true);
}
function overlay(src){
const ns = 'http://www.w3.org/2000/svg';
const ov = document.createElementNS(ns, 'svg'); ov.setAttribute('viewBox', src.getAttribute('viewBox') || '0 0 100 100'); ov.setAttribute('class','ov'); ov.setAttribute('preserveAspectRatio','xMidYMid meet');
let Aa = '', H = '', HD = '', n = 0;
for (const e of src.querySelectorAll('path')){
const [tx, ty] = offsetOf(e);
const {anchors, handles} = parsePath(e.getAttribute('d')||'', tx, ty); n += anchors.length;
for (const [x,y] of anchors) Aa += `M${x.toFixed(2)} ${y.toFixed(2)}h0.001`;
for (const [a,b] of handles){ H += `M${a[0].toFixed(2)} ${a[1].toFixed(2)}L${b[0].toFixed(2)} ${b[1].toFixed(2)}`; HD += `M${b[0].toFixed(2)} ${b[1].toFixed(2)}h0.001`; }
}
for (const e of src.querySelectorAll('circle, ellipse')){ const [tx, ty] = offsetOf(e); Aa += `M${(parseFloat(e.getAttribute('cx'))+tx).toFixed(2)} ${(parseFloat(e.getAttribute('cy'))+ty).toFixed(2)}h0.001`; n++; }
const mk = (d, cls) => { const p = document.createElementNS(ns,'path'); p.setAttribute('d', d||'M0 0'); p.setAttribute('class', cls); return p; };
const h = mk(H,'h'), hdp = mk(HD,'hd'), a = mk(Aa,'a'); ov.append(h, hdp, a);
return {ov, h, hd: hdp, a, n};
}
function vectorLayer(svgText){
const fill = svgEl(svgText); const wire = svgEl(svgText); wire.classList.add('wire');
const o = overlay(fill);
const root = el('div', 'layer'); root.append(fill, wire, o.ov);
const set = L => { root.dataset.layer = L; fill.style.display = L === 'wire' ? 'none' : ''; fill.style.opacity = (L==='anchor'||L==='handle') ? '.35' : '1'; wire.style.display = L === 'fill' ? 'none' : ''; o.a.style.display = (L==='anchor'||L==='handle') ? '' : 'none'; o.h.style.display = o.hd.style.display = (L==='handle') ? '' : 'none'; };
set('fill');
return {root, set, anchors: o.n};
}
const imgLayer = src => { const w = el('div', 'layer'); const im = document.createElement('img'); im.src = src; im.alt = ''; w.appendChild(im); return w; };
// ---------------------------------------------------------------- viewer: side by side, wipe, flick
function viewer(host){
host.innerHTML = '';
const mkPane = () => { const p = el('div', 'pane'); const chk = el('div', 'checker'); const cam = el('div', 'cam'); const tag = el('span', 'ptag'); const zl = el('span', 'zoomlbl', '1.0×'); p.append(chk, cam, tag, zl); return {p, cam, tag, zl}; };
const L = mkPane(), R = mkPane();
const rightWrap = el('div', 'rightwrap'); const camW = el('div', 'cam'); rightWrap.appendChild(camW);
const tagR2 = el('span', 'ptag r'); const divider = el('div', 'divider');
L.p.append(rightWrap, tagR2, divider);
host.append(L.p, R.p);
const st = {z:1, x:0, y:0, split:0.5, mode:'side', flick:'left'};
let rightNode = null;
// Zoom resizes the camera box (the SVG re-renders at the new size, so it stays crisp at
// any magnification); only the pan is a transform.
const view = () => { const t = `translate(${st.x}px,${st.y}px)`; const sz = (st.z * 100) + '%'; for (const c of [L.cam, R.cam, camW]){ c.style.transform = t; c.style.width = sz; c.style.height = sz; } L.zl.textContent = R.zl.textContent = st.z.toFixed(1) + '×'; };
const setSplit = f => { st.split = Math.min(1, Math.max(0, f)); const px = st.split * L.p.getBoundingClientRect().width; rightWrap.style.clipPath = `inset(0 0 0 ${px}px)`; divider.style.left = px + 'px'; };
function layout(){
host.classList.toggle('single', st.mode !== 'side');
R.p.style.display = st.mode === 'side' ? '' : 'none';
divider.style.display = st.mode === 'wipe' ? '' : 'none';
rightWrap.style.display = st.mode === 'side' ? 'none' : '';
tagR2.style.display = st.mode === 'wipe' ? '' : 'none';
if (rightNode){ (st.mode === 'side' ? R.cam : camW).appendChild(rightNode); }
if (st.mode === 'wipe'){ setSplit(st.split); L.cam.style.visibility = ''; rightWrap.style.visibility = ''; }
else if (st.mode === 'flick'){ rightWrap.style.clipPath = 'none'; L.cam.style.visibility = st.flick === 'left' ? '' : 'hidden'; rightWrap.style.visibility = st.flick === 'right' ? '' : 'hidden'; L.tag.textContent = 'showing ' + (st.flick === 'left' ? L.tag.dataset.n : R.tag.dataset.n); }
else { L.cam.style.visibility = ''; L.tag.textContent = L.tag.dataset.n || ''; }
}
let drag = null, onDiv = false;
for (const P of [L.p, R.p]){
P.addEventListener('wheel', ev => { ev.preventDefault(); const r = P.getBoundingClientRect(), mx = ev.clientX - r.left, my = ev.clientY - r.top; const f = Math.exp(-ev.deltaY * 0.0015), nz = Math.min(40, Math.max(1, st.z * f)), k = nz / st.z; st.x = mx - (mx - st.x) * k; st.y = my - (my - st.y) * k; st.z = nz; view(); }, {passive:false});
P.addEventListener('pointerdown', ev => { onDiv = !!ev.target.closest('.divider'); drag = [ev.clientX - st.x, ev.clientY - st.y]; P.setPointerCapture(ev.pointerId); });
P.addEventListener('pointermove', ev => { if (!drag) return; if (onDiv){ const r = L.p.getBoundingClientRect(); setSplit((ev.clientX - r.left) / r.width); return; } st.x = ev.clientX - drag[0]; st.y = ev.clientY - drag[1]; view(); });
const up = () => { drag = null; onDiv = false; }; P.addEventListener('pointerup', up); P.addEventListener('pointercancel', up);
P.addEventListener('dblclick', () => { st.z = 1; st.x = 0; st.y = 0; view(); });
}
window.addEventListener('resize', () => { if (st.mode === 'wipe') setSplit(st.split); });
layout(); view();
return {
setLeft(node, label){ L.cam.innerHTML = ''; if (node) L.cam.appendChild(node); L.tag.dataset.n = label || ''; L.tag.textContent = label || ''; },
setRight(node, label){ rightNode = node; R.cam.innerHTML = ''; camW.innerHTML = ''; if (node) (st.mode === 'side' ? R.cam : camW).appendChild(node); R.tag.dataset.n = label || ''; R.tag.textContent = label || ''; tagR2.textContent = label || ''; layout(); },
setMode(m){ st.mode = m; layout(); },
flick(side){ st.flick = side; if (st.mode === 'flick') layout(); },
zoom(z){ const r = L.p.getBoundingClientRect(); st.x = (r.width - r.width*z)/2; st.y = (r.height - r.height*z)/2; st.z = z; view(); },
};
}
function seg(items, on){
const s = el('div', 'seg');
for (const [key, label, pressed] of items){ const b = el('button', '', label); b.dataset.k = key; b.setAttribute('aria-pressed', !!pressed); b.addEventListener('click', () => { for (const o of s.children) o.setAttribute('aria-pressed','false'); b.setAttribute('aria-pressed','true'); on(key); }); s.appendChild(b); }
return s;
}
// Space flicks the gallery while the pointer is over it.
let hot = null;
document.addEventListener('keydown', e => { if (e.code === 'Space' && hot && !e.repeat){ e.preventDefault(); hot.flick('right'); } });
document.addEventListener('keyup', e => { if (e.code === 'Space' && hot) hot.flick('left'); });
// ---------------------------------------------------------------- showcase + results
// Every number below is read from showcase.json, which tools/showcase_data.py writes: Inkvec
// traced afresh by the build named in it, the other engines' traces and scores from their
// recorded runs. A case's raster and SVGs are in showcase/<key>.json, fetched when opened.
const SHORT = {"inkvec": "Inkvec", "vtracer-1.0-simplify": "VTracer 1.0, best flags", "trazor-auto": "Trazor", "vtracer-1.0-default": "VTracer 1.0", "vtracer-default": "VTracer 0.6"};
async function load(){
let d;
try { d = await (await fetch('showcase.json')).json(); } catch (e) { $("showlede").textContent = 'The showcase data could not be loaded.'; return; }
gallery(d); results(d);
}
const caseData = new Map();
function fetchCase(key){
if (!caseData.has(key)) caseData.set(key, fetch(`showcase/${key}.json`).then(r => r.json()));
return caseData.get(key);
}
function gallery(d){
const v = viewer($("galview"));
$("galview").addEventListener('pointerenter', () => hot = v);
$("galview").addEventListener('pointerleave', () => hot = null);
let cur = d.sets[0].cases[0], other = 'inkvec', layer = 'fill', layers = null, token = 0;
const tiles = new Map();
const apply = async () => {
const c = cur, mine = ++token;
for (const [key, b] of tiles) b.setAttribute('aria-pressed', String(key === c.key));
const isBrand = c.what.includes("brand") || c.key.startsWith("brand");
$("galcap").innerHTML = `<b>${esc(c.label)}</b> &middot; ${esc(c.what)}` + (isBrand ? ` <span style="color:var(--faint);font-size:11px" title="Nominative benchmark demonstration. All trademarks belong to their respective owners.">(nominative benchmark)</span>` : '');
const m = c.m.inkvec, w = c.m[other];
$("galchips").innerHTML = `<span class="chip win">Inkvec dE00 <b>${fmt(m.de1024,3)}</b></span><span class="chip win"><b>${m.paths}</b> paths · <b>${m.coordinates}</b> coordinates · <b>${(m.bytes/1024).toFixed(1)} KB</b></span>` +
(other === 'inkvec' ? '' : `<span class="chip vt">${esc(SHORT[other])} dE00 <b>${fmt(w.de1024,3)}</b></span><span class="chip vt"><b>${w.paths}</b> paths · <b>${w.coordinates}</b> coordinates · <b>${(w.bytes/1024).toFixed(1)} KB</b></span>`) +
`<span class="chip vt">the artist's file: <b>${c.artist.paths}</b> paths · <b>${c.artist.coordinates}</b> coordinates</span>`;
const body = await fetchCase(c.key);
if (mine !== token) return;
const ours = vectorLayer(body.svg.inkvec);
const right = other === 'inkvec' ? ours : vectorLayer(body.svg[other]);
layers = other === 'inkvec' ? [ours] : [ours, right];
for (const x of layers) x.set(layer);
if (other === 'inkvec'){ v.setLeft(imgLayer(body.input), 'raster'); v.setRight(ours.root, `inkvec · ${ours.anchors} anchors`); }
else { v.setLeft(ours.root, `inkvec · ${ours.anchors} anchors`); v.setRight(right.root, `${SHORT[other]} · ${right.anchors} anchors`); }
};
// Every set in one panel that scrolls inside itself; thumbnails come with the index, a
// case's pictures only when it is opened.
const panel = $("cases"), order = [];
new ResizeObserver(() => { const h = $("galview").getBoundingClientRect().height; if (h > 200) panel.style.height = h + 'px'; }).observe($("galview"));
const pick = (c, focus) => {
cur = c; apply();
const b = tiles.get(c.key);
// Scroll the panel, never the page: the selected case stays in view inside the list.
const pr = panel.getBoundingClientRect(), br = b.getBoundingClientRect(), head = 34;
if (br.top < pr.top + head) panel.scrollTop -= pr.top + head - br.top;
else if (br.bottom > pr.bottom) panel.scrollTop += br.bottom - pr.bottom + 6;
if (br.left < pr.left) panel.scrollLeft -= pr.left - br.left + 30; else if (br.right > pr.right) panel.scrollLeft += br.right - pr.right + 6;
if (focus) b.focus({preventScroll: true});
};
panel.addEventListener('keydown', e => {
const at = order.findIndex(c => c.key === cur.key), cols = getComputedStyle(panel).display === 'flex' ? 1 : 3;
const step = {ArrowDown: cols, ArrowUp: -cols, ArrowRight: 1, ArrowLeft: -1, Home: -at, End: order.length - 1 - at}[e.key];
if (step === undefined) return;
e.preventDefault();
pick(order[Math.min(order.length - 1, Math.max(0, at + step))], true);
});
for (const s of d.sets){
$("cases").append(el('div', 'sethead', `${esc(s.label)}<span>${s.cases.length}</span>`));
const grid = el('div', 'tiles');
for (const c of s.cases){
const b = el('button', 'case', `<span class="th"><img src="${c.thumb}" alt="" loading="lazy"></span><span class="nm">${esc(c.label)}</span>`);
b.title = `${c.label} · ${c.what}`;
b.dataset.key = c.key;
b.addEventListener('click', () => pick(c, false));
tiles.set(c.key, b); order.push(c);
grid.appendChild(b);
}
$("cases").appendChild(grid);
}
const engines = d.gallery_engines;
const t = $("galtools");
t.append(el('span', 'lbl', 'compare'), seg([['inkvec', 'raster · inkvec', true], ...engines.filter(e => e !== 'inkvec').map(e => [e, 'inkvec · ' + SHORT[e]])], k => { other = k; apply(); }));
t.append(el('span', 'lbl', 'view'), seg([['side','Side by side',true],['wipe','Wipe'],['flick','A / B']], m => v.setMode(m)));
const fl = el('button', '', 'Flick'); fl.title = 'Hold to show the other side (or hold Space over the viewer)';
fl.addEventListener('pointerdown', () => v.flick('right')); fl.addEventListener('pointerup', () => v.flick('left')); fl.addEventListener('pointerleave', () => v.flick('left'));
t.append(fl);
t.append(el('span', 'lbl', 'show'), seg([['fill','Fill',true],['wire','Wireframe'],['anchor','Anchors'],['handle','Handles']], L => { layer = L; for (const x of layers || []) x.set(L); }));
const z = el('div', 'seg'); for (const k of [1, 4, 12]){ const b = el('button', '', k + '×'); b.addEventListener('click', () => v.zoom(k)); z.appendChild(b); } t.append(el('span', 'lbl', 'zoom'), z);
t.append(el('span', 'legend', '<span><i style="background:var(--anchor)"></i>anchor</span><span><i style="background:var(--handle)"></i>control point &amp; tangent</span>'));
apply();
}
const table = (rows, caption) => `<table><caption>${caption}</caption><thead><tr><th>engine</th><th>mean dE00</th><th>median dE00</th><th>DISTS</th><th>DINO</th><th>geometry</th><th>coords</th><th>seconds</th></tr></thead><tbody>` +
rows.map(r => `<tr class="${r.id === 'inkvec' ? 'win' : ''}"><td>${esc(r.name)}</td><td class="mono">${fmt(r.de_mean,3)}</td><td class="mono">${fmt(r.de_median,3)}</td><td class="mono">${fmt(r.dists,4)}</td><td class="mono">${fmt(r.dino,4)}</td><td class="mono">${fmt(r.geometry_mean,2)}&times;</td><td class="mono">${Math.round(r.coordinates)}</td><td class="mono">${fmt(r.seconds_median,2)}</td></tr>`).join('') +
`</tbody></table>`;
function results(d){
const us = d.engines.find(e => e.id === 'inkvec'), tz = d.engines.find(e => e.id === 'trazor-auto'), vt = d.engines.find(e => e.id === 'vtracer-default');
const wins = d.best_de_wins.inkvec || 0, b = d.brands, bwins = b.best_de_wins.inkvec || 0, cp = d.corpus, cwins = cp.best_de_wins.inkvec || 0;
$("versuslede").innerHTML = `${d.cases} benchmark cases &mdash; real icons and emoji across ${d.families.filter(f => f !== 'brands' && f !== 'synthetic').length} families, synthetic probes and real brand logos, the selection fixed from the seed <code>${esc(d.seed)}</code> &mdash; each rendered from its source SVG at ${d.size}&nbsp;px, traced by every engine from that raster and scored against the render: CIEDE2000 colour difference, DISTS and DINOv3 perceptual similarity, and geometry against the artist's own file (1.00&times; is exactly the artist's number of parameters). Inkvec had the lowest colour difference on <b>${wins} of ${d.cases}</b>; in the gallery's other sets, on <b>${bwins} of ${b.cases}</b> brand logos and <b>${cwins} of ${cp.cases}</b> more icons and emoji. VTracer is the widely used open-source tracer and the fastest thing here by far; that trade-off is shown too.`;
$("bignums").innerHTML = [
['colour difference, dE00', `${fmt(us.de_mean,3)} <small>mean</small>`, `median ${fmt(us.de_median,3)}; ${(tz.de_mean/us.de_mean).toFixed(1)}&times; lower than Trazor, ${(vt.de_mean/us.de_mean).toFixed(0)}&times; lower than VTracer (under 1 is invisible)`],
['geometry vs the artist', `${fmt(us.geometry_mean,2)}&times; <small>mean</small>`, `median ${fmt(us.geometry_median,2)}&times;; Trazor ${fmt(tz.geometry_mean,2)}&times;, VTracer ${fmt(vt.geometry_mean,2)}&times; (1.00&times; is the artist's own file)`],
['DINOv3 similarity', `${fmt(us.dino,4)}`, `1 is identical; DISTS ${fmt(us.dists,4)} (Trazor ${fmt(tz.dists,4)}, VTracer ${fmt(vt.dists,4)}; lower is better)`],
['seconds per case', `${fmt(us.seconds_median,2)} <small>median</small>`, `native command line; VTracer ${fmt(vt.seconds_median,2)} s, Trazor ${fmt(tz.seconds_median,2)} s`],
].map(([k, val, sub]) => `<div class="bignum"><div class="k">${k}</div><div class="v">${val}</div><div class="s">${sub}</div></div>`).join('');
$("bars").innerHTML = table(d.engines, `${d.cases} benchmark cases, re-run at ${d.size} px for this page`) + table(b.engines, `${b.cases} brand logos (the gallery's brand set)`) + table(cp.engines, `${cp.cases} more icons and emoji (the gallery's third set)`);
$("vtnote").innerHTML = `Means over the cases, except seconds (median, measured on a machine doing other work at the same time; treat them as approximate). Every case is rendered at ${d.size}&nbsp;px, square, on white with a 4% margin, traced by every engine from that raster and scored at 1024&nbsp;px; the pictures above and these tables are the same traces. Inkvec was traced by the current build (<code>${esc(d.inkvec.git)}</code>, ${esc(d.traced)}); the other engines have not changed, and their traces were made once at this size. The benchmark of record is the ${esc(d.date)} run at 512&nbsp;px (<code>out/${esc(d.run)}/results.json</code>, <code>bench/crosscompare_competitors.py</code>, the README's results); this page re-runs its 21 cases at ${d.size}&nbsp;px, where a logo's fine detail survives, so its numbers differ from the README's. The brand logos are real marks from an external dataset, not part of the repository: the twenty this page showed before, and more picked by the seed <code>${esc(d.pick_seed)}</code> alone (hash order, a quota per kind: gradients, thin lines, multi-colour, flat), not by how any engine traces them. The third set is more files from the repository's icon and emoji corpora, picked the same way. All are rendered and scored as the benchmark is. All of it is computed by <code>tools/showcase_data.py</code>. Method and every case: the <a href="https://github.com/logolabs/inkvec#results" target="_blank" rel="noopener noreferrer">README</a>.`;
}
load();
</script>
</body>
</html>