Vector Tools

Logos, illustrations and icon masters are drawn, not coded. The table compares the editors that export SVG well; prices are per user and month, as listed in September 2026.

Vector editors that export SVG
Tool	Runs	License and price	Notes
Inkscape 1.4.4 (May 2026)	Windows, macOS, Linux	GPL, free	Native SVG; Plain and Optimized SVG export
Penpot 96,807	Browser, self-hostable	MPL-2.0, free	SVG-based design and prototyping tool
SVG-Edit 7,850	Browser	MIT, free	Small editor to embed in your own app
Figma 867	Browser, desktop	Free Starter; Professional $16	Team design; SVG export per layer
Adobe Illustrator	Windows, macOS	Subscription	Industry standard for print and brand work
Affinity 36,778 (Canva 243 )	Windows, macOS	Free for individuals	Former paid suite; AI features need Canva premium

Whatever the editor, export with care: save "plain" rather than editor SVG, keep text as text unless the font cannot travel (Web Fonts), set a viewBox and no fixed size, and run SVGO 22,703 with the settings of Optimizing SVG with SVGO. For icon sets, draw on the 24-unit grid of Building the BookNest Icon Set so the exports drop straight into the sprite.

Vector editors that export SVG, compared on platform and priceHTMLLive

<!doctype html>
<style>
  body { margin: 0; font: 13px system-ui, sans-serif; background: #fafaf7; }
  svg { width: 100%; max-width: 600px; display: block; }
  .row:hover rect.bg { fill: #f1ede2; }
  .name { font-weight: 700; font-size: 14px; fill: #222; }
  .small { font-size: 11px; fill: #555; }
</style>
<svg id="tools" viewBox="0 0 600 330"></svg>
<script>
  const tools = [
    { name: 'Inkscape 1.4.4', runs: ['win', 'mac', 'linux'], license: 'GPL', free: true, note: 'Native SVG; Plain and Optimized export' },
    { name: 'Penpot', runs: ['web'], license: 'MPL-2.0', free: true, note: 'SVG-based design and prototyping' },
    { name: 'SVG-Edit', runs: ['web'], license: 'MIT', free: true, note: 'Small editor to embed in your app' },
    { name: 'Figma', runs: ['web', 'win', 'mac'], license: 'Free / $16', free: false, note: 'Team design; SVG export per layer' },
    { name: 'Illustrator', runs: ['win', 'mac'], license: 'Subscription', free: false, note: 'Print and brand standard' },
    { name: 'Affinity', runs: ['win', 'mac'], license: 'Free for individuals', free: true, note: 'AI features need Canva premium' }
  ];
  const platforms = ['win', 'mac', 'linux', 'web'];
  const NS = 'http://www.w3.org/2000/svg';
  const svg = document.getElementById('tools');
  const add = (parent, name, attrs, text) => {
    const n = document.createElementNS(NS, name);
    for (const k in attrs) n.setAttribute(k, attrs[k]);
    if (text) n.textContent = text;
    parent.appendChild(n);
    return n;
  };

  // Header
  add(svg, 'text', { x: 12, y: 22, class: 'name' }, 'Editor');
  platforms.forEach((p, i) => add(svg, 'text', { x: 222 + i * 42, y: 22, class: 'small', 'text-anchor': 'middle' }, p));
  add(svg, 'text', { x: 400, y: 22, class: 'small' }, 'License / price');

  tools.forEach((t, r) => {
    const y = 34 + r * 48;
    const g = add(svg, 'g', { class: 'row' });
    add(g, 'rect', { class: 'bg', x: 4, y, width: 592, height: 44, rx: 6, fill: '#fff', stroke: '#e3dfd4' });
    add(g, 'text', { x: 12, y: y + 19, class: 'name' }, t.name);
    add(g, 'text', { x: 12, y: y + 35, class: 'small' }, t.note);
    // one dot per platform, filled when the tool runs there
    platforms.forEach((p, i) => add(g, 'circle', {
      cx: 222 + i * 42, cy: y + 22, r: 8,
      fill: t.runs.includes(p) ? '#3d5a80' : 'none', stroke: '#3d5a80', 'stroke-width': 1.5 }));
    const badge = add(g, 'rect', { x: 400, y: y + 11, width: 180, height: 22, rx: 11, fill: t.free ? '#d8eee2' : '#fbe3da' });
    add(g, 'text', { x: 490, y: y + 26, 'text-anchor': 'middle', class: 'small' }, t.license);
  });
</script>

MENU