| <!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> |
| |
| |
| |
| @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); |
| --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} |
| 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)} |
| .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{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{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} |
| |
| .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{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)} |
| |
| .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}} |
| |
| |
| .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)} |
| .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{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} |
| |
| 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 & 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 →</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.2.0</h2> |
| <p class="lede">The Studio grew from a tracer with a report into an editor for the whole job, and it now runs in the browser as well as on the desktop.</p> |
| <div class="newgrid"> |
| <div class="new"><span class="tag">Palette</span><h3>Colour groups, gradients included</h3><p>Drag one ink onto another and they are drawn as one: the shapes between them join instead of keeping a traced seam. A group can become a chosen colour or one of its members, and a gradient member is extended over the whole group. Suggestions for near-duplicate inks are offered, never applied unasked.</p></div> |
| <div class="new"><span class="tag">Opening an image</span><h3>Auto, or a short Custom wizard</h3><p>Every image is traced at once. A card offers to keep that, or to walk through what the image is, clean-up, colours, detail and shape, with a live preview of each choice beside Auto's trace.</p></div> |
| <div class="new"><span class="tag">Fabricate</span><h3>Ready for cutters and lasers</h3><p>Layered vinyl with registration marks, inlay, print-then-cut stickers, stencils with bridges, and single-line paths for pens, scoring blades and lasers, in millimetres. A preflight shows what will not cut before anything is cut. SVG, DXF with true arcs, and GRBL G-code.</p></div> |
| <div class="new"><span class="tag">Honesty</span><h3>Certainty bands</h3><p>Where each traced boundary could be, measured from the pixels, drawn over the trace: sure, soft and unsure edges at a glance. On a clean 128-px emoji the median edge uncertainty is 0.09 px; the same image as a JPEG at quality 20 reads 0.50 px.</p></div> |
| <div class="new"><span class="tag">Transparency</span><h3>Clear ground stays clear</h3><p>Transparent images are traced as they are, and the clear ground no longer takes a slot from a colour cap: on ten emoji at four colours, mean dE00 went from 0.457 to 0.186. Side-by-side fills no longer let a hairline of background through.</p></div> |
| <div class="new"><span class="tag">Speed</span><h3>Faster, with identical output</h3><p>The curve fit and the ring repair run in parallel blocks, the palette and the boundary solve do only the work they read, and the Studio measures in parallel: on large images the slowest stages take a third to 70% less time, every change checked byte for byte against the build before.</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 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 & 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><circle></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>© 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 => ({"&":"&","<":"<",">":">",'"':"""}[c])); |
| |
| |
| |
| |
| const framed = (() => { try { return window.self !== window.top; } catch { return true; } })() || |
| [...(location.ancestorOrigins || [])].some(o => /(^|\.)huggingface\.co(:\d+)?$/.test(o.replace(/^[a-z]+:\/\//, ''))); |
| document.documentElement.classList.toggle('framed', framed); |
| if (framed) { |
| $("ctanote").innerHTML = `Best on a laptop or desktop screen. For the whole window and every core, <a href="studio/index.html" target="_blank" rel="noopener">open the Studio in its own tab</a>.`; |
| } |
| |
| |
| const HANDOFF_DB = "inkvec-handoff"; |
| function handOff(file){ |
| const req = indexedDB.open(HANDOFF_DB, 1); |
| req.onupgradeneeded = () => req.result.createObjectStore("files"); |
| req.onsuccess = async () => { |
| const bytes = new Uint8Array(await file.arrayBuffer()); |
| const tx = req.result.transaction("files", "readwrite"); |
| tx.objectStore("files").put({ name: file.name || "pasted image", bytes }, "open"); |
| tx.oncomplete = () => { location.href = "studio/index.html?open=handoff"; }; |
| }; |
| req.onerror = () => { location.href = "studio/index.html"; }; |
| } |
| $("file").addEventListener("change", e => { const f = e.target.files[0]; if (f) handOff(f); }); |
| const drop = $("drop"); |
| 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}`; |
| a.addEventListener("click", e => e.stopPropagation()); |
| $("samples").appendChild(a); |
| } |
| |
| |
| 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}; |
| } |
| |
| 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; |
| |
| 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; }; |
| |
| |
| 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; |
| |
| |
| 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; |
| } |
| |
| 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'); }); |
| |
| |
| |
| |
| |
| 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> · ${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`); } |
| }; |
| |
| |
| 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); |
| |
| 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 & 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)}×</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 — 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> — each rendered from its source SVG at ${d.size} 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× 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)}× lower than Trazor, ${(vt.de_mean/us.de_mean).toFixed(0)}× lower than VTracer (under 1 is invisible)`], |
| ['geometry vs the artist', `${fmt(us.geometry_mean,2)}× <small>mean</small>`, `median ${fmt(us.geometry_median,2)}×; Trazor ${fmt(tz.geometry_mean,2)}×, VTracer ${fmt(vt.geometry_mean,2)}× (1.00× 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} px, square, on white with a 4% margin, traced by every engine from that raster and scored at 1024 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 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} 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> |
|
|
