Make WordPress Core

Opened 6 years ago

Closed 6 years ago

Last modified 6 years ago

#36525 closed enhancement (fixed)

Replace a PNG image to SVG in Emoji

Reported by: webliberty Owned by: peterwilsoncc
Milestone: 4.6 Priority: normal
Severity: normal Version: 4.2
Component: Emoji Keywords: has-patch has-unit-tests commit
Focuses: javascript Cc:

Description (last modified by pento)

When you insert emoticons on a page in Chrome (OS Windows) image blur and become butty, because the browser will convert Unicode characters into an PNG image with the initial size 72х72 pixels and then shrinks to the size of 1em.

Why not replace PNG to SVG how it's done on blogs wordpress.com?

Attachments (4)

36525.a.diff (3.0 KB) - added by peterwilsoncc 6 years ago.
36525.b.diff (4.4 KB) - added by peterwilsoncc 6 years ago.
36525.diff (3.1 KB) - added by peterwilsoncc 6 years ago.
36525.2.diff (6.0 KB) - added by peterwilsoncc 6 years ago.

Download all attachments as: .zip

Change History (15)

#1 @peterwilsoncc
6 years ago

  • Version changed from 4.5 to 4.2

Hi webliberty and welcome to trac!

@pento is it worth throwing a document.implementation.hasFeature('http://www.w3.org/TR/SVG11/feature#Image', '1.1') check in the JavaScript somewhere to check for SVG vs PNG support? Additional code would be required around the CDN settings in PHP, I'd need to spent a few minutes working out what this would look like.

#2 @pento
6 years ago

  • Description modified (diff)
  • Milestone changed from Awaiting Review to 4.6
  • Owner set to peterwilsoncc
  • Status changed from new to assigned

Modernizr's comments are the best.

Let's try the feature detection switch. The good news is that it looks like IE8 is the only real problem.

#3 @pento
6 years ago

I've updated the w.org CDN with the Twemoji 2 SVG assets. All the new images are available, and any updated images will be available but incorrect until the CDN has been purged.

I've just confirmed that the twemoji.js regex is up to date, there are no changes needed there to support SVG.

#4 @peterwilsoncc
6 years ago

I'm indecisive so two possibilities attached.

In 36525.a.diff:

The settings include both a bitmap and a vector CDN. The JavaScript detects if SVG is supported and uses the vectorCDN if it is.

In 36525.b.diff:

Paths for the SVG and bitmaps are added to the settings, if the default CDN is used the paths are added to the CDN's base URL.

If the CDN url is filtered, the paths are set to null for the developer to set explicitly. This is for backcompat, we can't assume a developer using their own CDN has included both bitmap and SVG images.

#5 @pento
6 years ago

Let's go with 36525.a.diff. Much less complex.

Also, I'm inclined to refer to it as svg_url instead of vector_url. Vector implies, well, vectors.

#6 @peterwilsoncc
6 years ago

  • Focuses javascript added
  • Keywords has-patch needs-refresh added

6 years ago

#7 @peterwilsoncc
6 years ago

  • Keywords needs-refresh removed

Refreshed with svg in place of vector references.

#8 @peterwilsoncc
6 years ago

  • Keywords has-unit-tests added

Added unit tests in 36525.2.diff

#9 @pento
6 years ago

  • Keywords commit added

Pretty shiny. Let's do it.

#10 @peterwilsoncc
6 years ago

  • Resolution set to fixed
  • Status changed from assigned to closed

In 37471:

Emoji: Use SVG in supported browsers

Use SVG images in supporting browsers, otherwise fall back to PNG images. Add the filters emoji_svg_url and emoji_svg_ext.

Introduces unit tests to check the Emoji CDN filters.

Fixes #36525

#11 @peterwilsoncc
6 years ago

In 37473:

Docs: Correct @since tag for Emoji SVG filters

See [37471]

Fixes #36525

Note: See TracTickets for help on using tickets.