It's 2020.... PNG or SVG files for use as emoji/smilies?

It's 2020.... PNG or SVG files for use as emoji/smilies?

  • SVG

    Votes: 26 68.4%

  • PNG

    Votes: 5 13.2%

  • GIF

    Votes: 3 7.9%

  • none - use native only

    Votes: 4 10.5%
  • Total voters
    38
Kevin

Kevin

Well-known member
Setting up a new site in 2020 using the most recent version of XF that supports native emoji and when possible converting native to being inline images. What file format to go with taking into account that most users are now using modern browsers that support using SVG images in img tags? SVG? PNG? Something else? Why?

At the moment I'm leaning towards using SVG everywhere possible to avoid having to worry about scaling at different resolutions (but still need to work out how to get the XF CDN emoji setting to be used locally with a different extension as ".png" is hard-coded). Both Google's Noto and Twitter's Twemoji projects offer SVG files so getting the full sets in SVG isn't an issue and JoyPixels offers SVG files for their "premium" licenses.
 
Kevin said:
I'm sorta' coming to the same conclusion. For a new XF side-project I'm playing with I think I'll be trying to use SVGs for all images as much as possible (reactions, smilies, emoji, logo, etc.).
Click to expand...


When I designed graphics to complement the xenforo software I always designed them in vector form for scalability and future-proofing. I just happened, at the time, saved the source file to .png. Xenforo or .SVG adoption had not caught up back then.

Ps. Hope all is well with you Kevin ;) Are you still in contact with John aka Smacklan?
 
Last edited:
roundandround.gif
 
Shelley said:
When I designed graphics to complement the xenforo software I always designed them in vector form for scalability and future-proofing. I just happened, at the time, saved the source file to .png. Xenforo or .SVG adoption had not caught up back then.

Ps. Hope all is well with you Kevin ;) Are you still in contact with John aka Smacklan?
Click to expand...

Nice to see you popping in Shelly!
 
Shelley! Always good to see you pop-in. :)

Shelley said:
When I designed graphics to complement the xenforo software I always designed them in vector form for scalability and future-proofing. I just happened, at the time, saved the source file to .png. Xenforo or .SVG adoption had not caught up back then.
Click to expand...
SVG still isn't fully embraced by XF yet but with most users now on devices that support SVG it's a lot easier to justify going with it. I have to teach myself new ways though, I'm used to working with layers in PS and not vectors. But learning is always the fun part. :D

Shelley said:
Ps. Hope all is well with you Kevin ;) Are you still in contact with John aka Smacklan?
Click to expand...
All is well, or as well as it can be these days, thanks. I haven't talked with John for a few years now; after he closed the last of his style sites we were in touch for a bit over at TAZ but I don't recall seeing him online lately. I should track him down though, I'm starting a new side project that might be purview.
 
Facebook interchanges somewhat. I think its not the end of the world either way. The real answer comes down to quality and detail of the specific resource or icon itself. Sometimes a 2 or 3x png is better. But as a default, SVG seems to be the best for performance and quality as a general rule. Especially since the main reason you were told not to was browser support. And that ship has sailed.
 
For anybody interested... all emoji and reactions are now SVG images. :D

What I have going on is specifying a local folder for my 'emoji source', using a shell script to copy the source SVG files to the folder in the file name format expected by XF (edit: as expected by XF when using 'JoyPixels' as the 'source' selection), and then using an XF class extension to change the expected file name extension of the emoji files from png to svg.​
​
For the source SVG files I'm using both the Google Noto and Twitter Twemoji projects. I prefer the Noto images but the Twemoji project is updated faster with new Unicode releases. The script does a blind copy on the Noto files and then the Twemoji images copy is doing a 'no clobber' so they don't overwrite any of the Noto images. That way the images are 99% (or whatever the math comes out to :p) Noto and then some Twemoji to fill in the gaps so that as many emoji as possible have corresponding SVG files. As I refresh the source files then any new Noto images will overwrite any of the Twemoji.​
​
The class extension is just a simple preg_replace on the output of EmojiFormatter. I have the alternate file extensions selectable as an option in the ACP so it could be GIF or JPG as well but I can't envision anybody would ever choose to use something other than the default PNG or SVG.​


Why? No more relying on images hosted on a different servers, I can use whatever images I want, and I can use SVG's. The older sites still have a bunch of XF defined smilies in various formats but the emoji images and reactions are all SVG at least and the newer sites will be all SVG where possible.
 
Last edited:
Kevin said:
For anybody interested...
Click to expand...
... and as I realize belatedly, if somebody wanted to use Twemoji as their source then they don't have to bother renaming the files like I am, just use Twemoji as your source, use your own custom CDN folder, and then optionally override the file type from png to svg. Google Noto and Twemoji both offer their full sets in PNG and SVG formats so if somebody really wants to be up & running quickly with SVG with the least amount of work download the Twemoji set, upload the SVG files to your server in a new folder, change the CDN source location to your folder, and use this to change the format to SVG. For now I'm sticking with Google Noto as my main source.

On the subject of emoji libraries, Open Emoji looks interesting. They offer both color and B&W versions of their images (svg or png). I haven't looked at their naming conventions yet but their art style stands apart from the other libraries.
openmoji.org

OpenMoji

Open source emojis for designers, developers and everyone else!
openmoji.org openmoji.org
 
So would I get much benefit by taking all my png files in XenForo and convert to svg, upload to a second domain for cookie purposes and then cache them using cloud flare like I am doing now with my png files?
 
Cooking Ketogenic said:
So would I get much benefit by taking all my png files in XenForo and convert to svg, upload to a second domain for cookie purposes and then cache them using cloud flare like I am doing now with my png files?
Click to expand...
You likely wouldn't get much benefit if you're already doing what you've described. In my case, and what started this little journey for me, was starting another XF forum from scratch and so I grabbed that opportunity to look into a few things. Besides the reasons I mentioned up on post #12 above this also gave me a chance to dig into the XF code a bit to see how I could override the hard-coded ".png" extension for the emoji CDN.

You've got me curious though... if you're already using local images for your emoji, what's your XF configuration like? Using the JoyPixels or Twemoji PNG files with a local source value for the CDN location or are you not using any emoji CDN and are just using the locally defined XF smilies?
 
Kevin said:
You've got me curious though... if you're already using local images for your emoji, what's your XF configuration like? Using the JoyPixels or Twemoji PNG files with a local source value for the CDN location or are you not using any emoji CDN and are just using the locally defined XF smilies?
Click to expand...

I just have a $5 VPS at Digital Ocean with LEMP on it. Graphics for the site and anything in the style folder is in it. I use a .net of my .com domain to point to it and I cache it though Cloud Flare. I would love to know how to do this with external_data too to cache attachments and avatars
 

Similar threads

CinVin
[CinVin] Emoji Tweaks (use SVG images for emoji instead of PNG) [Deleted]
Replies
1
Views
674
CinVin
CinVin
Top Bottom