Hacker News Reader

Comment by TazeTSchnitzel | Hacker News Reader

What's wrong with SVG? Use the right tool for the job.

Comments like yours are exactly what is wrong this place as of late. Instead of being supportive, you chastise the OP for thinking outside of the box. Take your negativity somewhere else if you're not going to give credit where credit is due.

Why see it as negativity?

SVG is a core web standard that is woefully underused considering how well it is supported. These complex 'you can do this with CSS' demos are always impressive, but they have little practical use; considering the underuse and lack of knowledge about SVG right now, it seems a little perverse to me that people keep making them.

Using SVG would be the easy way (open up Illustrator, draw some circles and export). As developers we should be pushing ourselves, trying the seemingly impossible and keeping our brains sharp. If developers all used pre-existing and practical solutions as I pointed out earlier, we would all still be making websites that used tables for mark-up.

This isn't a client project, it's an experiment. Brian has merely exhibited something using some DIV's and clever CSS that most developers would never even try to attempt let alone even be able to pull off. An experiment doesn't need to be cross-browser compliant or practical, it just needs to prove something can work.

I've used SVG in production before and while it's generally well supported if you don't care about IE8 support, when it comes to hyperlinking and hover states an SVG can be your worse nightmare. Tonnes of people know about SVG, anyone with a copy of Adobe Illustrator can make an SVG image for web and embed it into a page.

You can do it manually. SVG is a XML file, just that. You can hand code all logos, wich it gonna be a waste of time in most cases.

As others have pointed out, well crafted or not, it doesn't add anything new to what people know can be done with CSS if you hack it hard enough; 5 years ago someone made a Homer Simpson in pure CSS (before border-radius) and it worked in IE 5.5: http://www.romancortes.com/blog/homer-css/

If you think SVG is a craftless 'just export it' type of technology then you're not really getting it - it's xml - human readable and editable.

You get a lot more out of it if you know how to read the source, add/remove/alter the elements by hand if needs be. So plenty of valuable skills to develop, things to learn and opportuties for push yourself without resorting to yet another demonstration of how it's possible to simulate vector illustration if you apply copious amounts of divs and CSS.

I'm not being negative. It's a cool hack, I'll give them that, but don't use it in production for god's sake.

It takes a highly capable mind to do what Brian has done. Recreating even the simplest of logos isn't an easy task when you're talking about positioned DIV's, clipping masks, border colours and radius's all intricately stacked to recreate something that was designed in an image manipulation program.

Yes, you would never use a CSS recreation in production and Brian isn't. What we have here is a smart developer experimenting, thinking outside-of-the-box and pushing the boundaries beyond changing colours and font sizes using CSS. We need developers like Brian trying things like this, if we didn't, we would all still be using tables to create websites...

The reason I called your comment out as negative is because you never said anything positive. Mostly everyone else (including myself) praised Brian for his clever experimentation and there was no praise or respect in your comment whatsoever. I'm not meaning to sound aggressive, I've just seen too many put-downs on neutral and positive submissions lately to not want to say something.

I don't think the OP is negative. And I also think waste time doing this when you can, ofc, do one image with a table and zillions of colored cells. To me, the time and pain isn't worth the application.

OP is right: you can do this effortlessly with SVG, and it will probably be more semantic than this, wich, ofc has glitches between devices and isn't fully supported on all cases. SVG has more support than CSS3 and this only shows a bored developer using CSS.

I opined the same days ago with a MB Pro made entirely in CSS. It's quite ok but I think we can put effort on SVG instead of CSS to do the right things.

Don't take this as an offense.

<title>Hacker News</title>

It's a problem when I lack the proficiency to even create gradients in photoshop! However, I can create gradients all day with CSS.

Don't read too far into this comment though, this was purely something fun I wanted to attempt.

If you're finding Photoshop difficult try Fireworks. It's easier for basic web stuff like gradients and simple shapes.

He probably does use the right tools for his day job. This looks like play time. We're developers all day, can we not be scientists at night?

If you're familiar with SVG, why not contrast the differences/merits of it instead?

IE <= 8 and Android <= 2.3 don't support SVG without a polyfill[1]. For much of the web, IE8 is still the lowest acceptable version of IE and Android <= 2.3 is still about 40% of that market. You may be able to use it in your projects, but there are still many people who cannot yet.

[1] https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Brow...

Honestly lots of people could care less about IE8 nowadays.

Another problem is this really annoying bug in Firefox [1] that makes SVG blurry when they are scaled, defeating the entire purpose of using SVG. Hopefully people reply on that thread and it gets fixed soon.

[1]: https://bugzilla.mozilla.org/show_bug.cgi?id=600207

IE8 doesn't support these CSS logos...

They look fairly useless in IE8 — http://i.imgur.com/IjWkRvp.png

Pretty neat that it's still identifiable as a bird, though. Like an 8-bit version of the Twitter icon.

Hah, that looks incredibly sad. They look a lot better on IE9 though! (besides IE9 not having radial gradients for the Apple logo)

Here's Evernote - http://i.imgur.com/EeXRsNA.png and Apple - http://i.imgur.com/ufutrhZ.png

I think they actually look pretty cool, almost like pieces of modern art.

Why paint a picture when cameras exist ?

While i don't agree with the OP, you can't photograph a pegasus flying though the rings of Saturn ;-)

Because you can paint pictures of things that you cannot take photos of (things that don't exist for one). Likewise, I imagine with this you could make the twitter bird morph into a textarea when you click it, or other such shenannigans.

I was under the impression that SVGs could contain javascript and pose possible XSS or code execution risks.

Granted, probably not a very high risk if you're using files you, yourself, trust.

Great point - Id really like a way to flag 'svg only, no scripts' say in the img tag.

I use both heavy SVG apps with a lot of javascript, and also small svgs for icons etc.

Embedded with an img tag, scripts are disabled.

Which job?

Reply on news.ycombinator.com