Note: This only works for embedded SVG images, not for those that are included via a link. Insert an SVG image into your diagram via File > Import from or by dragging the SVG file onto the drawing canvas.
Set the fill and line colours of an SVG to be editable
- Select the SVG in your diagram, then click Edit Style in the format panel (press Ctrl+E on Windows or Cmd+E on macOS, or select it from the right-click context menu).
- Add the editableCssRules and the regular expression that selects which elements you want to be able to style as a key=value pair in the style description. For example:
- To allow all styles to be edited, editableCssRules=.*;
- To limit this in the example below to just st1 and st2, enter editableCssRules=\.st;
Now, you can edit the colors for fill, stroke and stop-gradient in the matching CSS rules.
For example, in the following SVG, the CSS rules in the <style> section define three CSS classes which are used to style the paths in the SVG.
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 250 250">
<path class="st0" d="M237.5,227.9c0,5.3-4.3,9.6-9.5,9.6c0,0,0,0,0,0H22.1c-5.3,0-9.6-4.3-9.6-9.5c0,0,0,0,0,0V22.1
<path class="st1" d="M237.5,227.9c0,5.3-4.3,9.6-9.5,9.6c0,0,0,0,0,0H89.6L44.8,192l27.9-45.5l82.7-102.7l82.1,84.5V227.9z"/>
<path class="st2" d="M197.1,138.3h-23.7l-25-42.7c5.7-1.2,9.8-6.2,9.7-12V51.5c0-6.8-5.4-12.3-12.2-12.3c0,0-0.1,0-0.1,0h-41.7
Note: Semicolons are not allowed in the value for editableCssRules, as they are used to separate entries in cell styles.
This feature is available in draw.io 8.7.0 and later.