Delivering Octicons with SVG

#1

Post by jasoncartwright » Mon, Feb 22, 2016, 10:28 PM UTC

Re: Delivering Octicons with SVG

#2

Post by robrichard » Mon, Feb 22, 2016, 11:20 PM UTC

Does this cause the HTML sent over the wire to be bloated, i.e. the svg for the same icon could be repeated multiple times on the same page?

Re: Delivering Octicons with SVG

#3

Post by alex_doom » Mon, Feb 22, 2016, 11:25 PM UTC

robrichard wrote: post #2

Does this cause the HTML sent over the wire to be bloated, i.e. the svg for the same icon could be repeated multiple times on the same page?

I could see this being an issue for a highly complex vector shape. But most shapes only consume a few bytes. Compared to an external image or another request for the font files.

Re: Delivering Octicons with SVG

#4

Post by alex_doom » Mon, Feb 22, 2016, 11:26 PM UTC

Curious if they have any fallback for the very few browsers that can't render inline svg.

Re: Delivering Octicons with SVG

#5

Post by fullsailor » Mon, Feb 22, 2016, 11:28 PM UTC

robrichard wrote: post #2

Does this cause the HTML sent over the wire to be bloated, i.e. the svg for the same icon could be repeated multiple times on the same page?

I expect that gzip would make the over the wire price for repeated icons insignificant.

Re: Delivering Octicons with SVG

#6

Post by brotherjerky » Tue, Feb 23, 2016, 12:02 AM UTC

alex_doom wrote: post #4

Curious if they have any fallback for the very few browsers that can't render inline svg.

SVG support is nearly universal now: http://caniuse.com/#feat=svg -- plus, the icons aren't necessary for the UI to function, so perhaps they've forgone the fallback.

Re: Delivering Octicons with SVG

#7

Post by zbjornson » Tue, Feb 23, 2016, 12:16 AM UTC

robrichard wrote: post #2

Does this cause the HTML sent over the wire to be bloated, i.e. the svg for the same icon could be repeated multiple times on the same page?

They say they don't inline because it doesn't make sense in their case, but if you do inline and use xlink [1], you don't duplicate data transmissions.

There are other techniques for client side-templated sites that will cache SVG icon data. For example, angular material's icon service [2] does this.

[1] https://css-tricks.com/svg-sprites-use-better-icon-fonts/

[2] https://material.angularjs.org/latest/api/service/$mdIconPro...

Re: Delivering Octicons with SVG

#8

Post by venning » Tue, Feb 23, 2016, 12:31 AM UTC

fullsailor wrote: post #5

robrichard wrote: post #2

Does this cause the HTML sent over the wire to be bloated, i.e. the svg for the same icon could be repeated multiple times on the same page?

I expect that gzip would make the over the wire price for repeated icons insignificant.

Yes and no.

The repetitions would have to appear within 32KB of each other to be captured in the DEFLATE window [1] which, given that a lot of pages can be 100s of KBs of uncompressed text, may make that impossible.

Additionally, the zlib (or whatever) compression settings would have to be set aggressively enough to identify those duplicates as the best run-lengths to encode. Since GitHub is generating a lot of this live and delivering with low TTFB, they may be using a less aggressive than necessary setting.

[1] https://en.wikipedia.org/wiki/DEFLATE#Duplicate_string_elimi...

Re: Delivering Octicons with SVG

#9

Post by mchahn » Tue, Feb 23, 2016, 12:44 AM UTC

We Atom community developers have used a lot of Octicons due to the github heritage. I hope the Atom developers provide some easy conversion utility like github used internally.

Re: Delivering Octicons with SVG

#10

Post by msoad » Tue, Feb 23, 2016, 1:44 AM UTC

Icon fonts are awful. I'm glad GitHub made this change.

I see a bug in repository page: http://i.imgur.com/GdyeFXK.png