17 ms·

Tell HN: The “Y” logo in the top-left corner has been upgraded to SVG

579 points by perihelions 4y ago

Havoc 4y ago
Mostly just amused that this gets 50+ comments
- josefx 4y ago
  People pushing xml in 2023 is news and highly relevant. Can we get a yaml or json based image format or maybe some rust based web assembly to get on with the times?
  - efreak 3y ago
    I prefer using table cells for pixels. I saw a script once that took an image as input and output html code to send those who had pictures blocked...
deleted 4y ago
[deleted]
markdown 4y ago
Nearly 15 years late is better than never. Congrats on the upgrade :)
phoe-krk 4y ago
Here it is, in its full glory! <?xml version="1.0" encoding="utf-8"?> <svg viewBox="0 0 100 100" width="100" height="100" xmlns="http://www.w3.org/2000/svg"> <rect x="0" y="0" width="100" height="100" fill="rgb(255, 102, 0)"></rect> <path d="M 50 77 L 50 50 " fill="none" stroke="rgb(255, 255, 255)" stroke-width="8.78662150719729" stroke-linecap="butt"> </path> <path d="M 94.93056731583404 35.622745513916016 L 71.2454833984375 71.2454833984375 " fill="none" stroke="rgb(255, 255, 255)" stroke-width="8.78662150719729" stroke-linecap="butt" transform="matrix(1 0 0 1 -21.2455 -21.2455)"> </path> <path d="M -78.93056731583404 36.17028045654297 L -55.67118835449219 71.79300689697266 " fill="none" stroke="rgb(255, 255, 255)" stroke-width="8.78662150719729" stroke-linecap="butt" transform="matrix(1 0 0 1 105.396 -21.7213)"> </path> <rect transform="" width="100" height="23.742591024555463" stroke-width="1" stroke="none" fill="#FF6600" stroke-opacity="1" fill-opacity="1" stroke-linecap="butt" stroke-linejoin="miter" > </rect> </svg>
- goodrubyist 4y ago
  so many butts!
- 5- 4y ago
  that's a lot of svg! svgo suggests the following without any manual tinkering: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path fill="#F60" d="M0 0h100v100H0z"/><path fill="none" stroke="#FFF" stroke-width="8.79" d="M50 77V50m23.69-35.62L50 50M26.47 14.45l23.25 35.62"/><path fill="#F60" d="M0 0h100v23.74H0z"/></svg>
  - willis936 4y ago
    Transport compression should get it most of the way there, no? I think having human readable vector graphics is nice.
    - kashnote 4y ago
      This the most HN string of replies I've seen. Cheers haha
    - h0l0cube 4y ago
      Apart from being one-lined, the optimised version is more readable and roughly about as compressible. There’s really no reason to have transformation matrices for 2 squares and a simple polygon
    - tomxor 4y ago
      transport compression isn't going to help with the unnecessary high precision coordinates. There are also a bunch of things that are just the result of it being automatically generated by some vector package, such as the transforms, separate paths, masking of a bunch of strokes rather than just flattening the shape etc.
  - tomxor 4y ago
    I see your 258 byte svgo version and raise it my 171 byte hand optimized version: <svg viewBox="-32 -32 64 64" xmlns="http://www.w3.org/2000/svg"><path fill="#f60" d="M-32-32h64v64h-64z"/><path fill="#fff" d="m0-5l-8-12h-7L-3 1v16h6V1l12-18H8z"/></svg>
whalesalad 4y ago
Now we just need the little up and down arrows to go SVG and HN can look crisp at any resolution.
- Tronno 4y ago
  Well, have I got some news for you! https://news.ycombinator.com/triangle.svg https://news.ycombinator.com/triangle.svg
  - crazygringo 4y ago
    ...and it's already implemented! I thought this day would never come.
    - nacs 4y ago
      And the down arrow is using the same SVG with a `transform: rotate(180deg)` too! Truly incredible developments.
      - function_seven 4y ago
        This is some excellent planning. When a future request comes in for east votes and west votes, they can just update the rotate() parameter and push the changes straight to prod.
  - cantSpellSober 4y ago
    If it's just a background-image, why not just build the triangle in CSS? Saves a network request (and a whopping 525 bytes)
- Glyptodon 4y ago
  I just want them bigger on mobile.
- kmstout 4y ago
  Why work so hard? ▲ U+25B2 BLACK UP-POINTING TRIANGLE ▼ U+25BC BLACK DOWN-POINTING TRIANGLE [0] https://en.wikipedia.org/wiki/Geometric_Shapes_(Unicode_block) https://en.wikipedia.org/wiki/Geometric_Shapes_(Unicode_bloc...
PossiblyKyle 4y ago
Glad to see technology is finally here for it
rendx 4y ago
sweet!
3v1n0 4y ago
The designer who did this had to invest really so much time... :-)
nmstoker 4y ago
Excellent. Now if the mobile view could space items out a touch more so I don't periodically fat thumb the tiny flag/hide article links it would be perfect!
- vermilingua 4y ago
  I thought I was the only one
- cratermoon 4y ago
  HN on mobile is a usability nightmare.
  - brettermeier 4y ago
    I would make the fold-a-post-button a bit bigger and with more space to the left. The rest seems clickable to me.
    - cratermoon 4y ago
      How's your vision, hand-eye-coordination, and fine motor control?
- ericpauley 4y ago
  The accidental Hide is the worst because you can’t just undo… it’s gone (unless you go to the Hidden page)!
  - ISL 4y ago
    A long-press for flagging/hiding would be great (or even a confirmation-screen).
  - Waterluvian 4y ago
    My weekly accidental “flag” scares me the most. What if I don’t notice it?!
SigmundA 4y ago
Dark mode too please?
- Tijdreiziger 4y ago
  The “Dark Reader” browser extension works fine for most websites, including HN.
  - NKosmatos 4y ago
    It would be good to have native dark mode without the need for different browser extensions or hacks. This way we would be able to read HN from mobile, tablet, computer no matter what the browser or OS is.
- cantSpellSober 4y ago
  Looks like the colors are SVG fill properties, that could be refactored to be controlled with CSS instead and swap on readers using dark mode
atleastoptimal 4y ago
Good. Now HN just needs to add video embedding, limitless scrolling and social media sharing.
- silisili 4y ago
  Don't forget GIF replies. That's what makes Twitter such a swell place, everyone is just so hilarious.
  - usr1106 4y ago
    But we could have <blink> on some important text to be truely different...
  - Scarblac 4y ago
    We just got rid of a Gif - let's jump straight to SVG replies!
- hollerith 4y ago
  Don't even joke about those things!
- pinewurst 4y ago
  Don't forget the promise of running on Helion(tm) fusion power!
- rizky05 4y ago
  [dead]
- inferiorhuman 4y ago
  Well they did just add some JS scrolling crap. Come on HN I thought you were better than that.
kylec 4y ago
Glad to see it, but it probably could have just been a "Y" and some CSS too
- function_seven 4y ago
  Sounds like a nightmare to check the logo in every combination of OS and rendering engine to make sure the 'Y' is perfectly centered in the box and has the same weight. SVG doesn't change the way positioned text does.
  - wongarsu 4y ago
    It doesn't have the same weight or even shape as the old one, so I'm honestly not sure this was a priority. But in principle you are right, SVG is the correct choice.
    - function_seven 4y ago
      Weird, I didn't notice that at all, but comparing the current look to one from February [0], yeah, it's changed. The raster 'Y' is definitely more acute than the new one. The vertex is lower. But those old voting arrows look terrible now. [0] https://web.archive.org/web/20230201012035/https://news.ycombinator.com/news https://web.archive.org/web/20230201012035/https://news.ycom...
colanderman 4y ago
The proportions have changed. Compare e.g.: https://news.ycombinator.com/favicon.ico https://news.ycombinator.com/favicon.ico EDIT: since we're code golfing/bikeshedding, here's my own attempt, which matches the original proportions [1]. <?xml version="1.0"?> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 192 192"> <rect x="4" y="4" width="188" height="188" fill="#f60" stroke="#fff" stroke-width="8"/> <path d="m 57,47 h 15 l 24,50 24,-50 h 15 L 102,109 v 40 H 90 v -40 z" fill="#fff"/> </svg> [1] Actually, the original is slightly asymmetric -- the right leg is slightly narrower. I've "corrected" this, making the right leg mirror the left.
- skeoh 4y ago
  Golfing SVG happens to be one of my passions. Your path definition can be further reduced to m57 47h15l24 50 24-50h15l-33 62v40h-12v-40z
vrglvrglvrgl 4y ago
[dead]
johnwalkr 4y ago
What framework does this use and how can I turn it into monthly revenue?
callumprentice 4y ago
267 bytes vs 1026 :) <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><path http://www.w3.org/2000/svg"><path fill="#F60" d="M0 0h100v100H0z"/><path d="M50 77V50M73.685 14.377 50 50M26.465 14.449l23.26 35.623" fill="none" stroke="#FFF" stroke-width="8.787"/><path fill="#F60" d="M0 0h100v23.743H0z"/></svg>
- bawolff 4y ago
  I mean really you should measure it after gzip/brotilli since that is the size that matters.
  - callumprentice 4y ago
    You're right - still smaller but now 199 vs 448 bytes. Wonder if it can be made any smaller?
    - quickthrower2 4y ago
      <div style=“background-color:orange;color:white;border:1px solid white”>Y</div> ? Disclaimer: from memory and tongue in cheek. May not work!
  - layer8 4y ago
    It matters client-side in RAM. ;)
maxk42 4y ago
Why on Earth didn't you just inline it?
- TacticalCoder 4y ago
  So that it gets cached by the browser?
  - maxk42 4y ago
    In this case the extra request to the server (and associated response) to check if the file has been modified is several times larger than the minified size of the SVG inline. It's literally faster and fewer requests to inline it.
snihalani 4y ago
why we do like svg?
- bigmattystyles 4y ago
  zoom in without image aliasing?
perihelions 4y ago
For the benefit of people who don't follow such things attentively: /y18.svg has been /y18.gif for — at least 16 years, as a lower bound [0]. Some have filed bug reports [1] about it. The old one was rasterized and slightly fuzzy when zoomed. [0] https://hn.algolia.com/?query=y18.gif&type=all https://hn.algolia.com/?query=y18.gif&type=all [1] https://news.ycombinator.com/item?id=21544141 https://news.ycombinator.com/item?id=21544141 ("Can whoever is in charge of HN's site design convert this to an SVG image?" 'octosphere, 3 years ago)
anigbrowl 4y ago
Launching a pixel-based competitor for people that like HN the way it used to be, like and subscribe for more important announcements
asdfman123 4y ago
Wow, let's not get carried away with crazy new technologies and radical redesigns.
- inferiorhuman 4y ago
  Oh that ship already sailed. Click on the "parent" link. Notice that it breaks your browser history now because instead of being a link to an element in the document it runs some javascript to scroll the page… commence teeth gnashing.
  - loh 4y ago
    This is why, on almost every website I visit where I know I'll be opening multiple links (which would normally require hitting the back button to view them all), I just open every link in a new tab and then close the tab when finished. I suspect many people use HN (and similar) this way. It's always a fun time when I occasionally use the browser/website "as intended" and hit the back button, but the scroll position has been completely lost so it takes a bit to find the exact place I was looking originally.
    - inferiorhuman 4y ago
      Sure, and I do that too. This is for navigating within the page though, and no I'm not going to open a new tab per comment I want to read.
m3kw9 4y ago
Save on that bw cost!
chainwax 4y ago
The day has finally come. Thank you YC.
RivieraKid 4y ago
Wow, amazing. It's a shame I can't downvote this post.
deleted 4y ago
[deleted]
dang 4y ago
Does it look right?
- karlzt 4y ago
  It's a relief, especially the arrows.
- fuzzfactor 4y ago
  Arrows look sharp but the Y is not bold enough to look much different than a plain orange square now. White square border looks good though. 1920 x 1080 on Firefox, plain orange square even more so on the browser tabs.
  - MayeulC 4y ago
    > the Y is not bold enough to look much different than a plain orange square Seconded, it feels like the spacing between the Y and the borders is a bit too large. I would make the Y a bit thicker. Other than that, it looks good. Voting arrows particularly so. I have memories of browsing HN on the TV at >200% zoom, the logo was very blurry in that situation.
kethinov 4y ago
Can we have valid[0] HTML5 with semantic HTML instead of table layouts next? [0] https://validator.w3.org/nu/?doc=https%3A%2F%2Fnews.ycombinator.com%2Fitem%3Fid%3D35894326 https://validator.w3.org/nu/?doc=https%3A%2F%2Fnews.ycombina...
laex 4y ago
For anyone who wants to see the logo in action, I'd like to recommend checking out the SVG Playground link. It's a great tool for exploring and manipulating SVG code, and it makes it easy to see how the logo looks on different backgrounds and at different sizes. https://svgplayground.com/#encodedsvg=PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBjbGFzcz0ibGF5ZXIiPjxwYXRoIGZpbGw9IiNGNjAiIGQ9Ik0wIDBoMTAwdjEwMEgweiIvPjxwYXRoIGQ9Ik01MCA3N1Y1ME03My42OCAxNC4zNyA1MCA1ME0yNi40NyAxNC40NWwyMy4yNiAzNS42MiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjRkZGIiBzdHJva2Utd2lkdGg9IjguNzkiLz48cGF0aCBmaWxsPSIjRjYwIiBkPSJNMCAwaDEwMHYyMy43NEgweiIvPjwvZz48L3N2Zz4= https://svgplayground.com/#encodedsvg=PHN2ZyB3aWR0aD0iMTAwIi...
gregsadetsky 4y ago
Hey all, I wrote to dang a few months ago -- the non sharp upvote button was bothering me on mobile (and desktop when zoomed in), and I felt like the Y could be sharper too. These were the only elements that were fuzzy - everything else is text, and scaled perfectly! We collab'ed on it together (more praise for dang as if he needs it -- he was incredible through and through) and I'm so happy to see it live!! I built two micro tools to help nail it down if anyone is curious (aka make it visually seamless): https://gregsadetsky.github.io/yc-logo-svg-comparison-editor/ https://gregsadetsky.github.io/yc-logo-svg-comparison-editor... https://gregsadetsky.github.io/yc-vote-button-editor/ https://gregsadetsky.github.io/yc-vote-button-editor/ (check the top right of both pages to see the UI controls) Uh... AMA? Suggestions? Thoughts? Thanks for the support -- so far nobody hates it? Does anyone hate it? Cheers!
- behnamoh 4y ago
  Please leave some space between the upvote and downvote buttons. I often hit the wrong button with my big thumbs…
  - nvy 4y ago
    There is an "unvote" clickable link/button available if you tap the timestamp, though I agree HN isn't great UX on mobile.
    - qup 4y ago
      I use it as a personal challenge. Growth mindset!
  - aembleton 4y ago
    I seperated them by adding the following line to my uBO filters: news.ycombinator.com##.votearrow:style(margin-bottom:12px !important;) I've also added the following lines to highlight comments that I've upvoted or downvoted to make it easier to see: news.ycombinator.com##a[id^="un"]:has-text(unvote):upward(4):style(border-left: 1ch solid green !important; padding-left: 1ch !important;) news.ycombinator.com##a[id^="un"]:has-text(undown):upward(4):style(border-left: 1ch dotted red !important; padding-left: 1ch !important;)
OJFord 4y ago
Vote buttons look different too (on mobile at least)? Slightly darker & bigger?
phendrenad2 4y ago
Upvote/downvote buttons were converted to SVG recently too?
capableweb 4y ago
Oh, bravo! Hacker News now has its very own shiny favicon. How avant-garde! Who knew we were so desperate to keep up with the Kardashians of the digital world? But hey, it's just a favicon, right? Nothing to get all hot and bothered about. Except that it's not just about the favicon, it's about the principle of the thing! Remember when Hacker News was the final fortress of the internet where content was king, and design was as minimalistic as the wardrobe of a monastic hermit? A place where intellectuals could congregate without being assaulted by the visual diarrhea that characterizes every other website on the planet. Those were the days when it was the text that mattered, not the tiny, shiny icons. But alas, those days are as dead as dial-up! Once you start prioritizing style over substance, it's a downhill race on a greased slide. Today, it's just an innocuous favicon. But who's to say tomorrow we won't be suffering through animated logos, retina-burning background images, and God knows what other visual atrocities? Before we know it, we'll be swimming in a sea of unnecessary UI elements, auto-playing videos that nobody asked for, and a homepage that's more ad than actual content. And they say progress is a good thing...
- RockRobotRock 4y ago
  [flagged]
  - int_19h 4y ago
    I'm pretty sure this is satirizing similar (but serious) posts that crop up on HN in discussion of just about any modern UI.
    - RockRobotRock 4y ago
      if so they got me good
    - capableweb 4y ago
      Bingo, seems it was too real, not obvious enough or just not funny though, so I kind of failed.
- mertysn 4y ago
kgwxd 4y ago
The site feels way faster now!
LorenDB 4y ago
The Chromium "force dark mode" feature (at least from Opera) turns the Y logo into a darker shade of orange now. Any chance this could be fixed?
- Wowfunhappy 4y ago
  ...I mean, if the browser is purposefully changing the styling of the website to something not provided, that seems like the browser's problem.
crisnoble 4y ago
I always assumed it was created with html/css. After all it is just a capitol Y. ``` <a class="logo" href="https://news.ycombinator.com">Y<span https://news.ycombinator.com">Y<span class="sr">combinator Logo</span></a> ``` ``` .logo { display: block; width: 18px; background: #ff6601; border: 1px solid white; color: white; text-align: center; ```
ddtaylor 4y ago
I have noticed this a little when using the site from across the room while very zoomed in. I like to check HN sometimes while I am on the couch in between episodes of shows. Sometimes I simply read a bit and sometimes I have Speechify read articles to me in the voice of Snoop Dogg.
est31 4y ago
date: Thu, 11 May 2023 01:32:07 GMT last-modified: Wed, 10 May 2023 21:41:52 GMT A day old. You were quick to notice, wow.
- perihelions 4y ago
  I had CSS tweaks that were anchored to the YC logo (to identify the topbar), so they broke when its URL changed!
sylware 4y ago
Anybody knows about a svg renderer written in plain and simple C?
- enriquto 4y ago
  printf(3)
chinaman425 4y ago
[dead]
throwaway2305 4y ago
Off topic for this post. This may sound snarky, but I’m saying in all seriousness. HN needs more people to volunteer their time and effort for free to improve its UX, which has been terrible on mobile/tablets, really bad for accessibility, and so on. All this while retaining the core of HN’s simplicity on any web browser (without extensions or HN specific apps). I’ve been waiting for years to see some change, but now this logo change gives me hope.
- spencerchubb 4y ago
  maybe a bookmarklet that loads some css? I would be interested in collaborating on this or were you thinking about having dang actually implement changes to the site natively
- eviks 4y ago
  That's already happened, the forum UI is atrocious, but the Hack mobile app is one of the best forum reading app out there, so it's not a matter of more people volunteering time, it's about HN not willing to implement any improvements
- matbatt38 4y ago
  Use materialistic
kragen 4y ago
i was surprised to notice a few weeks ago that links2 has svg support now
dack 4y ago
I find it funny that everyone is bikeshedding the symmetry of the "arms" and the length of the "leg" on the logo in an attempt to be pixel-perfect with the original low-res image. While it's fine and funny to be doing so - I can't help but realize how little any of this matters. Imagine an alternate reality where the icon was changed for SVG and not announced. There might be 2 people max that complain about it for a day, and then it would blow over and be the new normal. Also imagine if a whole stylistic remake of the website was done - I doubt anyone would notice if the icon was ever so slightly different. Reminds me of memes about how a 10 line PR gets 10 comments, but a 1,000 line PR gets an "LGTM"
- chinaman425 4y ago
  [dead]
dumpsterdiver 4y ago
The wider angle of the open "arms" of the Y is noticeable to me. The character of the logo is lost in the new design, imo. Also, the top of the border line of the icon is not aligned with the "Hacker News" on mobile. It displays similarly to the desktop page zoomed in at 250%.
dietr1ch 4y ago
Is this really an improvement? The logo is tiny enough that I'm guessing we are better off keeping the old logo as it may use fewer resources (not that this page is slow, unlike most of the web today).
deleted 4y ago
[deleted]
dumpster_fire 4y ago
On the other hand, my friend was showing me his Facebook page, and I noticed the Facebook logo is heavily pixelated on his 4K monitor. How SVG is still not the default for site logos is beyond me.
alexbezhan 4y ago
Move slow and keep things as usual.
DiabloD3 4y ago
Any reason it isn't just a text Y with a CSS border around it? Is this for Y Combinator branding reasons?
k3vinw 4y ago
In Firefox on my iPhone XR, the logo looks too small in portrait mode. It’s being dwarfed by the title and rows of text. Switching to landscape mode looks better because the logo takes up the entire height of the top bar.
zmmmmm 4y ago
I love that this has more upvotes than things like, Google releasing full 3d models of the earth for public access.
ilyt 4y ago
Great. Now fix the light gray on white
cantSpellSober 4y ago
Thank you! I don't care for logos personally, if you'd like to hide it on HN add this to your userstyle: a[href='https://news.ycombinator.com'] img, display: none !important; } These can be managed with a plugin like Stylish.
Karawebnetwork 4y ago
I zoom this site at 200% for my old eyes and the old logo was very blurry. Finally everything is sharp, so I like it.
deleted 4y ago
[deleted]
globular-toast 4y ago
Quite funny to see a major website adopt tech I was playing with almost 20 years ago.
penjelly 4y ago
did anyone else visually notice it? i feel like i could tell something was different recently but couldnt tell for sure

579 points by perihelions 4y ago

Havoc 4y ago

Mostly just amused that this gets 50+ comments

josefx 4y ago
People pushing xml in 2023 is news and highly relevant. Can we get a yaml or json based image format or maybe some rust based web assembly to get on with the times?
- efreak 3y ago
  I prefer using table cells for pixels. I saw a script once that took an image as input and output html code to send those who had pictures blocked...

deleted 4y ago

[deleted]

markdown 4y ago

Nearly 15 years late is better than never. Congrats on the upgrade :)

phoe-krk 4y ago

Here it is, in its full glory! <?xml version="1.0" encoding="utf-8"?> <svg viewBox="0 0 100 100" width="100" height="100" xmlns="http://www.w3.org/2000/svg"> <rect x="0" y="0" width="100" height="100" fill="rgb(255, 102, 0)"></rect> <path d="M 50 77 L 50 50 " fill="none" stroke="rgb(255, 255, 255)" stroke-width="8.78662150719729" stroke-linecap="butt"> </path> <path d="M 94.93056731583404 35.622745513916016 L 71.2454833984375 71.2454833984375 " fill="none" stroke="rgb(255, 255, 255)" stroke-width="8.78662150719729" stroke-linecap="butt" transform="matrix(1 0 0 1 -21.2455 -21.2455)"> </path> <path d="M -78.93056731583404 36.17028045654297 L -55.67118835449219 71.79300689697266 " fill="none" stroke="rgb(255, 255, 255)" stroke-width="8.78662150719729" stroke-linecap="butt" transform="matrix(1 0 0 1 105.396 -21.7213)"> </path> <rect transform="" width="100" height="23.742591024555463" stroke-width="1" stroke="none" fill="#FF6600" stroke-opacity="1" fill-opacity="1" stroke-linecap="butt" stroke-linejoin="miter" > </rect> </svg>

goodrubyist 4y ago
so many butts!
5- 4y ago
that's a lot of svg! svgo suggests the following without any manual tinkering: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path fill="#F60" d="M0 0h100v100H0z"/><path fill="none" stroke="#FFF" stroke-width="8.79" d="M50 77V50m23.69-35.62L50 50M26.47 14.45l23.25 35.62"/><path fill="#F60" d="M0 0h100v23.74H0z"/></svg>
- willis936 4y ago
  Transport compression should get it most of the way there, no? I think having human readable vector graphics is nice.
  - kashnote 4y ago
    This the most HN string of replies I've seen. Cheers haha
  - h0l0cube 4y ago
    Apart from being one-lined, the optimised version is more readable and roughly about as compressible. There’s really no reason to have transformation matrices for 2 squares and a simple polygon
  - tomxor 4y ago
    transport compression isn't going to help with the unnecessary high precision coordinates. There are also a bunch of things that are just the result of it being automatically generated by some vector package, such as the transforms, separate paths, masking of a bunch of strokes rather than just flattening the shape etc.
- tomxor 4y ago
  I see your 258 byte svgo version and raise it my 171 byte hand optimized version: <svg viewBox="-32 -32 64 64" xmlns="http://www.w3.org/2000/svg"><path fill="#f60" d="M-32-32h64v64h-64z"/><path fill="#fff" d="m0-5l-8-12h-7L-3 1v16h6V1l12-18H8z"/></svg>

whalesalad 4y ago

Now we just need the little up and down arrows to go SVG and HN can look crisp at any resolution.

Tronno 4y ago
Well, have I got some news for you! https://news.ycombinator.com/triangle.svg https://news.ycombinator.com/triangle.svg
- crazygringo 4y ago
  ...and it's already implemented! I thought this day would never come.
  - nacs 4y ago
    And the down arrow is using the same SVG with a `transform: rotate(180deg)` too! Truly incredible developments.
    - function_seven 4y ago
      This is some excellent planning. When a future request comes in for east votes and west votes, they can just update the rotate() parameter and push the changes straight to prod.
- cantSpellSober 4y ago
  If it's just a background-image, why not just build the triangle in CSS? Saves a network request (and a whopping 525 bytes)
Glyptodon 4y ago
I just want them bigger on mobile.
kmstout 4y ago
Why work so hard? ▲ U+25B2 BLACK UP-POINTING TRIANGLE ▼ U+25BC BLACK DOWN-POINTING TRIANGLE [0] https://en.wikipedia.org/wiki/Geometric_Shapes_(Unicode_block) https://en.wikipedia.org/wiki/Geometric_Shapes_(Unicode_bloc...

PossiblyKyle 4y ago

Glad to see technology is finally here for it

rendx 4y ago

sweet!

3v1n0 4y ago

The designer who did this had to invest really so much time... :-)

nmstoker 4y ago

Excellent. Now if the mobile view could space items out a touch more so I don't periodically fat thumb the tiny flag/hide article links it would be perfect!

vermilingua 4y ago
I thought I was the only one
cratermoon 4y ago
HN on mobile is a usability nightmare.
- brettermeier 4y ago
  I would make the fold-a-post-button a bit bigger and with more space to the left. The rest seems clickable to me.
  - cratermoon 4y ago
    How's your vision, hand-eye-coordination, and fine motor control?
ericpauley 4y ago
The accidental Hide is the worst because you can’t just undo… it’s gone (unless you go to the Hidden page)!
- ISL 4y ago
  A long-press for flagging/hiding would be great (or even a confirmation-screen).
- Waterluvian 4y ago
  My weekly accidental “flag” scares me the most. What if I don’t notice it?!

SigmundA 4y ago

Dark mode too please?

Tijdreiziger 4y ago
The “Dark Reader” browser extension works fine for most websites, including HN.
- NKosmatos 4y ago
  It would be good to have native dark mode without the need for different browser extensions or hacks. This way we would be able to read HN from mobile, tablet, computer no matter what the browser or OS is.
cantSpellSober 4y ago
Looks like the colors are SVG fill properties, that could be refactored to be controlled with CSS instead and swap on readers using dark mode

atleastoptimal 4y ago

Good. Now HN just needs to add video embedding, limitless scrolling and social media sharing.

silisili 4y ago
Don't forget GIF replies. That's what makes Twitter such a swell place, everyone is just so hilarious.
- usr1106 4y ago
  But we could have <blink> on some important text to be truely different...
- Scarblac 4y ago
  We just got rid of a Gif - let's jump straight to SVG replies!
hollerith 4y ago
Don't even joke about those things!
pinewurst 4y ago
Don't forget the promise of running on Helion(tm) fusion power!
rizky05 4y ago
[dead]
inferiorhuman 4y ago
Well they did just add some JS scrolling crap. Come on HN I thought you were better than that.

kylec 4y ago

Glad to see it, but it probably could have just been a "Y" and some CSS too

function_seven 4y ago
Sounds like a nightmare to check the logo in every combination of OS and rendering engine to make sure the 'Y' is perfectly centered in the box and has the same weight. SVG doesn't change the way positioned text does.
- wongarsu 4y ago
  It doesn't have the same weight or even shape as the old one, so I'm honestly not sure this was a priority. But in principle you are right, SVG is the correct choice.
  - function_seven 4y ago
    Weird, I didn't notice that at all, but comparing the current look to one from February [0], yeah, it's changed. The raster 'Y' is definitely more acute than the new one. The vertex is lower. But those old voting arrows look terrible now. [0] https://web.archive.org/web/20230201012035/https://news.ycombinator.com/news https://web.archive.org/web/20230201012035/https://news.ycom...

colanderman 4y ago

The proportions have changed. Compare e.g.: https://news.ycombinator.com/favicon.ico https://news.ycombinator.com/favicon.ico EDIT: since we're code golfing/bikeshedding, here's my own attempt, which matches the original proportions [1]. <?xml version="1.0"?> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 192 192"> <rect x="4" y="4" width="188" height="188" fill="#f60" stroke="#fff" stroke-width="8"/> <path d="m 57,47 h 15 l 24,50 24,-50 h 15 L 102,109 v 40 H 90 v -40 z" fill="#fff"/> </svg> [1] Actually, the original is slightly asymmetric -- the right leg is slightly narrower. I've "corrected" this, making the right leg mirror the left.

skeoh 4y ago
Golfing SVG happens to be one of my passions. Your path definition can be further reduced to m57 47h15l24 50 24-50h15l-33 62v40h-12v-40z

vrglvrglvrgl 4y ago

[dead]

johnwalkr 4y ago

What framework does this use and how can I turn it into monthly revenue?

callumprentice 4y ago

267 bytes vs 1026 :) <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><path http://www.w3.org/2000/svg"><path fill="#F60" d="M0 0h100v100H0z"/><path d="M50 77V50M73.685 14.377 50 50M26.465 14.449l23.26 35.623" fill="none" stroke="#FFF" stroke-width="8.787"/><path fill="#F60" d="M0 0h100v23.743H0z"/></svg>

bawolff 4y ago
I mean really you should measure it after gzip/brotilli since that is the size that matters.
- callumprentice 4y ago
  You're right - still smaller but now 199 vs 448 bytes. Wonder if it can be made any smaller?
  - quickthrower2 4y ago
    <div style=“background-color:orange;color:white;border:1px solid white”>Y</div> ? Disclaimer: from memory and tongue in cheek. May not work!
- layer8 4y ago
  It matters client-side in RAM. ;)

maxk42 4y ago

Why on Earth didn't you just inline it?

TacticalCoder 4y ago
So that it gets cached by the browser?
- maxk42 4y ago
  In this case the extra request to the server (and associated response) to check if the file has been modified is several times larger than the minified size of the SVG inline. It's literally faster and fewer requests to inline it.

snihalani 4y ago

why we do like svg?

bigmattystyles 4y ago
zoom in without image aliasing?

perihelions 4y ago

For the benefit of people who don't follow such things attentively: /y18.svg has been /y18.gif for — at least 16 years, as a lower bound [0]. Some have filed bug reports [1] about it. The old one was rasterized and slightly fuzzy when zoomed. [0] https://hn.algolia.com/?query=y18.gif&type=all https://hn.algolia.com/?query=y18.gif&type=all [1] https://news.ycombinator.com/item?id=21544141 https://news.ycombinator.com/item?id=21544141 ("Can whoever is in charge of HN's site design convert this to an SVG image?" 'octosphere, 3 years ago)

anigbrowl 4y ago

Launching a pixel-based competitor for people that like HN the way it used to be, like and subscribe for more important announcements

asdfman123 4y ago

Wow, let's not get carried away with crazy new technologies and radical redesigns.

inferiorhuman 4y ago
Oh that ship already sailed. Click on the "parent" link. Notice that it breaks your browser history now because instead of being a link to an element in the document it runs some javascript to scroll the page… commence teeth gnashing.
- loh 4y ago
  This is why, on almost every website I visit where I know I'll be opening multiple links (which would normally require hitting the back button to view them all), I just open every link in a new tab and then close the tab when finished. I suspect many people use HN (and similar) this way. It's always a fun time when I occasionally use the browser/website "as intended" and hit the back button, but the scroll position has been completely lost so it takes a bit to find the exact place I was looking originally.
  - inferiorhuman 4y ago
    Sure, and I do that too. This is for navigating within the page though, and no I'm not going to open a new tab per comment I want to read.

m3kw9 4y ago

Save on that bw cost!

chainwax 4y ago

The day has finally come. Thank you YC.

RivieraKid 4y ago

Wow, amazing. It's a shame I can't downvote this post.

deleted 4y ago

[deleted]

dang 4y ago

Does it look right?

karlzt 4y ago
It's a relief, especially the arrows.
fuzzfactor 4y ago
Arrows look sharp but the Y is not bold enough to look much different than a plain orange square now. White square border looks good though. 1920 x 1080 on Firefox, plain orange square even more so on the browser tabs.
- MayeulC 4y ago
  > the Y is not bold enough to look much different than a plain orange square Seconded, it feels like the spacing between the Y and the borders is a bit too large. I would make the Y a bit thicker. Other than that, it looks good. Voting arrows particularly so. I have memories of browsing HN on the TV at >200% zoom, the logo was very blurry in that situation.

kethinov 4y ago

Can we have valid[0] HTML5 with semantic HTML instead of table layouts next? [0] https://validator.w3.org/nu/?doc=https%3A%2F%2Fnews.ycombinator.com%2Fitem%3Fid%3D35894326 https://validator.w3.org/nu/?doc=https%3A%2F%2Fnews.ycombina...

laex 4y ago

For anyone who wants to see the logo in action, I'd like to recommend checking out the SVG Playground link. It's a great tool for exploring and manipulating SVG code, and it makes it easy to see how the logo looks on different backgrounds and at different sizes. https://svgplayground.com/#encodedsvg=PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBjbGFzcz0ibGF5ZXIiPjxwYXRoIGZpbGw9IiNGNjAiIGQ9Ik0wIDBoMTAwdjEwMEgweiIvPjxwYXRoIGQ9Ik01MCA3N1Y1ME03My42OCAxNC4zNyA1MCA1ME0yNi40NyAxNC40NWwyMy4yNiAzNS42MiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjRkZGIiBzdHJva2Utd2lkdGg9IjguNzkiLz48cGF0aCBmaWxsPSIjRjYwIiBkPSJNMCAwaDEwMHYyMy43NEgweiIvPjwvZz48L3N2Zz4= https://svgplayground.com/#encodedsvg=PHN2ZyB3aWR0aD0iMTAwIi...

gregsadetsky 4y ago

Hey all, I wrote to dang a few months ago -- the non sharp upvote button was bothering me on mobile (and desktop when zoomed in), and I felt like the Y could be sharper too. These were the only elements that were fuzzy - everything else is text, and scaled perfectly! We collab'ed on it together (more praise for dang as if he needs it -- he was incredible through and through) and I'm so happy to see it live!! I built two micro tools to help nail it down if anyone is curious (aka make it visually seamless): https://gregsadetsky.github.io/yc-logo-svg-comparison-editor/ https://gregsadetsky.github.io/yc-logo-svg-comparison-editor... https://gregsadetsky.github.io/yc-vote-button-editor/ https://gregsadetsky.github.io/yc-vote-button-editor/ (check the top right of both pages to see the UI controls) Uh... AMA? Suggestions? Thoughts? Thanks for the support -- so far nobody hates it? Does anyone hate it? Cheers!

behnamoh 4y ago
Please leave some space between the upvote and downvote buttons. I often hit the wrong button with my big thumbs…
- nvy 4y ago
  There is an "unvote" clickable link/button available if you tap the timestamp, though I agree HN isn't great UX on mobile.
  - qup 4y ago
    I use it as a personal challenge. Growth mindset!
- aembleton 4y ago
  I seperated them by adding the following line to my uBO filters: news.ycombinator.com##.votearrow:style(margin-bottom:12px !important;) I've also added the following lines to highlight comments that I've upvoted or downvoted to make it easier to see: news.ycombinator.com##a[id^="un"]:has-text(unvote):upward(4):style(border-left: 1ch solid green !important; padding-left: 1ch !important;) news.ycombinator.com##a[id^="un"]:has-text(undown):upward(4):style(border-left: 1ch dotted red !important; padding-left: 1ch !important;)

OJFord 4y ago

Vote buttons look different too (on mobile at least)? Slightly darker & bigger?

phendrenad2 4y ago

Upvote/downvote buttons were converted to SVG recently too?

capableweb 4y ago

Oh, bravo! Hacker News now has its very own shiny favicon. How avant-garde! Who knew we were so desperate to keep up with the Kardashians of the digital world? But hey, it's just a favicon, right? Nothing to get all hot and bothered about. Except that it's not just about the favicon, it's about the principle of the thing! Remember when Hacker News was the final fortress of the internet where content was king, and design was as minimalistic as the wardrobe of a monastic hermit? A place where intellectuals could congregate without being assaulted by the visual diarrhea that characterizes every other website on the planet. Those were the days when it was the text that mattered, not the tiny, shiny icons. But alas, those days are as dead as dial-up! Once you start prioritizing style over substance, it's a downhill race on a greased slide. Today, it's just an innocuous favicon. But who's to say tomorrow we won't be suffering through animated logos, retina-burning background images, and God knows what other visual atrocities? Before we know it, we'll be swimming in a sea of unnecessary UI elements, auto-playing videos that nobody asked for, and a homepage that's more ad than actual content. And they say progress is a good thing...

RockRobotRock 4y ago
[flagged]
- int_19h 4y ago
  I'm pretty sure this is satirizing similar (but serious) posts that crop up on HN in discussion of just about any modern UI.
  - RockRobotRock 4y ago
    if so they got me good
  - capableweb 4y ago
    Bingo, seems it was too real, not obvious enough or just not funny though, so I kind of failed.
mertysn 4y ago

kgwxd 4y ago

The site feels way faster now!

LorenDB 4y ago

The Chromium "force dark mode" feature (at least from Opera) turns the Y logo into a darker shade of orange now. Any chance this could be fixed?

Wowfunhappy 4y ago
...I mean, if the browser is purposefully changing the styling of the website to something not provided, that seems like the browser's problem.

crisnoble 4y ago

I always assumed it was created with html/css. After all it is just a capitol Y. ``` <a class="logo" href="https://news.ycombinator.com">Y<span https://news.ycombinator.com">Y<span class="sr">combinator Logo</span></a> ``` ``` .logo { display: block; width: 18px; background: #ff6601; border: 1px solid white; color: white; text-align: center; ```

ddtaylor 4y ago

I have noticed this a little when using the site from across the room while very zoomed in. I like to check HN sometimes while I am on the couch in between episodes of shows. Sometimes I simply read a bit and sometimes I have Speechify read articles to me in the voice of Snoop Dogg.

est31 4y ago

date: Thu, 11 May 2023 01:32:07 GMT last-modified: Wed, 10 May 2023 21:41:52 GMT A day old. You were quick to notice, wow.

perihelions 4y ago
I had CSS tweaks that were anchored to the YC logo (to identify the topbar), so they broke when its URL changed!

sylware 4y ago

Anybody knows about a svg renderer written in plain and simple C?

enriquto 4y ago
printf(3)

chinaman425 4y ago

[dead]

throwaway2305 4y ago

Off topic for this post. This may sound snarky, but I’m saying in all seriousness. HN needs more people to volunteer their time and effort for free to improve its UX, which has been terrible on mobile/tablets, really bad for accessibility, and so on. All this while retaining the core of HN’s simplicity on any web browser (without extensions or HN specific apps). I’ve been waiting for years to see some change, but now this logo change gives me hope.

spencerchubb 4y ago
maybe a bookmarklet that loads some css? I would be interested in collaborating on this or were you thinking about having dang actually implement changes to the site natively
eviks 4y ago
That's already happened, the forum UI is atrocious, but the Hack mobile app is one of the best forum reading app out there, so it's not a matter of more people volunteering time, it's about HN not willing to implement any improvements
matbatt38 4y ago
Use materialistic

kragen 4y ago

i was surprised to notice a few weeks ago that links2 has svg support now

dack 4y ago

I find it funny that everyone is bikeshedding the symmetry of the "arms" and the length of the "leg" on the logo in an attempt to be pixel-perfect with the original low-res image. While it's fine and funny to be doing so - I can't help but realize how little any of this matters. Imagine an alternate reality where the icon was changed for SVG and not announced. There might be 2 people max that complain about it for a day, and then it would blow over and be the new normal. Also imagine if a whole stylistic remake of the website was done - I doubt anyone would notice if the icon was ever so slightly different. Reminds me of memes about how a 10 line PR gets 10 comments, but a 1,000 line PR gets an "LGTM"

chinaman425 4y ago
[dead]

dumpsterdiver 4y ago

The wider angle of the open "arms" of the Y is noticeable to me. The character of the logo is lost in the new design, imo. Also, the top of the border line of the icon is not aligned with the "Hacker News" on mobile. It displays similarly to the desktop page zoomed in at 250%.

dietr1ch 4y ago

Is this really an improvement? The logo is tiny enough that I'm guessing we are better off keeping the old logo as it may use fewer resources (not that this page is slow, unlike most of the web today).

deleted 4y ago

[deleted]

dumpster_fire 4y ago

On the other hand, my friend was showing me his Facebook page, and I noticed the Facebook logo is heavily pixelated on his 4K monitor. How SVG is still not the default for site logos is beyond me.

alexbezhan 4y ago

Move slow and keep things as usual.

DiabloD3 4y ago

Any reason it isn't just a text Y with a CSS border around it? Is this for Y Combinator branding reasons?

k3vinw 4y ago

In Firefox on my iPhone XR, the logo looks too small in portrait mode. It’s being dwarfed by the title and rows of text. Switching to landscape mode looks better because the logo takes up the entire height of the top bar.

zmmmmm 4y ago

I love that this has more upvotes than things like, Google releasing full 3d models of the earth for public access.

ilyt 4y ago

Great. Now fix the light gray on white

cantSpellSober 4y ago

Thank you! I don't care for logos personally, if you'd like to hide it on HN add this to your userstyle: a[href='https://news.ycombinator.com'] img, display: none !important; } These can be managed with a plugin like Stylish.

Karawebnetwork 4y ago

I zoom this site at 200% for my old eyes and the old logo was very blurry. Finally everything is sharp, so I like it.

deleted 4y ago

[deleted]

globular-toast 4y ago

Quite funny to see a major website adopt tech I was playing with almost 20 years ago.

penjelly 4y ago

did anyone else visually notice it? i feel like i could tell something was different recently but couldnt tell for sure