Can't see 'fill color' in case of free line SVG

Ask the community
, ,
1

Can’t see ‘fill color’ in case of free line SVG

  1. Rectangular or ellipse SVG file exported from the Illustrator

No problem:

Put them in an edit page and click ‘change design’ and can see ‘Fill color’ property in order to change the defualt color.

  1. Free line circle SVG file exported from the Illustrator

Can not see ‘Fill color’

Sample SVG file

<?xml version="1.0" encoding="UTF-8"?>

Is there any way to see the ‘Fill color’ in the change design for free line SVG file ?

I appreciate any advice.

2

  1. if you want to have a static color that doesn’t change, paste the svg file in a text editor (Notepad or any other editor) change the fill color value, save it as svg and upload it to the site media.

  2. If you want the color to be dynamic (you want to change it on event). You can do something like:

const svgString = (fillColor) => `<svg data-bbox="1.36 0.502 358.058 75.523" viewBox="0 0 359.92 76.52" height="76.52" width="359.92" xmlns="http://www.w3.org/2000/svg" data-type="ugc"><g><path stroke-miterlimit="10" stroke="#000000" fill="${fillColor}" d="M1.36 68.35c27.5-21.35 76.94-53.09 145-64 47.84-7.67 84.7-1.81 95 0 52.7 9.25 120.32 37.07 118 53-2.33 15.98-76 26.68-358 11Z"/></g></svg>`;

$w.onReady(() => {
//whenever you want to change it, use the color name or the color code (rgb or hex):
$w('#mySvgShape').src = svgString('orange');
})
3

Thank for such a great answer.
I tried to test the No.2 while editing the SVG source code in order to exclude <?xml version="1.0" encoding="UTF-8"?> part because it causes an error.
As a result, it worked as I expected.