Add all SVG properties

[skrat]

See CSSLint/csslint#283 (comment)

[joshcarr]

This SVG Property Index will be helpful to any one implementing:

http://www.w3.org/TR/SVG/propidx.html

Is this a matter of an external contributor adding these properties to /src/css/Properties.js and making a pull request? Would anything else need to be added/changed?

[nzakas]

It's more a matter of whether or not I want SVG property names to show up
as valid. I'm on the fence, at the moment, since most SVG property names
don't have any real use on the web (yet?) and including them may be a sign
of error that should be flagged. If someone is willing to try to convince
me otherwise, please do. :)

On Mon, Jan 14, 2013 at 12:45 PM, Josh Carr notifications@github.comwrote:

This SVG Property Index will be helpful to any one implementing:

http://www.w3.org/TR/SVG/propidx.html

Is this a matter of an external contributor adding these properties to
/src/css/Properties.js and making a pull request? Would anything else
need to be added/changed?

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/28#issuecomment-12238774.

---

Nicholas C. Zakas
@SlickNet

Author, Professional JavaScript for Web Developers
Buy it at Amazon.com:
http://www.amazon.com/Professional-JavaScript-Developers-Nicholas-Zakas/dp/1118026691/ref=sr_1_3

[skrat]

You should think of description for this project. It doesn't say anything about real use on the web. All SVG property names are part of the web, as SVG became part of web platform, as a standard for vector graphics. Graphics in all forms are essential part of the web. You don't have the power to decide that stroke has real use for the web, while font-family does not.

In fact the best you could do, is to include a scraper that would auto-generate that JS file from http://www.w3.org/TR/CSS21/propidx.html and http://www.w3.org/TR/SVG/propidx.html (because it's too much for W3C to provide these in XML/JSON form, duh).

[joshcarr]

I made this point in the CSSLint project, but here it is again. In terms of "real use on the web":

The popular d3.js project (with ~11600 stars and ~1800 forks) is a big proponent of using SVG and styling with CSS. D3 is used by the NY Times, Square, GitHub and other large commercial orgs. Consider this another vote for adding these properties to the 'known' list.

[nzakas]

My argument isn't against adding any SVG properties, it's against adding
all SVG properties. The W3C CSS validator (
http://jigsaw.w3.org/css-validator/validator) says that many SVG properties
are invalid when validating against CSS3 - I've been using that as my test
bed for validation in the parser. You need to explicitly say that you want
SVG properties.

I think, if the parser were to support SVG properties, it would have to be
in this way. Yes, some SVG properties have leaked over for use in HTML, but
I just don't think that's good enough evidence to treat all SVG properties
as being valid in that context.

On Mon, Jan 14, 2013 at 1:41 PM, Josh Carr notifications@github.com wrote:

I made this point in the CSSLint project, but here it is again. In terms
of "real use on the web":

The popular d3.js https://github.com/mbostock/d3 project (with ~8600
stars and ~1200 forks) is a big proponent of using SVG and styling with
CSS. D3 is used by the NY Timeshttp://www.nytimes.com/interactive/2012/09/06/us/politics/convention-word-counts.html,
Square http://square.github.com/cubism/, GitHubhttps://github.com/stubbornella/csslint/graphs/contributorsand other large commercial orgs. Consider this another vote for adding
these properties to the 'known' list.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/28#issuecomment-12241309.

---

Nicholas C. Zakas
@SlickNet

Author, Professional JavaScript for Web Developers
Buy it at Amazon.com:
http://www.amazon.com/Professional-JavaScript-Developers-Nicholas-Zakas/dp/1118026691/ref=sr_1_3

[joshcarr]

The W3C CSS validator does however allow one to select validating against SVG, SVG Basic and SVG Tiny. How would you suggest selecting a subset of SVG properties to be used here. I also second the opinion that this tool doesn't dictate whether the user's end environment is HTML, SVG or HTML with "leaked over" SVG properties. That should be up to the end user to determine.

What would it take to have an SVG flag setting to allow those properties (so as not to pollute the original intention of the tool and to allow actual usage of some end users)?

[nzakas]

You'll note that I specifically mentioned that the validator allows you to
select SVG. :) No argument about that point.

I do want to clarify one point: this tool was intended to be used for
HTML-based CSS, which is why it detects certain types of browser hacks.
That was the original intention. I've yet to have a request specify that
they were using the parser purely with SVG, so I'm still left to assume
that this is the primary use case, and as such, I'll be making decisions
with that in mind. That said, I'm open to the idea that a secondary use
case for the parser is to be used with SVG-CSS, in which case having a flag
to switch it into SVG mode would be useful.

I don't think the effort to support such a flag would be onerous. Why don't
you give it a shot? I'll be happy to review a pull request.

On Mon, Jan 14, 2013 at 3:34 PM, Josh Carr notifications@github.com wrote:

The W3C CSS validator does however allow one to select validating
against SVG, SVG Basic and SVG Tiny. How would you suggest selecting a
subset of SVG properties to be used here. I also second the opinion that
this tool doesn't dictate whether the user's end environment is HTML, SVG
or HTML with "leaked over" SVG properties. That should be up to the end
user to determine.

What would it take to have an SVG flag setting to allow those properties
(so as not to pollute the original intention of the tool and to allow
actual usage of some end users)?

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/28#issuecomment-12246086.

---

Nicholas C. Zakas
@SlickNet

Author, Professional JavaScript for Web Developers
Buy it at Amazon.com:
http://www.amazon.com/Professional-JavaScript-Developers-Nicholas-Zakas/dp/1118026691/ref=sr_1_3

[EvHaus]

Just wanted to re-raise this request. I see no reason NOT to add the SVG properties in this PR.

[tomByrer]

SVG filters are still used to fallback CSS filters in older (eg few months old) browsers. Plus, all the cool kids are switching to SVG from icon-fonts & PNG illustrations.

[stubbornella]

I'm keen to see this get in. Let's mark it for next release. What do you think?

On Thu, Jul 3, 2014 at 3:48 PM, tomByrer notifications@github.com wrote:

SVG filters are still used to fallback CSS filters in older (eg few months old) browsers. Plus, all the cool kids are switching to SVG from icon-fonts & PNG illustrations.

Reply to this email directly or view it on GitHub:
#28 (comment)

[davisford]

Don't mean to pile on, but anyone using d3.js is more than likely to run into a noisy csslint output b/c these properties are not included. Example:

Unknown property 'stroke'. Properties should be known (listed in CSS3 specification) or be a vendor-prefixed property. (known-properties)
Unknown property 'fill'. Properties should be known (listed in CSS3 specification) or be a vendor-prefixed property. (known-properties)

+1 for fixing this. SVG is a valid W3C spec, and embedding SVG inside HTML is also valid and has been for a many years.

[lukasoppermann]

+1 Yes, please add stroke and fill at least.

[cscott]

A bunch of these were fixed in PR #150, #177, #187, #190, #195. Can someone audit the current code, figure out what's still missing, and file a more specific bug report? Thanks.

[dotnetCarpenter]

@cscott I'm not sure where to look but after using stroke-width in a code pen, I got Unknown property 'stroke-width'. Assuming codepen.io is using the latest CSSLint, stroke-width is missing.
http://codepen.io/dotnetCarpenter/pen/mREvjL

[dotnetCarpenter]

scratch that. found it https://github.com/CSSLint/parser-lib/blob/master/src/css/Properties.js#L423

[wkeese]

I think you can close this, Properties.js now has fill, stroke, etc.

[frvge]

Closing for now. Please reopen if something important is missing.