search

dshanske / syndication-links

Add and Display Syndication Links in WordPress
https://wordpress.org/plugins/syndication-links/
GNU General Public License v2.0
30 stars 13 forks source link

SVG images vs sprites #100

Closed asuh closed 5 years ago

asuh commented 5 years ago

I'm coming around to the idea that SVGs should be added individually. Having looked at the Simple Icons library of images, I probably wouldn't use 98% of these on my site for the foreseeable future. I imagine many or most people using this plugin fall in a similar category.

We're paying a price of downloading a >600KB sprite + ~22KB CSS file with colors. Even if a WordPress install is using compression and caching, these still is more than 200KB of loading + the rest of the page.

I like Sprites and think they're generally a good way to go but none of this works in Internet Explorer if that's a thought. I also think the massive size of a file that's likely to only ~1% useful to people should be considered.

While I think added HTTP requests are not a good thing, I think the size of the individual SVGs is a better choice for syndication link icons on posts. HTTP2+ will also help with asynchronous loading of these smaller SVG files.

The one problem I didn't account for yet is how to include ONLY the CSS fill colors for the corresponding individual SVGs. Maybe creating a smaller CSS file with only the most popular social networks to syndicate to? Hard to say

dshanske commented 5 years ago

The 2019 theme uses inline svg. Wonder if we should try that.

asuh commented 5 years ago

Interesting, I didn't know that. I think it's the best choice if it's possible. I also think they have a decent set of icons in class-twentynineteen-svg-icons.php, minus a few like Google+ which is effectively dead. And then adding a few like Mastodon, Micro.blog, Known, Pixelfed, and other open source solutions.

Including a link to the CSS hex colors via an alternative CSS file (that would include all the base Syndication Links styling) could also work, where you enable it in the Dashboard settings page. Essentially, default Syndication Links plugin comes with SVG hex colors on by default. If a developer prefers, they can choose to uncheck a box to disable the CSS styles, thus serving a base Syndication Links CSS file. The developer can write their own styling since SVG fill attributes could have currentColor by default.

dshanske commented 5 years ago

We can automate the creation of the php file to include. I already do that with Grunt for the colors and names

dshanske commented 5 years ago

I have released a version into development that uses inline svg.

asuh commented 5 years ago

Awesome, looks good so far.

The miniified SVG files all contain a trailing . so that's outputting to the page. You'll see it at the end of this file (and every other SVG file in the directory) https://raw.githubusercontent.com/dshanske/syndication-links/master/svgs/500px.svg

dshanske commented 5 years ago

It was an automation issue. Fixed now.