Using Stylish to modify an svg image. (Problem with Chrome)

I know css can be used to modify an svg image. If the svg image is coded within the html code of a web page, selectors in the css for the page can be used to point at elements to be affected. Yet if the image is from a separate svg file, I do not know how to write selectors for elements in the image through the css for the referring page. Yet I can write the css for the svg file directly. On Sylish I use the svg file address as the URL affected by the code. That works for me in Stylish for Firefox. However, this appears to fail in Stylish for Chrome. There I just see warnings about unknown properties stroke and fill. I must say I did not test with Chrome per se, I tested with Dragon, I simply refuse to install Chrome.


  • You can ignore these particular warnings issued by a submodule of Stylish, CSSLint, its developer didn't want to unconditionally allow svg-related properties due to the reasons he finds important. The next version of Stylish, now in development, doesn't show these warnings.

  • edited August 2015 Firefox

    That works for me in Stylish for Firefox. However, this appears to fail in Stylish for Chrome. There I just see warnings about unknown properties...

    Those warnings are a good thing. They're telling you to check those lines yourself, because Stylish's error checker doesn't know whether they're right or wrong.

    A bigger problem is that you're not warned about this
    wtf hideheader {color: magenta}
    even though neither of those are really tag names. You'd like to know when you've written a useless selector, wouldn't you?

    You can ignore all of the warnings. (But not the errors.) When your mother said "Wear clean underwear, in case you're hit by a bus and taken to the hospital," that was a warning. When your epitaph says, "He didn't see the bus," that's an error.

    When you have doubts, open Developer Tools (ctrl+shift+i), select the Elements tab, click the Styles tab in the right panel, and add the property, temporarily, to This is as close to CSS "truth" as you can get. All of the editors' error checkers are unreliable in one way or another, both in Chrome and in Firefox.
    wOxxOm said:

    its developer didn't want to unconditionally allow svg-related properties...

    In fact what he said was
    nzakas said:

    My argument isn't against adding *any* SVG properties, it's against adding *all* SVG properties. ... 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. [1]
    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. [2]

    Remember the story of stone soup? Strip down one of the pull requests to, say, just the fill and stroke properties (CSSLint is already clueless about tag names, so SVG tags aren't a problem), add a flag to enable the heterogenous rules, and resubmit it. A couple of use-cases in the description might help you make your/their case.

    @JasonBarnabe: The objective is a working stylesheet, not a stylesheet that looks good in the editor. If CSSLint is warning that it doesn't understand something, that's a good thing - you know to investigate yourself. If you suppress those warnings, that's a bad thing - you're duped into believing that the stylesheet is fully functional, when in fact the linter tried to tell you that it can't promise any such thing. If you added code to suppress those warnings you should back it out again.
  • I tested with Dragon, I simply refuse to install Chrome.

    I wonder if that's wise.
  • The problem I have is not directly related to css for svg. If I open the URL for the svg directly with Dragon, the style applies properly on the image. However, when I open the page with the image, the style has no effect on the image. I have no such problem with Firefox.
  • OK, so it not only appears to fail, it really does fail. Apologies; I misunderstood.

    No, you can't do that in Chrome. Stylish adds STYLE elements to a document in a script that runs in that same document, and Chrome doesn't run extension scripts in SVG documents. An SVG that's the src of an IMG element isn't represented in the HTML DOM, so it isn't possible for the HTML document's script to add the STYLE either.

    You can though "replace" the SVG IMG with a background-image, adding your CSS to the same SVG and including the modified image in-line as a data: URL. Compare, for example,
    which style and apply the same SVG image in two different ways.
  • Oh well... I see there is some history for this already. I was not careful enough when I did my research before asking. I will save this in my bag of "reasons why I think Firefox is better than Chrome." Actually, thank you all for the good information, it has good reference points.
    I may do a version of my style usable for Chrome only if requested. It is something I prefer to avoid because I re-color a logo that is not mine. I think the owner should feel complimented. Yet I worry when I enter the gray realm of fair use of copyright art work.
Sign In or Register to comment.