Skip to: site navigation/presentation
Skip to: Thoughts From Eric

Adding Backgrounds to Directly Loaded SVGs

My primary SVG viewer is Firefox.  This is partly because it’s always running, so the startup time is essentially zero.  It also allows me to directly inspect and modify elements of the SVG element through the Web Inspector, which can be handy.

But I’ve run into a problem more than once, which is that if I load an SVG file in Firefox, the browser window’s background defaults to white, and a lot of times I’m trying to view images that are partially or entirely white.  I started thinking that if there were a way to make the window background medium gray, that would solve the problem with rare downsides, since I can’t remember trying to view an all-medium-gray SVG.

After a question on Twitter and some ideas from Tibor Martini, I realized I could use Stylish to give the SVG files a background through CSS.  I didn’t want to select all SVGs, only those I was loading directly, so I tried this:

svg:root {background: gray;}

And it worked!  So I decided to make it more robust by doing a multicolor gradient, and grayscaling it on hover.  I couldn’t use filter because that would grayscale the whole image, rather than just the background, but that was easy to work around.  I ended up with this:

svg:root {background: linear-gradient(135deg, hsl(0,50%,60%), hsl(180,50%,40%));}
svg:root:hover {background: linear-gradient(135deg, hsl(0,0%,60%), hsl(180,0%,40%));}

Which works great!  Except that I discovered Firefox applies it to all SVGs, even those loaded into HTML documents via img.  SVGs apparently define their own roots, which I hadn’t expected, but I can see how it might make sense.  So I poked around in MDN until I came up with this:

@-moz-document url-prefix(file:) {
    svg:root {background: linear-gradient(135deg, hsl(0,50%,60%), hsl(180,50%,40%));}
    svg:root:hover {background: linear-gradient(135deg, hsl(0,0%,60%), hsl(180,0%,40%));}

And that’s exactly what I wanted.  If it’s useful to you, have at it.  Just paste that into a new Stylish rule in Firefox, and you should be good to go.

If you’re on Chrome, you can import the above into Stylish and create a new rule, but it hasn’t worked for me, and I’m not sure why not.  Removing :root didn’t fix it when I tried, and that shouldn’t matter anyway: I can see in Chrome’s user styles that svg:root is used and applied.  And my Stylish toolbar icon shows the rule is being applied.  It just doesn’t do anything I can see.  If anyone can figure out how to make it work, or explain why it can’t work, I’d love to know in the comments!

Eight Responses»

    • #1
    • Pingback
    • Sat 22 Jul 2017
    • 0500
    Received from 2017-07-22 前端日报 | 好JSER好JSER

    […] Server for all Node.js frameworksCross Stitching: Elegant Concurrency Patterns for JavaScriptEric’s Archived Thoughts: Adding Backgrounds to Directly Loaded SVGsFunctional Redux Reducers with Ramda ← Alligator.ioIntroducing the Open Source for Good Directory: […]

    • #2
    • Comment
    • Sun 23 Jul 2017
    • 1752
    Adrian Roselli wrote in to say...

    Prior to SVGs, I had to deal with this using transparent GIFs and then PNGs. I have always relied on changing the default page background color in the browser (which was also handy for seeing when I forgot to specify a page background color in my CSS).

    In Firefox: Firefox hamburger > Options > Content (from the side nav bar) > Fonts & Colors (a heading on the screen) > Colors (a button) > Background (one of the options in the dialog): choose gray from the color palette

    • #3
    • Comment
    • Mon 24 Jul 2017
    • 0549
    Vincent De Oliveira wrote in to say...

    For Stylish in Chrome, you have to go to the “Extensions” panel, then check “Allow access to file URLs”. Then snippet above will work. ;)

    • #4
    • Comment
    • Mon 24 Jul 2017
    • 0937
    Eric Meyer wrote in to say...

    Hey Vincent, thanks for the pointer! I did manage to find that setting, enabled it, and restarted the browser just to make sure, but I’m still not seeing backgrounds on SVGs. Do you know if there are other settings that have to be changed in order to get it to work?

    • #5
    • Comment
    • Mon 24 Jul 2017
    • 1211
    Matt Brundage wrote in to say...

    Eric, Chrome does not support @document.

    • #6
    • Comment
    • Mon 24 Jul 2017
    • 1216
    Eric Meyer wrote in to say...

    Matt: I didn’t say it did. I said if you import it (there’s an import-from-Mozilla-format mechanism in Stylish) you get a rule that Stylish shows as applying to local files, but it has no actual visual effect.

    • #7
    • Comment
    • Mon 24 Jul 2017
    • 1217
    Vincent De Oliveira wrote in to say...

    This works for me out of the box. Actually, without the @document rule, but using a Stylish filter directly (URLs start with file)

    • #8
    • Comment
    • Mon 24 Jul 2017
    • 1230
    Matt Brundage wrote in to say...

    Eric, that’s good to know. I haven’t used Stylish in quite some time.

Leave a Comment

Line and paragraph breaks automatic, e-mail address required but never displayed, HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Remember to encode character entities if you're posting markup examples! Management reserves the right to edit or remove any comment—especially those that are abusive, irrelevant to the topic at hand, or made by anonymous posters—although honestly, most edits are a matter of fixing mangled markup. Thus the note about encoding your entities. If you're satisfied with what you've written, then go ahead...

July 2017