Skip to main content
Participant
June 6, 2017
Answered

Dreamweaver SVG CSS

  • June 6, 2017
  • 4 replies
  • 1128 views

I have an svg diagram I have created for a website in javascript. I would like to style the svg with css (which is allowed). I like using the CSS Designer tab so I don't have to go manually to the css file and add it there. However, when I try to do that, I get, for example, "fill is not a valid css property. Enter a valid CSS Property!". It definitely is a css property though because when I add it manually to the css text file it correctly changes the diagram. Is there not another way to add styling to svg without going to the text file?

This topic has been closed for replies.
Correct answer Rob Hecker2

SVG is an XML format, not HTML. The tags used to style SVG are not HTML CSS. The WC3 CSS validator will also mark some SVG style elements as errors.

4 replies

pziecina
Legend
June 8, 2017

Just as a quick update to svg as included in the html5 specs.

It is the recommended way to use css in order to style svg. It is even recommended to use css animations including keyframe, or javascript, as SMIL support is slowly being removed from browsers, in preperation for svg2.

Rob Hecker2
Rob Hecker2Correct answer
Legend
June 7, 2017

SVG is an XML format, not HTML. The tags used to style SVG are not HTML CSS. The WC3 CSS validator will also mark some SVG style elements as errors.

pziecina
Legend
June 7, 2017

css designer has not updated its list of properties for a number of versions, and i have no idea if there any plans to do so in the future.

If you are using any css that was not available in IE8, then it is easier to enter them directly into the css file itself, as most of what is considered css3 and is not a modifier of a css 2.2 property, (such as color values) is not supported in any usable way, (if at all).

To be fair to Dw though, most other editors also suffer from the same problem to a larger or smaller degree.

You could file a feature request, (in Dw's 'Help' menu) but as i filed one for better css support for svg over 5 years ago, don't expect much to happen.

Nancy OShea
Community Expert
Community Expert
June 6, 2017

CSS Fill is used to fill in color on SVG shapes.  To be honest, the CSS Designer Panel doesn't have much support for shapes. 

Nancy

Nancy O'Shea— Product User & Community Expert