Hacker News Reader

Comment by rguldener | Hacker News Reader

Font files are vector "images" which means your icons will scale gracefully to any size. This is probably the main advantage.

Depending on the complexity I imagine fonts would also be smaller than corresponding bitmaps although I never actually checked.

View on HN

SVG are vector graphics that can be rendered in all modern browsers:

http://caniuse.com/#feat=svg-img

You do miss out on the recoloring and any other font styling options though.

Actually you can style SVG with CSS

    #yourSVG {
        fill: red;
        stroke: blue;
    }

mind = blown

The problem is that, until <svg use> is standardized and supported, the only way to style svg elements is if you include them in your markup (or use something like Iconic's SVG Injector).

There's a tradeoff between inlining (or rather, including them server-side) and calling them as <img>, background-image, or fonts. The size, http requests, caching , and styling all play a role.

I don't think you can re-style a SVG with CSS if you embed it with IMG. CSS styling has to be inline with the SVG, so you can embed it directly, or you can change CSS with JS.

They can also be recolored more easily, making themes easier to maintain.

But they can only be one color. I don't think gradients and stuff work on them.

There are ways to use multiple colors:

http://www.pixelambacht.nl/2014/multicolor-icons/

Reply on news.ycombinator.com