SVG and CSS properties in the same file

Question

When I put SVG and CSS properties in a single file:

.circle {
    stroke: red;
}

.myArea {
    width: 100%;
}

It works. But is it valid according to the W3C? This code doesn't pass the validation tests of the CSS validator, and I can't find an option "CSS + SVG"...

score 1 · Answer 1 · answered Jun 17 '13 at 08:40

1

stroke is a CSS property (supported by all browsers with support for SVG). I think this may just be a case of the validator not having a mode for this. All current browsers already support this kind of stylesheet, since they support svg.

answered Jun 17 '13 at 08:40

Erik Dahlström

59,452
12
120
139

1

`stroke` is not a CSS property. It's an SVG property. That's precisely why it's only supported by browsers with support for SVG as you have said. – BoltClock Jun 17 '13 at 09:26
In spec terms there's no such thing as an 'SVG property' (except perhaps as an informal way of indicating that these properties at this given point in time apply only to svg content). `stroke` is a real CSS property (just like any other CSS property), the only difference is that it's defined in the svg specification, and as such is only required when the UA supports svg. There are several examples where properties originally defined in svg have moved over to CSS specifications, `pointer-events` being one. – Erik Dahlström Jun 17 '13 at 10:56

score 0 · Answer 2 · edited May 23 '17 at 12:13

0

EDIT (now I know what you meant by your question): This may be caused by browsers not supporting SVG and its functions. There is no browser which supports the full svg format (svg itself is very complex and has an awfuly lot features). However, most of the browsers support the basic functionality (except for IE <= 8). So the validity test may fail because of SVG support.

You can read more here:

Use of stroke in html+svg Browser support

edited May 23 '17 at 12:13

Community

1
1

answered Jun 17 '13 at 07:20

Smajl

7,555
29
108
179

I have already created a separate CSS file. This is the file that I showed you in my message. – Arnaud Jun 17 '13 at 09:25

score 0 · Answer 3 · edited May 23 '17 at 10:31

0

I found an answer here:

Is CSS for SVG "standard" CSS?

W3C CSS validation has options you can select (if you invoke it directly via the W3C website)

Under "More Options" you find a profile, one of the options is "SVG".

I missed all this originally because I usually invoke W3C validation via Chris Pederick's Firefox add-0n "Web Developer".

edited May 23 '17 at 10:31

Community

1
1

answered Oct 16 '13 at 15:56

user835745

1,974
3
17
18

SVG and CSS properties in the same file

3 Answers3