Highlighted

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

Community Beginner ,
May 11, 2020

Copy link to clipboard

Copied

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! 

 

svg-stackoverflow.png

Views

677

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

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

Community Beginner ,
May 11, 2020

Copy link to clipboard

Copied

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! 

 

svg-stackoverflow.png

Views

678

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
May 11, 2020 0
Adobe Community Professional ,
May 11, 2020

Copy link to clipboard

Copied

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.


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 11, 2020 1
LEGEND ,
May 11, 2020

Copy link to clipboard

Copied

Why not just add the fill to the path:

 

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 842.89 125.04">
<path fill="#e0dddd" d="M841.89,354.53H0V277.15c290.88,4.39,589-107.15,841.89,0Z" transform="translate(0.5 -229.99)"/>
</svg>

 

OR

 

 

<svg 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>

 

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>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 11, 2020 1
Adobe Community Professional ,
May 11, 2020

Copy link to clipboard

Copied

"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, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 11, 2020 1