Vector-based graphics in HTML and CSS | Hacker News Reader

Vector-based graphics in HTML and CSS

callumhart.com

48 pointscallum_hart28 comments

Wow. I get the 'I want to climb Everest' idea of seeing if something can be done, and all props to mountaineers who make it, but this article reads as if the author is advocating this approach. Which would be a staggering waste of time and effort.

SVG works in all browsers where this would work (modulo some incompatibilities with advanced effects like filters), is easy to create in a graphics application, is animatable (with a few more caveats, but fewer than trying to animate his version), is resolution independent, adds almost nothing to the file-size (as long as your image is 'vector'ish), and is less likely to partially degrade in embarrassing ways (important to most brands, who'd rather not show the logo than have it massacred).

I'm trying not to sound know-it-all and dismissive, but I can't help but feel a 'front-end fanatic' should use the right tool for the job. Or at least be clear that this is a deliberate 'Everest' project, not something with 'pros' that suggest a recommendation.

Is svg considered black magic, or old tech, or something? Why does it so regularly seem to be ignored in favour of reinventing the wheel? There was a whole icon-font made with CSS+HTML on HN a few months ago that seemed to be a similar exercise in willful self-torture.

Funny how svgs are last year when they havent nearly been tapped for their potential across the web yet. I have no desire to draw graphics with code. I appreciate innovation and experiments but I don't know it just looks like trying to make a tool work because you were too stubborn or didn't want to buy the right one

I have lots of desire to draw graphics with code, but SVG still fits that quite well.

As for the author's point that he needed to animate the logo ... SVG2 works on unifying CSS and SVG animation. Currently the options are either SMIL (which won't work in IE) or JS (which may have other unpleasant properties).

Interestingly, most things coming from CSS (not just animation) are quite inferior to what SVG already provided. That's there will be unification is mostly a concession to the fact that things haven't been implemented by browser vendors historically and users seem to like CSS solutions better than SVG these days.

In addition, Web Animations that are supposed to replace SVG SMIL can't even animate basic transforms (rotate, scale, translate, skew) independently as they are based on CSS and inherited all its limitations. Imagine you need to set a different easing to rotation than to rescaling (which is a totally basic thing in animation). Good luck with that in CSS and upcoming Web Animations...

Not to pick on the author of this mini-tutorial but this is a completely futile exercise as can be seen by the accompanying diagram outlining the building blocks of his endeavor which was a raster graphics not HTML/CSS as he preached.

You would think he would put his money where his mouth is and convert all the diagrams and vector graphics into HTML/CSS but deep down he knows it's just ridiculous and excruciatingly impractical.

He did, it's here: www.itseffortless.com

I won't say this isn't very clever, but how is it different (or dare I say better) then creating the entire logo with a random vector tool and then using it as a SVG? You can easily scale SVGs, they look great on HiDPI screens (what Apple calls Retina) and you don't need a bunch of random CSS (that probably won't ever change) cluttering your styling.

Hey @MatekCopatek, it's not any better it's just a different way to make them.

Aight, cool then, I probably read into the post title too much and thought I need to go replace my SVGs ;)

haha :)

He didn't discuss it in the post, but it's also being animated (the braces snap in around the filler, as seen when you load the page http://www.itseffortless.com). In this particular case, wouldn't it make sense to have everything in one place, rather than two SVGs and some CSS for animation? I guess it would be less CSS clutter, regardless. I'm not much of a front-end dev, who has to do some front-end work, so I like seeing counter-arguments to the cool, flashy stuff that I'll never be able to do.

[SVG supports animations](https://css-tricks.com/guide-svg-animations-smil/) as well, so that's not much of a point. But yeah, I guess it's a matter of what you prefer. For "finished" assets such as logos, I prefer to have things as separated as possible, since they are usually final and just need to be included in the page, so I don't see any point in defining them in my CSS.

Especially because a designer might tell me to replace the logo in a year and I don't want to rewrite all the CSS for it if I can just replace it with a new SVG he will provide ;).

TIL. That may go in my rather large to-learn list. And in line with the designer giving you a new logo, what about taking the SVCSSG logo and trying to put it in other places? I'm sure the marketing department would love to deal with that.

In a project I worked on I used SVGs from the designer and animated them with Javascript (Velocity.js in this case). The trick here is to inline the SVG into the HTML page (can be done with a preprocessor). Then the SVG DOM nodes can be animated as you like.

Actually it is not very clever, pretty inflexible.

Had he used values in EMs instead of pixels, he could just set different font-sizes to different instances of the logo.

The way is done, you get the logo in only one size. If you want to use several sizes, you need to create some mixin, creating CSS duplicity, etc.

So, even if we all agreed that CSS-based vector graphics are cool (which we don't), this should have been done with relative measures, not absolute. This way this is not very practical.

Not sure I agree with you.

From looking at the logo the elements #filler and ::after wouldn't change size with just the font-size property alone.

Also the author doesn't say he wanted several sizes of the logo - he just wasn't sure which size he wanted.

What is the bloody point when we have SVG?

I really do not understand why these posts get so much attention.

It's an inappropriate use of the technology.

To me this is impressive. I've used a ton of SVG's in the past and I'm always left at 90% of what I'd ideally want to accomplish. (I'm looking at you Android 4 and below...)

I think it's funny people bashing this preaching SVG etc. From a SASS or Single page website I think this approach would be fairly nominal. Just as an experiment use an SVG vs CSS on iOS emulator and watch the memory usage - you'll see what I mean.

Should have linked to the logo earlier in the post. It can be found here http://www.itseffortless.com/

Blank page. Works only if I allow cookies.

Ah its because effortless uses localStorage to persist its LESS variables. Thanks for the spot I'll raise an issue on git!

You got some rendering issues in Firefox and I'm going to assume non-webkit based browsers. The Linear gradient in the text doesn't show. And the animation has a glitch when its done.

> Scalable Vector CSS Graphics

In case anyone was wondering.

Hey hacker news, (I'm pretty new to this) how comes the title of my submission has been changed?

https://news.ycombinator.com/newsguidelines.html seems to suggest that the title of a submission should always match the title of the linked page.

Ah thanks @ygra!

Good post. Easy to read.

Thanks @merry9715, glad you liked it!

Reply on news.ycombinator.com