Ideogram and Recraft

Ideogram 25,603 made its name on legible lettering, the weak spot of early diffusion models, and markets Ideogram 4.0 for "crystal-clear type." Its API charges per image: 4.0 Turbo $0.03, Default $0.06 and Quality $0.10, with transparent-background variants at the same prices up to 2K, and endpoints to remix, edit, reframe, remove a background ($0.01) and upscale ($0.06).

Recraft 35,388 targets designers and is the one service here that returns vector art: its Vector models emit editable SVG that SVG's techniques can restyle. API units cost $1 per 1,000. A raster Recraft V4.1 image costs $0.035 (V4.1 Flash $0.007, Pro $0.21), a V4.1 Vector image $0.08, and vectorizing an existing bitmap $0.01. For BookNest's icons (Transparent Icons), Recraft's SVG output would skip the tracing step at about 15 times Flare's price.

Why vector output matters: the same icon as a bitmap and as SVG, zoomed, with Recraft and Ideogram pricesHTMLLive

<!doctype html>
<style>
  body { margin: 0; padding: 8px; background: #fafaf7; font: 12px system-ui, sans-serif; color: #263238; max-width: 600px; }
  .row { display: flex; gap: 10px; }
  figure { margin: 0; text-align: center; }
  canvas, svg.icon { width: 180px; height: 180px; display: block; border: 1px solid #e0d8c8; background: #fff; }
  table { border-collapse: collapse; margin-top: 8px; background: #fff; }
  td, th { border: 1px solid #ddd; padding: 2px 8px; }
</style>
<p>Zoom <input type="range" id="z" min="1" max="8" step="0.5" value="5"> <b id="zv"></b></p>
<div class="row">
  <figure><canvas id="bmp" width="180" height="180"></canvas>raster (a 48 px PNG)</figure>
  <figure><svg class="icon" id="vec" viewBox="0 0 48 48"></svg>vector (Recraft SVG)</figure>
</div>
<table><tr><th>service</th><th>output</th><th>price per image</th></tr>
  <tr><td>Ideogram 4.0 Turbo / Default / Quality</td><td>raster, legible lettering</td><td>$0.03 / $0.06 / $0.10</td></tr>
  <tr><td>Recraft V4.1 (Flash / Pro)</td><td>raster</td><td>$0.035 ($0.007 / $0.21)</td></tr>
  <tr><td>Recraft V4.1 Vector</td><td>editable SVG</td><td>$0.08</td></tr>
  <tr><td>gpt-image-2.5-flare, low</td><td>raster</td><td>≈ $0.0052</td></tr></table>
<script>
  // The icon as SVG markup: a book with a bird, on a 48-unit grid
  const markup = `<path d="M6 30 Q15 25 24 30 L24 40 Q15 35 6 40 Z M42 30 Q33 25 24 30 L24 40 Q33 35 42 40 Z" fill="#1f5f8b"/>
    <ellipse cx="25" cy="22" rx="7" ry="5" fill="#e09a10"/><circle cx="30" cy="17" r="3.5" fill="#e09a10"/>
    <path d="M33 17 L37 18 L33 19 Z" fill="#b5452f"/>`;
  const vec = document.getElementById('vec');
  vec.innerHTML = `<g id="art">${markup}</g>`;
  // The raster: the same drawing rendered once at 48×48 pixels
  const small = document.createElement('canvas');
  small.width = small.height = 48;
  const img = new Image();
  img.src = 'data:image/svg+xml,' + encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48">${markup}</svg>`);
  const bmp = document.getElementById('bmp').getContext('2d');
  function draw() {
    const z = +document.getElementById('z').value, s = 48 / z, ox = 31 - s / 2, oy = 18 - s / 2;   // zoom toward the bird's head
    document.getElementById('zv').textContent = `${z}×`;
    bmp.imageSmoothingEnabled = false;
    bmp.clearRect(0, 0, 180, 180);
    bmp.drawImage(small, ox, oy, s, s, 0, 0, 180, 180);        // pixels grow into blocks
    vec.setAttribute('viewBox', `${ox} ${oy} ${s} ${s}`);       // vectors stay sharp at any zoom
  }
  img.decode().then(() => { small.getContext('2d').drawImage(img, 0, 0);  draw(); });
  document.getElementById('z').addEventListener('input', draw);
</script>

MENU