Add Citrix & compact logo

[Mottie]

• Add Citrix (819 bytes) & Citrix compact (438 bytes) - closes Add Citrix #460
• Updated Readme
• Add reference images
• Edit reference page
• Add Android Images

---

Please note that the Citrix compact logo in this PR is the full dot + X, but the compact mark brand has 10+ variants. I was able to create a logo that works with those main 10 variants, but not all the user interface variations. I didn't submit it because this dynamic logo ends up being 1107 bytes with the outer rectangle included, and 1052 bytes without outer rectangle. The Citrix brand recommendations for the compact mark state that it shouldn't be included inside any shape.

Anyway, here is dynamic logo, and a demo of the logo: https://codepen.io/Mottie/pen/VwzedQb

1107 bytes version & extra css

<svg xmlns="http://www.w3.org/2000/svg"
aria-label="Citrix" role="img"
viewBox="0 0 512 512"><rect
rx="15%" height="512" width="512"
fill="#fff"/>
<style>circle[id]{display:none}line{stroke-linecap:round;stroke-width:25;stroke:currentColor}</style><defs><line id="l" x1="38" y1="44" x2="0" y2="0"/><line id="r" x1="0" y1="44" x2="38" y2="0"/></defs><circle cx="255" cy="109" r="20"/><circle id="m" cx="254" cy="259" r="14"/><circle id="nec" cx="295" cy="211" r="14"/><circle id="nef" cx="334" cy="166" r="14"/><circle id="nwc" cx="213" cy="211" r="14"/><circle id="nwf" cx="174" cy="166" r="14"/><circle id="swc" cx="215" cy="304" r="14"/><circle id="swf" cx="176" cy="349" r="14"/><circle id="sec" cx="293" cy="304" r="14"/><circle id="sef" cx="332" cy="349" r="14"/><use id="nwf" href="#l" x="175" y="167"/><use id="nwc" href="#l" x="216" y="215"/><use id="sec" href="#l" x="255" y="260"/><use id="sef" href="#l" x="293" y="304"/><use id="swf" href="#r" x="177" y="304"/><use id="swc" href="#r" x="215" y="260"/><use id="nec" href="#r" x="254" y="215"/><use id="nef" href="#r" x="295" y="167"/></svg>

ID naming:

• m = middle (circle)
• ne/se/sw/nw = compass directions
• c/f = close/far

so "nec" is the id of the circle/line in the northeast direction, close to the center

.style1 svg use[id^="nw"], .style1 svg use[id^="se"] { display: none }
.style1 svg circle[id^="nw"], .style1 svg circle[id^="se"] { display: block }

.style2 svg use[id^="nec"], .style2 svg use[id^="swc"] { display: none }

.style3 svg use[id$="f"] { display: none }
.style3 svg circle[id$="f"] { display: block }

.style4 svg use[id^="s"] { display: none }
.style4 svg circle[id^="s"] { display: block }

.style5 svg use#nef { display: none }
.style5 svg circle#nef { display: block }

.style6 svg use#nef, .style6 svg use#nwf { display: none }
.style6 svg circle#nef, .style6 svg circle#nwf { display: block }

.style7 svg use#nec, .style7 svg use#nwc { display: none }

.style8 svg use[id$="c"] { display: none }
.style8 svg circle#m { display: block }

.style9 {} /* default */

.style10 svg use[id^="sw"] { display: none }
.style10 svg circle[id^="sw"] { display: block }

Lastly, this dynamic logo can be further reduced in size to 1009 bytes if we remove the outer rectangle and the circle with the ID of "nec" (north-east close) since it's never visible in the main 10 variants of the logo.

1009 bytes version

<svg xmlns="http://www.w3.org/2000/svg"
aria-label="Citrix" role="img"
viewBox="0 0 512 512">
<style>circle[id]{display:none}line{stroke-linecap:round;stroke-width:25;stroke:currentColor}</style><defs><line id="l" x1="38" y1="44" x2="0" y2="0"/><line id="r" x1="0" y1="44" x2="38" y2="0"/></defs><circle cx="255" cy="109" r="20"/><circle id="m" cx="254" cy="259" r="14"/><circle id="nef" cx="334" cy="166" r="14"/><circle id="nwc" cx="213" cy="211" r="14"/><circle id="nwf" cx="174" cy="166" r="14"/><circle id="swc" cx="215" cy="304" r="14"/><circle id="swf" cx="176" cy="349" r="14"/><circle id="sec" cx="293" cy="304" r="14"/><circle id="sef" cx="332" cy="349" r="14"/><use id="nwf" href="#l" x="175" y="167"/><use id="nwc" href="#l" x="216" y="215"/><use id="sec" href="#l" x="255" y="260"/><use id="sef" href="#l" x="293" y="304"/><use id="swf" href="#r" x="177" y="304"/><use id="swc" href="#r" x="215" y="260"/><use id="nec" href="#r" x="254" y="215"/><use id="nef" href="#r" x="295" y="167"/></svg>

[Mottie]

@edent What did you think about the dynamic compact logo I mentioned above?