Break SVG sprite into individual icons

[iandunn]

WordCamp.org supports HTTP2, so spriting images doesn't significantly help load times. Without the performance gains, I don't think the added complexity and maintenance is worth it.

[iandunn]

I didn't dig too much into how TwentySeventeen does this, and the reasons for it, so let me know if you think there are reasons to keep it.

[2ndkauboy]

There is a reason. It's not about having a sprite, but having an inline SVG. This will give you the power to use CSS to change the Icons, like giving them a new color without the need to provide different sprites for different colors.

[2ndkauboy]

Something like this:

#icon-twitter {
    fill: #1da1f2;
}

[iandunn]

I don't understand why that needs a sprite, though. Couldn't you also just do <img src="icon-twitter.svg" id="icon-twitter" /> ?

[2ndkauboy]

That would be possible, but the benefit of having the icon in a symbol is, that you only need to have it once (per icon). That you can use the use tag to reference them.

Here is a talk I have seen in London last year, explaining the topic: http://wordpress.tv/2016/05/28/sarah-semark-stop-using-icon-fonts-love-svg/

I think that's the reason the _s team has taken this approach.

[iandunn]

I did some digging around, but haven't found anything saying why use offers a compelling-enough benefit to warrant the complexity of an entire icon system over just using straightforward img tags.

• SVG in place if icon font WordPress/twentyseventeen#60
• https://developer.mozilla.org/en-US/docs/Web/SVG/Element/use
• https://css-tricks.com/svg-use-with-external-reference-take-2/
• https://css-tricks.com/svg-sprites-use-better-icon-fonts/

Are there rendering performance concerns with having multiple inline <img href="foo.svg" /> elements? Caching? Something else?

[iandunn]

Oh, I see, you meant inline <svg> vs inline <img>, not inline vs CSS data URIs.

That makes sense to me. I'm still not sure that sprites are needed/worth it, though.

Couldn't we just have something like this:

<svg><use xlink:href="foo.svg#icon-foo"></use></svg>
<svg><use xlink:href="bar.svg#icon-bar"></use></svg>

Is the problem there with IE support?

[2ndkauboy]

The problem with IE still exists. The current IE11 can handle inline SVG symbols but not external (as mentioned in the ressources you've linked). I created a small test for that, if you want to checkyourself: https://kau-boys.com/stuff/svg-symbols/svg-symbols-test.html

So I agree, that it might add some markup to the HTML (about 1K gzipped), but that shouldn't be a real issue. It does increase browser compatibility and does not require any extra work for things like dynamically loading more icons while working in the customizer. I would say the TwentySeventeen team thought about it a lot and found the best solution ;)

[iandunn]

My main concern isn't the size of HTML document, it's the added complexity and maintenance cost, especially if we ever want to customize it. It just seems like a lot of cruft for something that should be simple. It even includes a fallback for IE8... I doubt that TwentyEighteen will do that.

I think a cleaner solution for IE11 support might be a polyfill, like svgxuse or svg-use-it. At first glance, svgxuse seems like the better of the two, since it's more people using/testing it, and has been updated more recently.

I don't mean any disrespect to the TwentySeventeen team, they're all talented people. Just because they chose a particular solution for their goal doesn't mean that's the best solution here, though. It's also entirely possible that there are other acceptable solutions. Nothing is perfect, everything has tradeoffs, and different people value those tradeoffs differently.

I don't think using the current sprite technique is a blocker, but it does seem like unnecessary complexity. I'm still open to going w/ the sprites, though. @coreymckrill, do you have any thoughts one way or the other?

[coreymckrill]

My main concern isn't the size of HTML document, it's the added complexity and maintenance cost, especially if we ever want to customize it.

Would customizing it be anything other than adding new icons? What would be the process for adding a new icon?

I'm not sure I understand how having one file with multiple SVG sprites is more complex than having several individual SVG image files. But maybe I'm not understanding the issue...

[iandunn]

@2ndkauboy can correct me if I'm wrong, but I think adding new icons would just be a matter of adding them to the sprite, so that's not really a problem.

I guess it's more the get_svg() bit that makes me leery; that we need to include 100 lines of code instead of doing something simple like <svg><use xlink:href="foo.svg#icon-foo"></use></svg> in the template files.

Imagine if every time you wanted to add a <div> to a page, you had to call a wrapper function that pulled the div's markup out of a master file containing all divs. It just seems kind of convoluted, rather than being straight-forward.

If I haven't convinced either of you, though, then maybe I'm making too much out of it. I don't think it's a blocker either way, so II'll go ahead close this out.