

Vector-based graphics in HTML and CSS - callum_hart
http://www.callumhart.com/blog/vector-based-graphics-in-html-and-css

======
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.

------
michaelbuddy
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
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
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...

------
MatekCopatek
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.

~~~
amon41amarth
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
[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 ;).

~~~
amon41amarth
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.

------
replete
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.

------
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.

------
callum_hart
Should have linked to the logo earlier in the post. It can be found here
[http://www.itseffortless.com/](http://www.itseffortless.com/)

~~~
teddyh
Blank page. Works only if I allow cookies.

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

------
pluma
> Scalable Vector CSS Graphics

In case anyone was wondering.

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

~~~
ygra
[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
Ah thanks @ygra!

------
merry9715
Good post. Easy to read.

~~~
callum_hart
Thanks @merry9715, glad you liked it!

