4 ms·

Vector-based graphics in HTML and CSS

48 points by callum_hart 11y ago

merry9715 11y ago
Good post. Easy to read.
- callum_hart 11y ago
  Thanks @merry9715, glad you liked it!
- deleted 11y ago
  [deleted]
pluma 11y ago
> Scalable Vector CSS Graphics In case anyone was wondering.
callum_hart 11y ago
Should have linked to the logo earlier in the post. It can be found here http://www.itseffortless.com/ http://www.itseffortless.com/
- teddyh 11y ago
  Blank page. Works only if I allow cookies.
  - callum_hart 11y ago
    Ah its because effortless uses localStorage to persist its LESS variables. Thanks for the spot I'll raise an issue on git!
- jmisavage 11y ago
  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.
MatekCopatek 11y ago
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.
- callum_hart 11y ago
  Hey @MatekCopatek, it's not any better it's just a different way to make them.
  - MatekCopatek 11y ago
    Aight, cool then, I probably read into the post title too much and thought I need to go replace my SVGs ;)
    - callum_hart 11y ago
      haha :)
- amon41amarth 11y ago
  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 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.
  - MatekCopatek 11y ago
    [SVG supports animations](https://css-tricks.com/guide-svg-animations-smil/ 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 ;).
michaelbuddy 11y ago
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
- ygra 11y ago
  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.
  - bitL 11y ago
    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...
- notNow 11y ago
  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.
  - josephluck 11y ago
callum_hart 11y ago
Hey hacker news, (I'm pretty new to this) how comes the title of my submission has been changed?
- ygra 11y ago
  https://news.ycombinator.com/newsguidelines.html https://news.ycombinator.com/newsguidelines.html seems to suggest that the title of a submission should always match the title of the linked page.
  - callum_hart 11y ago
    Ah thanks @ygra!
sago 11y ago
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.
kraig911 11y ago
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.
replete 11y ago
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.
adamzubi 11y ago
http://googler700.blogspot.com/ http://googler700.blogspot.com/

48 points by callum_hart 11y ago

merry9715 11y ago

Good post. Easy to read.

callum_hart 11y ago
Thanks @merry9715, glad you liked it!
deleted 11y ago
[deleted]

pluma 11y ago

> Scalable Vector CSS Graphics In case anyone was wondering.

callum_hart 11y ago

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

teddyh 11y ago
Blank page. Works only if I allow cookies.
- callum_hart 11y ago
  Ah its because effortless uses localStorage to persist its LESS variables. Thanks for the spot I'll raise an issue on git!
jmisavage 11y ago
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.

MatekCopatek 11y ago

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.

callum_hart 11y ago
Hey @MatekCopatek, it's not any better it's just a different way to make them.
- MatekCopatek 11y ago
  Aight, cool then, I probably read into the post title too much and thought I need to go replace my SVGs ;)
  - callum_hart 11y ago
    haha :)
amon41amarth 11y ago
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 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.
- MatekCopatek 11y ago
  [SVG supports animations](https://css-tricks.com/guide-svg-animations-smil/ 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 ;).

michaelbuddy 11y ago

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

ygra 11y ago
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.
- bitL 11y ago
  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...
notNow 11y ago
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.
- josephluck 11y ago

callum_hart 11y ago

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

ygra 11y ago
https://news.ycombinator.com/newsguidelines.html https://news.ycombinator.com/newsguidelines.html seems to suggest that the title of a submission should always match the title of the linked page.
- callum_hart 11y ago
  Ah thanks @ygra!

sago 11y ago

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.

kraig911 11y ago

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.

replete 11y ago

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.

adamzubi 11y ago

http://googler700.blogspot.com/ http://googler700.blogspot.com/