@icon dimensions are too large

[Mottie]

I just attempted to update a userscript and got a 400 message "@icon unsupported file type or dimensions are too large."

My userscript targets GitHub and uses GitHub's own icon (https://github.com/fluidicon.png). Yes, it's 512x512, but it's been working just fine as an @icon for a long time now.

What is an allowable dimension?

Edit: It looks like 128x128 is acceptable; but why the limitation?

[Martii]

So far it's at:

• OpenUserJS.org/controllers/scriptStorage.js

  Lines 1394 to 1413 in 0dbe6a7

  	function acceptedImage(aDimensions) {
  	var maxX = 256; //px
  	var maxY = 256; //px
  	switch (aDimensions.type) {
  	case 'gif':
  	// fallthrough
  	case 'jpeg':
  	// fallthrough
  	case 'png':
  	// fallthrough
  	case 'svg':
  	// fallthrough
  	case 'ico':
  	if (dimensions.width <= maxX && dimensions.height <= maxY) {
  	return true;
  	}
  	}
  	return false;
  	}

Unless sizzle wants it differently these are the current stats. Waiting to hear back from him.

Is there some reason why you need such a huge @icon? ❓

Literally the only .user.js engine that uses the largest one of these is 48px by 48px and that's for Mozilla type browsers in the AOM and as I commented over at 951e712 this is the reasoning.

It looks like 128x128 is acceptable

Uhmmm yah right.... at one hour yesterday. ;)
See:

• 951e712

but why the limitation?

See:

• @icon is huge Webbeh/UserScript_PokemonTrash#1
• Few other issues in the past that I've lost track of... one user posted a .bmp that was several MiB.
• https://openuserjs.org/user/add/scripts#user-block-icon documented here for a few years now (expand the accordion)
• https://assets-cdn.github.com/pinned-octocat.svg (not as "pretty" but more or less the same thing and scalable at 1009 B vs even your smaller one at 13.44KiB... there may be a vectored version somewhere... still hunting)

[Mottie]

Wouldn't it make more sense to limit by file size instead of image size?

I didn't choose to make GitHub's favicon 512x512, I just use it as my userscript icon because it's convenient; other userscript authors also use this same icon, so now you're forcing them to update all of their userscripts to accommodate only your site.

Honestly, I didn't know you could point to an svg file... it's no where in the documentation; so I'm not even sure it works.

[Martii]

so I'm not even sure it works.

It does (for OUJS)... since I can't find one premade I made one... just resetting the dimensions and I'll give you a link in a few.

[Mottie]

It's fine, I just tested it and svgs work...

[Martii]

@Mottie
Here you go... this is as close as I can get it (the core was done several hours ago but needed some refreshers on vectorizing and some manual tweaks)... I'm not a graphic artist. This link won't stay up for too long.

• http://beta.usocheckup.dune.net/GitHub/fluidicon.svg (~2.7 KiB)
• https://github.com/fluidicon.png (~32.49 KiB)

To answer some of your questions:

limit by file size

No because each graphics type has specific properties that can make it really big or really small... this is a global check to limit those. We could limit file size but I would rather not have OUJS downloading icons all over the place... we currently have to get the first few chunks in order to get the basic metadata in order to check to see if it's valid. Not every server tells the file size on a HEAD check not to mention encoding/decoding.

I just use it as my userscript icon because it's convenient;

I understand... that's why I use my avatar most of the time unless I spend some quality time figuring out what to design or have designed by my colleagues.

it's no where in the documentation

I don't doubt that but most of the Image type routines handle SVG and quite a few others. When in doubt a PNG should work.

so now you're forcing them to update all of their userscripts to accommodate only your site.

Preventative measure... and it's more like you would be seeming to be a jerk about wasting their bandwidth and guests constantly rather than just one time. Weigh your authorship carefully and you'll get more flies with sugar than vinegar. :) EDIT Btw you found this user error message by attempting an update so your point is invalid about our site.

So your turn to answer mine... any real reason why you need a huge rasterized icon?

[Mottie]

any real reason why you need a huge rasterized icon

Not really, I've already starting using the svgs... it's just a pain to manually update each userscript because the GitHub hook still isn't working.

[Martii]

manually update each userscript because the GitHub hook still isn't working.

Yes it is working just fine for me. You must have something incorrect on your GH account or your authentication isn't present on OUJS.

Ref:

• 2017-12-06T05:58:11.210Z
• https://openuserjs.org/scripts/Marti/RFC_2606%C2%A73_-_Hello,_World!
• Martii/UserScripts@7f5f5d2

[jhult]

@Martii
@sizzlemctwizzle

I just ran into this error.

I am trying to use Atlassian's SVGs located here.

Any ideas on how to rectify this?

[Martii]

@jhult

Atlassian's SVGs located here.

Technically most of those are banners (a.k.a. logos in their terms) not icons. Icons usually are near 1:1 ratio.

Any ideas on how to rectify this?

viewBox="0 0 532.119 66.025"

As I mentioned it's not anywhere near 1:1 ... ~1:8 ratio here. GM and other engines that may support svg's should show it in a 1:1 box so it most likely would be super tiny and unreadable and visibly an eye sore unless it was around 1:1.

Please note the following is information passed onto me and not advice....

Re: https://atlassian.design/guidelines/brand/logos they have a section called "logomarks"... which has some near icons... however I do not see any svg's for it. There are some png's... so you could data URI those after a crop of the duplicates. e.g. https://atlassian.design/uploads/guidelines/brand/logos/[email protected]

Not sure which ones you are looking for since there are multiples. They technically didn't license it for redistribution and it may or may not be trademarked (although TM law usually requires a ™ somewhere in the image) . Fair use can come into play however I would recommend that you give a hyperlink or url in your .user.js somewhere for attribution clearly stating that it belongs to them and is used under Fair Use.

Ideally contact them for an icon svg of the squarish ones... or make one from their existing that matches their existing pngs. Save a hard copy of the web page for your records. They have some pretty stiff "requirements" though.

Not being a graphic artist by any means... here's taking Atlassian-horizontal-blue-rgb and converting it to a pseudo Atlassian-vertical-blue-rgb under Fair Use and comparing it as best I can to the original png. e.g. it's not 100% but has an error of about 5% or so. Their actual icon isn't the same anywhere in their illustrations too which I find interesting.

<?xml version="1.0" encoding="UTF-8"?>
<svg width="71.008" height="80.796" version="1.1" viewBox="0 0 71.008 80.796" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
 <metadata>
  <rdf:RDF>
   <cc:Work rdf:about="">
    <dc:format>image/svg+xml</dc:format>
    <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
    <dc:title>Atlassian-vertical-blue-rgb</dc:title>
   </cc:Work>
  </rdf:RDF>
 </metadata>
 <defs>
  <style>.cls-1{fill:url(#linear-gradient);}.cls-2{fill:#2684ff;}.cls-3{fill:#0052cc;}</style>
  <linearGradient id="linear-gradient" x1="28.121" x2="11.239" y1="35.051" y2="64.292" gradientTransform="translate(3.9069 .15426)" gradientUnits="userSpaceOnUse">
   <stop stop-color="#0052cc" offset="0"/>
   <stop stop-color="#2684ff" offset=".923"/>
  </linearGradient>
 </defs>
 <title>Atlassian-vertical-blue-rgb</title>
 <path class="cls-1" d="m23.261 30.269a1.856 1.856 0 0 0-3.157 0.343l-15.997 31.984a1.912 1.912 0 0 0 1.71 2.767h22.275a1.843 1.843 0 0 0 1.71-1.057c4.805-9.929 1.893-25.026-6.541-34.037z" fill="url(#linear-gradient)"/>
 <path class="cls-2" d="m35.07 1.0261a42.188 42.188 0 0 0-2.463 41.65l10.739 21.478a1.912 1.912 0 0 0 1.71 1.057h22.271a1.912 1.912 0 0 0 1.71-2.767s-29.962-59.931-30.715-61.43a1.806 1.806 0 0 0-3.252 0.012z" fill="#2684ff"/>
 <g fill="#0052cc">
  <path class="cls-3" d="m32.396 74.155c0 1.2752 0.59156 2.2877 2.9055 2.7347 1.3805 0.28983 1.6697 0.51267 1.6697 0.97285 0 0.44697-0.28982 0.73631-1.2622 0.73631a7.1226 7.1226 0 0 1-3.3525-0.90715v2.0771c0.69687 0.34183 1.6171 0.72311 3.3262 0.72311 2.4191 0 3.3789-1.0788 3.3789-2.682 0-1.5119-0.80201-2.222-3.0633-2.7082-1.249-0.27614-1.5514-0.55212-1.5514-0.9466 0-0.49914 0.44697-0.70991 1.2752-0.70991 0.99924 0 1.9853 0.30238 2.9187 0.72311v-1.9853a6.5967 6.5967 0 0 0-2.853-0.59157c-2.235 0-3.3919 0.97285-3.3919 2.5637" stroke-width=".16101"/>
  <polygon class="cls-3" transform="matrix(.16101 0 0 .16101 -14.671 69.861)" points="485.33 11.563 485.33 65.209 496.76 65.209 496.76 24.301 501.58 35.16 517.75 65.209 532.12 65.209 532.12 11.563 520.69 11.563 520.69 46.184 516.36 36.14 503.38 11.563"/>
  <rect class="cls-3" x="49.756" y="71.722" width="2.0115" height="8.6377" stroke-width=".16101"/>
  <path class="cls-3" d="m47.435 77.809c0-1.5119-0.80201-2.222-3.0633-2.7082-1.249-0.27614-1.5514-0.55212-1.5514-0.9466 0-0.49914 0.44697-0.70991 1.2752-0.70991 0.99925 0 1.9853 0.30238 2.9187 0.72311v-1.9853a6.5967 6.5967 0 0 0-2.853-0.59157c-2.235 0-3.3919 0.97285-3.3919 2.5637 0 1.2752 0.59156 2.2877 2.9055 2.7347 1.3805 0.28983 1.6697 0.51267 1.6697 0.97285 0 0.44697-0.28983 0.73631-1.2622 0.73631a7.1226 7.1226 0 0 1-3.3525-0.90715v2.0771c0.69687 0.34183 1.6171 0.72311 3.3262 0.72311 2.4191 0 3.3789-1.0788 3.3789-2.682" stroke-width=".16101"/>
  <polygon class="cls-3" transform="matrix(.16101 0 0 .16101 -14.671 69.861)" points="195.26 11.563 195.26 65.209 220.94 65.209 224.99 53.614 207.84 53.614 207.84 11.563"/>
  <polygon class="cls-3" transform="matrix(.16101 0 0 .16101 -14.671 69.861)" points="170.99 65.209 170.99 23.157 185.85 23.157 185.85 11.563 144.53 11.563 144.53 23.157 158.41 23.157 158.41 65.209"/>
  <g stroke-width=".16101">
   <path class="cls-3" d="m5.6654 71.722h-2.6533l-3.0121 8.6378h2.3002l0.42701-1.4548a5.7173 5.7173 0 0 0 3.2216 0l0.42701 1.4548h2.3007zm-1.3268 5.6254a3.9287 3.9287 0 0 1-1.107-0.15924l1.107-3.7695 1.107 3.7708a3.9287 3.9287 0 0 1-1.107 0.15796z"/>
   <path class="cls-3" d="m28.032 71.722h-2.6532l-3.0121 8.6378h2.3007l0.42701-1.4548a5.7173 5.7173 0 0 0 3.2216 0l0.42701 1.4548h2.3007zm-1.3266 5.6254a3.9287 3.9287 0 0 1-1.107-0.15924l1.107-3.7695 1.107 3.7708a3.9287 3.9287 0 0 1-1.107 0.15796z"/>
   <path class="cls-3" d="m59.016 71.722h-2.6532l-3.0121 8.6378h2.3007l0.427-1.4548a5.7173 5.7173 0 0 0 3.2216 0l0.42702 1.4548h2.3009zm-1.3274 5.6254a3.9287 3.9287 0 0 1-1.107-0.15924l1.107-3.7695 1.107 3.7708a3.9287 3.9287 0 0 1-1.107 0.15796z"/>
  </g>
 </g>
</svg>

After some decision on whether you should use it (permission is always good to get since they seem to be a bit concerned with its styling) you could data URI this for @icon... you may want to fill out the dc: tags and attribute the original url to the png to CYA! :)

[Martii]

Btw there is also https://seeklogo.com/vector-logo/326273/atlassian which is anothers work... but it also has an error of about 5% or so.

[Martii]

And one more from the source (buried) at https://www.atlassian.com/assets/img/icons/imkt/imkt-navbar__charlie-logo.svg?cdnVersion=kn with no text. It's viewbox should be within tolerances for OUJS.

---

You can temporarily fork RFC 2606§3 - Hello, World! and uncomment the @icon... this won't stay this way in the source, as I routinely overwrite this file, but I'll keep it until you respond or the next GH sync test. Please note their CDN can change at any time... so data URI is usually recommended.

---

Additional ref(s):

• https://www.atlassian.com/legal/trademark Currently specifies that you get to guess on ™ and/or ® ... which is incorrect... should be previously included as part of the image whether metadata and/or image wise. 🤦‍♂️

[jhult]

Here are some other SVG sources (although all horizontal).

I'm all set. Thanks for all your effort.

[Martii]

Btw recommend saving it as an optimized SVG instead of Inkscape native... may have issues in some browsers and there's a lot of superfluous metadata that Inkscape puts in e.g. it's way bigger than it needs to be. You'll need Pythons pip to install scour for that to work in *nix.