1. 20
  1.  

  2. 11

    Unfortunately, even though these icons were vector shapes, they’d often render poorly on 1x displays.

    As if 1x displays are some relic from the 90s? Not everyone is on a Retina MacBook Pro.

    1. 3

      It’s just a statement of fact, I can’t see anything to get worked up about. If they thought 1x displays were a relic, why would they bother fixing an issue that’s only relevant to 1x displays? I think you’re reading something that’s not there.

      1. 9

        If they thought 1x displays were a relic, why would they bother fixing an issue that’s only relevant to 1x displays?

        Because the users complained after it was rolled out, but the designers didn’t care enough beforehand because they probably were all on Retina Macs.

        1. 3

          Ah! That’s a different argument; I totally agree that testing on 1x displays is necessary.

    2. 6

      Oh thank god. I disable webfonts (because 90% of them are ugly, broken, bloated, expose software vulnerabilities, or all of the above) and it is unspeakably obnoxious when a website becomes unusable because all its interface elements are labeled with a single character with no associated glyph in any reasonable font, to say nothing of broader accessibility concerns.

      1. 3

        For me, the main problem with SVG is that I can’t find a way to re-colour them through regular CSS. Is this possible?

        1. 4

          If you include them directly in the DOM, you can style them with CSS.

          1. 3

            Interesting. It would be nice if you could style them without also having to inline them in your HTML

            1. 12

              You can inline them once and reuse them multiple times with the <use> tag. Or if you prefer, you can avoid inlining them altogether and just reference a remote file like this:

              <svg>
                <use xlink:href="images/icons.svg#my-icon"></use>
              </svg>
              
              1. 1

                THANK YOU! This is the solution I’ve been looking for. Note that if you are experimenting with this on codepen or similar, you may have trouble getting it to work since browsers don’t like cross-origin URI’s in the <use> tag.

              2. 3

                Yeah, I know, I’ve wished that many a time. I think there are JS libraries to load the SVG into the DOM for you, but I haven’t worked with SVG in a few months so I’m not sure.