1342944 - Upload SVG emoticons to the codebase

Status: ASSIGNED

(Other Applications :: ChatZilla, enhancement)

Description

[Robert Utasi [:hunboy]]

For future usage on retinapixel screens we need vector-based graphics instead of the png we have currently. These smileys are equal to the png's by 16x16 px size

Comment 1

[Robert Utasi [:hunboy]]

Attachment: the smileys

Comment 2

[Robert Longson [:longsonr]]

xml:space="preserve" is only useful/functional if the SVG contains text.

Why do many svg files apply an offset of 0 e.g.

<feOffset result="offOut" in="SourceAlpha" dx="0" dy="0" />

That a no-op

Comment 3

[Robert Utasi [:hunboy]]

(In reply to Robert Longson from comment #2)
> xml:space="preserve" is only useful/functional if the SVG contains text.
> 
> Why do many svg files apply an offset of 0 e.g.
> 
> <feOffset result="offOut" in="SourceAlpha" dx="0" dy="0" />
> 
> That a no-op

These files were originally generated by AI, and were simplified.
The #ff3 filter is for the gray alphachanell as "shadow" around the emoticon.

Comment 4

[Robert Utasi [:hunboy]]

> <feOffset result="offOut" in="SourceAlpha" dx="0" dy="0" />
> 
> That a no-op

Robert, if I remove that, the "shadow" circle disappears...

https://jsfiddle.net/jtwm8jdh/

What do you mean on "no-op" ? That is necessary.

Comment 5

[Robert Longson [:longsonr]]

This gives the same result as your fiddle. Note that the edge are cut off in your fiddle and in the markup below. I'm not sure why you're specifying an x and y of 0 but if you decreased those (and increased the width if necessary) you could fix that.

  <filter id="ff3" x="0" y="0" width="110%" height="110%">
    <feGaussianBlur result="blurOut" in="SourceAlpha" stdDeviation="0.25" />
    <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
  </filter>

Comment 6

[Robert Utasi [:hunboy]]

Attachment: the smileys

Reduced the svg code based on suggestions

Comment 7

[Robert Utasi [:hunboy]]

Robert, just 1 more question I can't solve:

How we force resize the emoticon if that is in a pseudo-element's content?

Here is simple sample I prepared:

https://jsfiddle.net/g02fc64o/

So the plan: auto-resizing the content-image also when we change the font-size on the messages.
Pls, use the range meter, to see how it doesn't happen.

Question: is there a way by svg to keep (and apply) the defined size (now forced 1em) for the content: loaded svg?

I hope you understand my question, however I can't explain better :)

p.s. for some reasons we use the ::after {content: url(...)} for the smilies, because it is motif dependent and user can enable/disable the smilies on the messages, so I know pretty well if it works well on foreground <img> element, but we can't use that.


Here is the current base64 :

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16" height="16px" width="16px">
<g>
  <circle fill="#000000" cx="8.20" cy="8.20" r="7.4" opacity="0.6" filter="url(#ff3)" />
  <circle fill="#FFCC00" cx="7.5" cy="7.5" r="7.5"/>
  <circle fill="url(#cZgrad)" cx="7.5" cy="7.5" r="6.5"/>
  <circle fill="#333366" cx="5" cy="5" r="1"/>
  <circle fill="#333366" cx="10.1" cy="5" r="1"/>
  <path fill="none" stroke="#333366" stroke-width="1.504" stroke-linecap="round" stroke-miterlimit="10" d="M3.8,8.6 c0,0,0.6,2.8,3.8,2.8s3.9-2.8,3.9-2.8"/>
</g>
<defs>
  <radialGradient id="cZgrad" cx="-70.821" cy="85.1078" r="0.5" gradientTransform="matrix(13.0699 0 0 -13 930 1110.13)" gradientUnits="userSpaceOnUse">
  	<stop  offset="0" stop-color="#FFFFFF"/>
  	<stop  offset="0.1621" stop-color="#FFFEFB"/>
  	<stop  offset="0.3338" stop-color="#FFFCEE"/>
  	<stop  offset="0.51" stop-color="#FFF7D9"/>
  	<stop  offset="0.6893" stop-color="#FFF1BB"/>
  	<stop  offset="0.8692" stop-color="#FFEA95"/>
  	<stop  offset="1" stop-color="#FFE375"/>
  </radialGradient>
  <filter id="ff3" x="-5%" y="-5%" width="110%" height="110%">
    <feGaussianBlur result="blurOut" in="SourceAlpha" stdDeviation="0.25" />
    <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
  </filter>
</defs>
</svg>

Comment 8

[Robert Longson [:longsonr]]

I'm not sure why it's not scaling.

Comment 9

[Robert Utasi [:hunboy]]

Robert, when I set preserveAspectRatio="none" and remove the height and width, and define as background-image, it does what I want.

https://jsfiddle.net/g02fc64o/1/

Any nits on it? Does it cause any trouleshoots? I mean by using preserverAspectRatio, i didnot need to set up background-size: cover . is it stable?

Comment 10

[Robert Longson [:longsonr]]

It shouldn't make a difference whether you preserve the aspect ratio or not as your viewBox aspect ratio is 1:1 as is your width/height.

Comment 11

[James Ross]

Comment on attachment 8843636 [details] [diff] [review]
the smileys

Review of attachment 8843636 [details] [diff] [review]:
-----------------------------------------------------------------

LGTM r=silver