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
Vector-based graphics in HTML and CSS
11–20 of 31 posts
Re: Vector-based graphics in HTML and CSS
#12I 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.
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.
Re: Vector-based graphics in HTML and CSS
#13I 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.
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 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 ;).
Re: Vector-based graphics in HTML and CSS
#14I 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 ;)
Re: Vector-based graphics in HTML and CSS
#15Funny 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.
Re: Vector-based graphics in HTML and CSS
#16Should have linked to the logo earlier in the post. It can be found here http://www.itseffortless.com/
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.
Re: Vector-based graphics in HTML and CSS
#17Re: Vector-based graphics in HTML and CSS
#18Funny 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 provi…
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...
Re: Vector-based graphics in HTML and CSS
#19I 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.
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…
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.
Re: Vector-based graphics in HTML and CSS
#20Hey hacker news, (I'm pretty new to this) how comes the title of my submission has been changed?