{"id":14431,"date":"2025-11-07T09:24:06","date_gmt":"2025-11-07T08:24:06","guid":{"rendered":"https:\/\/pappcseperke.hu\/?p=14431"},"modified":"2026-01-31T04:18:36","modified_gmt":"2026-01-31T03:18:36","slug":"creating-colorable-svgs-in-illustrator","status":"publish","type":"post","link":"https:\/\/pappcseperke.hu\/hu\/creating-colorable-svgs-in-illustrator\/","title":{"rendered":"Creating Colorable SVGs in Illustrator"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Illustrator \u2192 SVG workflow that gives you per-dot IDs you can target from React.<\/p>

1) Draw and organize the dots<\/h2>

  1. Create a top-level layer named Logo<\/code>.<\/p><\/li>

  2. Inside it, add a sublayer named dots<\/code> and draw your tiny circles there (Ellipse Tool L<\/code>, hold Shift<\/code>).<\/p><\/li>

  3. Avoid clipping masks and effects; keep them as simple circles (no compound paths).<\/p><\/li>

  4. If you need many dots in a pattern, you can:<\/p>

    • Use Blend<\/strong>: draw two circles \u2192 Object \u203a Blend \u203a Make \u2192 Blend Options: Specified Steps \u2192 Object \u203a Expand.<\/p><\/li>

    • Or duplicate with Alt-drag and Align\/Distribute.<\/p><\/li><\/ul><\/li><\/ol>

      2) Name each dot so it becomes an SVG id<\/code><\/h2>

      Illustrator turns object (sublayer) names into SVG id<\/code> values if you export with the right option.<\/p>

      • Open the Layers<\/strong> panel. Each circle appears as a sublayer (a row with a small circle icon).<\/p><\/li>

      • Double-click each sublayer name and rename: dot-01<\/code>, dot-02<\/code>, \u2026 dot-45<\/code>.<\/p><\/li><\/ul>

        Fast renaming (optional script)<\/h3>

        If you have many dots, this tiny ExtendScript auto-numbers your selected<\/strong> items left-to-right, top-to-bottom:<\/p>

        1. Select all your tiny circles (only them).<\/p><\/li>

        2. File \u203a Scripts \u203a Other Script\u2026 and run this:<\/p><\/li><\/ol>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

          \n\t\t\t\t
          \n\t\t\t\t\t\t\t
          \n\t\t\t
          \n\t\t\t\t\n\t\t\t\t\t\/* Rename selection to dot-01, dot-02 ... by position (top-to-bottom, left-to-right) *\/\n(function () {\n  var doc = app.activeDocument;\n  if (!doc || app.selection.length === 0) { alert('Select the circles first.'); return; }\n  var items = [].slice.call(app.selection);\n  \/\/ sort by y(desc) then x(asc) \u2192 top-to-bottom, left-to-right\n  items.sort(function(a,b){\n    var ay = a.visibleBounds[1], by = b.visibleBounds[1]; \/\/ top (y max)\n    if (ay !== by) return by - ay;\n    var ax = a.visibleBounds[0], bx = b.visibleBounds[0]; \/\/ left (x min)\n    return ax - bx;\n  });\n  for (var i=0; i<items.length; i++) {\n    var n = (i+1).toString().padStart(2,'0');\n    items[i].name = 'dot-' + n; \/\/ becomes id=\"dot-xx\" in SVG\n  }\n  alert('Renamed ' + items.length + ' items.');\n})();\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-23ba121 elementor-widget elementor-widget-text-editor\" data-id=\"23ba121\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>tip: Save this as <code data-start=\"1977\" data-end=\"1994\">rename-dots.jsx<\/code> to reuse.<\/p><p>\u00a0<\/p><h2 data-start=\"2006\" data-end=\"2040\">3) Keep colors override-friendly<\/h2><p data-start=\"2041\" data-end=\"2121\">You\u2019ll control colors in React, so export fills in the easiest-to-override form:<\/p><ul data-start=\"2123\" data-end=\"2340\"><li data-start=\"2123\" data-end=\"2238\"><p data-start=\"2125\" data-end=\"2238\">Select all dots and <strong data-start=\"2145\" data-end=\"2182\">set their fill to any solid color<\/strong> (not gradients). It\u2019s fine if it\u2019s not the final color.<\/p><\/li><li data-start=\"2239\" data-end=\"2252\"><p data-start=\"2241\" data-end=\"2252\">No strokes.<\/p><\/li><li data-start=\"2253\" data-end=\"2340\"><p data-start=\"2255\" data-end=\"2340\">Don\u2019t put appearance styles in the <strong data-start=\"2290\" data-end=\"2304\">Appearance<\/strong> panel (avoid extra groups\/effects).<\/p><\/li><\/ul><h2 data-start=\"2342\" data-end=\"2383\">4) Export to SVG with the right options<\/h2><p data-start=\"2384\" data-end=\"2450\">Use <strong data-start=\"2388\" data-end=\"2424\">File \u203a Export \u203a Export As\u2026 \u203a SVG<\/strong> (or Save As \u203a SVG), then:<\/p><ul data-start=\"2452\" data-end=\"2815\"><li data-start=\"2452\" data-end=\"2528\"><p data-start=\"2454\" data-end=\"2528\"><strong data-start=\"2454\" data-end=\"2466\">Styling:<\/strong> <strong data-start=\"2467\" data-end=\"2494\">Presentation Attributes<\/strong> \u2705 (easiest to override from CSS)<\/p><\/li><li data-start=\"2529\" data-end=\"2595\"><p data-start=\"2531\" data-end=\"2595\"><strong data-start=\"2531\" data-end=\"2540\">Font:<\/strong> Convert to Outlines (or SVG) \u2014 doesn\u2019t matter for dots<\/p><\/li><li data-start=\"2596\" data-end=\"2615\"><p data-start=\"2598\" data-end=\"2615\"><strong data-start=\"2598\" data-end=\"2609\">Images:<\/strong> Embed<\/p><\/li><li data-start=\"2616\" data-end=\"2704\"><p data-start=\"2618\" data-end=\"2704\"><strong data-start=\"2618\" data-end=\"2633\">Object IDs:<\/strong> <strong data-start=\"2634\" data-end=\"2649\">Layer Names<\/strong> \u2705 (this turns your <code data-start=\"2670\" data-end=\"2678\">dot-01<\/code> names into <code data-start=\"2690\" data-end=\"2703\">id=\"dot-01\"<\/code>)<\/p><\/li><li data-start=\"2705\" data-end=\"2764\"><p data-start=\"2707\" data-end=\"2764\"><strong data-start=\"2707\" data-end=\"2726\">Decimal places:<\/strong> 2\u20133 (3 if you need precise placement)<\/p><\/li><li data-start=\"2765\" data-end=\"2781\"><p data-start=\"2767\" data-end=\"2781\"><strong data-start=\"2767\" data-end=\"2778\">Minify:<\/strong> On<\/p><\/li><li data-start=\"2782\" data-end=\"2815\"><p data-start=\"2784\" data-end=\"2815\"><strong data-start=\"2784\" data-end=\"2799\">Responsive:<\/strong> Off (unchecked)<\/p><\/li><\/ul><p>\u00a0<\/p><p>\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7ddb1b5 elementor-widget elementor-widget-text-editor\" data-id=\"7ddb1b5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h2 data-start=\"2929\" data-end=\"2980\">5) (Optional) Turn IDs into <code data-start=\"2959\" data-end=\"2969\">data-dot<\/code> attributes<\/h2><p data-start=\"2981\" data-end=\"3081\">React can target <code data-start=\"2998\" data-end=\"3002\">id<\/code>s directly (<code data-start=\"3014\" data-end=\"3023\">#dot-01<\/code>). If you prefer <code data-start=\"3040\" data-end=\"3050\">data-dot<\/code>, do a quick post-process once:<\/p><ul data-start=\"3083\" data-end=\"3325\"><li data-start=\"3083\" data-end=\"3325\"><p data-start=\"3085\" data-end=\"3121\">Quick find\/replace in a code editor:<\/p><ul data-start=\"3124\" data-end=\"3325\"><li data-start=\"3124\" data-end=\"3142\"><p data-start=\"3126\" data-end=\"3142\">Find: <code data-start=\"3132\" data-end=\"3142\">id=\"dot-<\/code><\/p><\/li><li data-start=\"3145\" data-end=\"3225\"><p data-start=\"3147\" data-end=\"3225\">Replace: <code data-start=\"3156\" data-end=\"3166\">id=\"dot-<\/code> (keep) <strong data-start=\"3174\" data-end=\"3181\">and<\/strong> add a parallel data attribute: <code data-start=\"3213\" data-end=\"3225\">data-dot=\"<\/code><\/p><\/li><li data-start=\"3228\" data-end=\"3325\"><p data-start=\"3230\" data-end=\"3325\">Example transform line:<br data-start=\"3253\" data-end=\"3256\" \/><code data-start=\"3260\" data-end=\"3284\">&lt;circle id=\"dot-01\" \u2026&gt;<\/code> \u2192 <code data-start=\"3287\" data-end=\"3325\">&lt;circle id=\"dot-01\" data-dot=\"01\" \u2026&gt;<\/code><\/p><\/li><\/ul><\/li><\/ul><p data-start=\"3327\" data-end=\"3386\">Or use SVGO with a small plugin config later; not required.<\/p><h2 data-start=\"3388\" data-end=\"3409\">6) Color from React<\/h2><p data-start=\"3410\" data-end=\"3430\">Two easy approaches:<\/p><p data-start=\"3432\" data-end=\"3445\"><strong data-start=\"3432\" data-end=\"3445\">CSS by ID<\/strong><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-64ab3b5 elementor-widget elementor-widget-code-highlight\" data-id=\"64ab3b5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>import { ReactComponent as Logo } from '.\/Logo.svg';\n\nexport default function Mark() {\n  return (\n    <div className=\"logo\">\n      <Logo \/>\n      <style>{`\n        .logo #dot-01 { fill: #FF6B6B; }\n        .logo #dot-02 { fill: #FFD166; }\n        .logo #dot-03 { fill: #06D6A0; }\n      `}<\/style>\n    <\/div>\n  );\n}\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-859e51c elementor-widget elementor-widget-text-editor\" data-id=\"859e51c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Dynamic (loop over 45 colors)<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1793636 elementor-widget elementor-widget-code-highlight\" data-id=\"1793636\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>const colors = ['#ff6b6b', '#ffd166', \/* ...45 *\/];\n\n<Logo className=\"logo\" \/>\n<style>{colors.map((c,i)=>`.logo #dot-${String(i+1).padStart(2,'0')} { fill: ${c}; }`).join('\\n')}<\/style>\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3876e8f elementor-widget elementor-widget-text-editor\" data-id=\"3876e8f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h2 data-start=\"4004\" data-end=\"4032\">Troubleshooting \/ pro tips<\/h2><ul data-start=\"4033\" data-end=\"4496\"><li data-start=\"4033\" data-end=\"4169\"><p data-start=\"4035\" data-end=\"4169\">If colors don\u2019t override, you likely exported CSS <strong data-start=\"4085\" data-end=\"4104\">Internal\/Inline<\/strong>. Re-export with <strong data-start=\"4121\" data-end=\"4148\">Presentation Attributes<\/strong> or add <code data-start=\"4156\" data-end=\"4168\">!important<\/code>.<\/p><\/li><li data-start=\"4170\" data-end=\"4277\"><p data-start=\"4172\" data-end=\"4277\">If your dots export as <strong data-start=\"4195\" data-end=\"4216\">one compound path<\/strong>, you used Pathfinder \u203a Unite. Keep them as separate circles.<\/p><\/li><li data-start=\"4278\" data-end=\"4388\"><p data-start=\"4280\" data-end=\"4388\">Remove accidental <strong data-start=\"4298\" data-end=\"4316\">clipping masks<\/strong> (Object \u203a Clipping Mask \u203a Release) so each dot remains its own element.<\/p><\/li><li data-start=\"4389\" data-end=\"4496\"><p data-start=\"4391\" data-end=\"4496\">Keep every dot inside a single <code data-start=\"4422\" data-end=\"4437\">&lt;g id=\"dots\"&gt;<\/code> layer in Illustrator\u2014makes later querying easy (and tidy).<\/p><\/li><\/ul><p data-start=\"4498\" data-end=\"4699\" data-is-last-node=\"\" data-is-only-node=\"\">If you want, paste your current SVG (or a small sample of 8\u201310 dots) and I\u2019ll convert it to the final structure with IDs and a tiny React snippet that generates the CSS for all 45 colors automatically.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Illustrator \u2192 SVG workflow that gives you per-dot IDs you can target from React. 1) Draw and organize the dots Create a top-level layer named Logo. Inside it, add a sublayer named dots and draw your tiny circles there (Ellipse Tool L, hold Shift). Avoid clipping masks and effects; keep them as simple circles (no [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":14481,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-14431","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-egyeb"],"_links":{"self":[{"href":"https:\/\/pappcseperke.hu\/hu\/wp-json\/wp\/v2\/posts\/14431","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pappcseperke.hu\/hu\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pappcseperke.hu\/hu\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pappcseperke.hu\/hu\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/pappcseperke.hu\/hu\/wp-json\/wp\/v2\/comments?post=14431"}],"version-history":[{"count":11,"href":"https:\/\/pappcseperke.hu\/hu\/wp-json\/wp\/v2\/posts\/14431\/revisions"}],"predecessor-version":[{"id":14488,"href":"https:\/\/pappcseperke.hu\/hu\/wp-json\/wp\/v2\/posts\/14431\/revisions\/14488"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pappcseperke.hu\/hu\/wp-json\/wp\/v2\/media\/14481"}],"wp:attachment":[{"href":"https:\/\/pappcseperke.hu\/hu\/wp-json\/wp\/v2\/media?parent=14431"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pappcseperke.hu\/hu\/wp-json\/wp\/v2\/categories?post=14431"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pappcseperke.hu\/hu\/wp-json\/wp\/v2\/tags?post=14431"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}