Creating Colorable SVGs in Illustrator

Absolutely. Here’s a clean, repeatable Illustrator → SVG workflow that gives you per-dot IDs you can target from React.

1) Draw and organize the dots

  1. Create a top-level layer named Logo.

  2. Inside it, add a sublayer named dots and draw your tiny circles there (Ellipse Tool L, hold Shift).

  3. Avoid clipping masks and effects; keep them as simple circles (no compound paths).

  4. If you need many dots in a pattern, you can:

    • Use Blend: draw two circles → Object › Blend › Make → Blend Options: Specified Steps → Object › Expand.

    • Or duplicate with Alt-drag and Align/Distribute.

2) Name each dot so it becomes an SVG id

Illustrator turns object (sublayer) names into SVG id values if you export with the right option.

  • Open the Layers panel. Each circle appears as a sublayer (a row with a small circle icon).

  • Double-click each sublayer name and rename: dot-01, dot-02, … dot-45.

Fast renaming (optional script)

If you have many dots, this tiny ExtendScript auto-numbers your selected items left-to-right, top-to-bottom:

  1. Select all your tiny circles (only them).

  2. File › Scripts › Other Script… and run this:

				
					/* Rename selection to dot-01, dot-02 ... by position (top-to-bottom, left-to-right) */
(function () {
  var doc = app.activeDocument;
  if (!doc || app.selection.length === 0) { alert('Select the circles first.'); return; }
  var items = [].slice.call(app.selection);
  // sort by y(desc) then x(asc) → top-to-bottom, left-to-right
  items.sort(function(a,b){
    var ay = a.visibleBounds[1], by = b.visibleBounds[1]; // top (y max)
    if (ay !== by) return by - ay;
    var ax = a.visibleBounds[0], bx = b.visibleBounds[0]; // left (x min)
    return ax - bx;
  });
  for (var i=0; i<items.length; i++) {
    var n = (i+1).toString().padStart(2,'0');
    items[i].name = 'dot-' + n; // becomes id="dot-xx" in SVG
  }
  alert('Renamed ' + items.length + ' items.');
})();

tip: Save this as rename-dots.jsx to reuse.

 

3) Keep colors override-friendly

You’ll control colors in React, so export fills in the easiest-to-override form:

  • Select all dots and set their fill to any solid color (not gradients). It’s fine if it’s not the final color.

  • No strokes.

  • Don’t put appearance styles in the Appearance panel (avoid extra groups/effects).

4) Export to SVG with the right options

Use File › Export › Export As… › SVG (or Save As › SVG), then:

  • Styling: Presentation Attributes ✅ (easiest to override from CSS)

  • Font: Convert to Outlines (or SVG) — doesn’t matter for dots

  • Images: Embed

  • Object IDs: Layer Names ✅ (this turns your dot-01 names into id="dot-01")

  • Decimal places: 2–3 (3 if you need precise placement)

  • Minify: On

  • Responsive: Off (unchecked)

 

 

5) (Optional) Turn IDs into data-dot attributes

React can target ids directly (#dot-01). If you prefer data-dot, do a quick post-process once:

  • Quick find/replace in a code editor:

    • Find: id="dot-

    • Replace: id="dot- (keep) and add a parallel data attribute: data-dot="

    • Example transform line:
      <circle id="dot-01" …> → <circle id="dot-01" data-dot="01" …>

Or use SVGO with a small plugin config later; not required.

6) Color from React

Two easy approaches:

CSS by ID

				
					import { ReactComponent as Logo } from './Logo.svg';

export default function Mark() {
  return (
    <div className="logo">
      <Logo />
      <style>{`
        .logo #dot-01 { fill: #FF6B6B; }
        .logo #dot-02 { fill: #FFD166; }
        .logo #dot-03 { fill: #06D6A0; }
      `}</style>
    </div>
  );
}

Dynamic (loop over 45 colors)

				
					const colors = ['#ff6b6b', '#ffd166', /* ...45 */];

<Logo className="logo" />
<style>{colors.map((c,i)=>`.logo #dot-${String(i+1).padStart(2,'0')} { fill: ${c}; }`).join('\n')}</style>

Troubleshooting / pro tips

  • If colors don’t override, you likely exported CSS Internal/Inline. Re-export with Presentation Attributes or add !important.

  • If your dots export as one compound path, you used Pathfinder › Unite. Keep them as separate circles.

  • Remove accidental clipping masks (Object › Clipping Mask › Release) so each dot remains its own element.

  • Keep every dot inside a single <g id="dots"> layer in Illustrator—makes later querying easy (and tidy).

If you want, paste your current SVG (or a small sample of 8–10 dots) and I’ll convert it to the final structure with IDs and a tiny React snippet that generates the CSS for all 45 colors automatically.

en_GB
hu_HU en_GB