Why can't I change the color of my SVG graphic?

Report · May 11, 2020

Is there some valid reason as to why Dreamwever is refusing to allow me to change to color on my SVG grapic despte this being the correct colour when created in Illustrator and before I copy and paste it into my HTML document?

This its the SVG code:

<svg id="Layer_9" data-name="Layer 9" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 842.89 125.04"><defs><style>.cls-1{fill:#e0dddd;}</style></defs><path class="cls-1" d="M841.89,354.53H0V277.15c290.88,4.39,589-107.15,841.89,0Z" transform="translate(0.5 -229.99)"/></svg>

The colour code asper the snippet above is

#E0DDDD

and this is the result I get a blur color.

I am getting absolotly bloody sick of this software doing what it wants to. I'm the user, I if tell it change the color, I expect it to change the bloody color!

Report · May 11, 2020

Illustrator does not have a clue about HTML/CSS

The proper code for the graphic:

<svg id="Layer_9" data-name="Layer 9" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 842.89 125.04">
	<path class="cls-1" d="M841.89,354.53H0V277.15c290.88,4.39,589-107.15,841.89,0Z" transform="translate(0.5 -229.99)" />
</svg>

the CSS for the graphic:

.cls-1 {
	fill: #e0dddd;
}

The CSS can be put in the head section of the page or in another document. The colour can be changed to suit.

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Report · May 11, 2020

Why not just add the fill to the path:

OR

Then add the css outside of the svg in either a linked stylesheet or embedded in the <head></head> section of the page:

<style>

.cls-1 {

fill: #e0dddd;

}

</style>

Report · May 11, 2020

"I am getting absolotly bloody sick of this software doing what it wants to."

Don't blame Dreamweaver for your malformed code. If you don't clean it up first, that code will fail in all editors.

How to hand code SVG

https://webdesign.tutsplus.com/tutorials/how-to-hand-code-svg--cms-30368

Nancy O'Shea— Product User, Community Expert & Moderator