Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Vector-based graphics in HTML and CSS

callumhart.com

Post reply on HN
Print view View original

21–30 of 31 posts

Re: Vector-based graphics in HTML and CSS

#21

Post by amon41amarth »

MatekCopatek wrote: post #13
amon41amarth wrote: post #12

Earlier quoted context omitted.

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 li…

[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 te…

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.

Re: Vector-based graphics in HTML and CSS

#23

Post by notNow »

michaelbuddy wrote: post #11

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

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.

Re: Vector-based graphics in HTML and CSS

#24

Post by josephluck »

notNow wrote: post #23
michaelbuddy wrote: post #11

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

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 i…

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

Re: Vector-based graphics in HTML and CSS

#25

Post by callum_hart »

ygra wrote: post #22
callum_hart wrote: post #20

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!

Re: Vector-based graphics in HTML and CSS

#26

Post by kolme »

MatekCopatek wrote: post #8

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.

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.

Re: Vector-based graphics in HTML and CSS

#27

Post by sago »

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.

Re: Vector-based graphics in HTML and CSS

#28

Post by kraig911 »

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.

Re: Vector-based graphics in HTML and CSS

#30

Post by denzelwigwig »

kolme wrote: post #26
MatekCopatek wrote: post #8

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.

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 be…

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.

Post reply on HN