DEV Community

Discussion on: Rate my SVG art! [Compared to CSS art]

Collapse
 
alvaromontoro profile image
Alvaro Montoro • Edited

Also, you are misinterpreting why people use CSS images or how complicated they are (the SVG on this post is a great example of how SVG can be overcomplicated too!) CSS images could be a valid alternative for small things and icons, not that great for realistic things (SVG isn't either) or larger images or large animations (SVG is better because they treat animations differently within SVG and CSS, even the same animations). Also, while coding a CSS image, you can learn and practice CSS, but SVG, in general you are going to use an app and done, not learning really about the technology.

Thread Thread
 
grahamthedev profile image
GrahamTheDev

Neither would you want to learn SVG generally (drawing with raw paths I mean), unless you like pain! 🤣

I would still go SVG for icons as it is much easier to draw them rather than work out all of the different parts with CSS, but I can concede it is a valid use case and I will even admit is has some benefits!

But I would argue that a lot of the skills you learn doing CSS art are not transferable to anything other than more CSS art or icon creation anyway.

When was the last time you spent hours hand crafting intersecting circles to draw outlines or spent the time working out polygon paths etc in a live project?

Also nearly all CSS art uses position: absolute extensively so it isn't teaching any good practices for positioning really (and that is the bit people still don't seem to get right!).

I am not trying to take anything away from CSS art, it is amazing and great fun and I always find it truly impressive as it takes such a great amount of skill.

But if you are going to invest 50 hours into learning how to use GIMP or Illustrator or 50 hours into learning CSS art there is no comparison on which skill is more transferable into the real world to get stuff done.

I think the answer to all of the points you raised (IMO) is, CSS art is good fun and you get to learn loads of interesting stuff about CSS, but for productivity I would say SVG and a drawing package is going to win in 99% of cases.

However I am really enjoying all of the points you are making about CSS, perhaps my article came across as heavy-handed on CSS, it was not the intention at all!

Thread Thread
 
alvaromontoro profile image
Alvaro Montoro

Again, it's a matter of priorities, positions, etc. GIMP/Illustrator is a must have skill for a Designer, but for a Developer? Not so much. On the other hand, CSS is a great skill for a Developer but it may not be so interesting for a Designer. It's important to differentiate tools and needs for each role. A Web Developer is better off knowing CSS than Illustrator. But that's my two cents.

Thread Thread
 
alvaromontoro profile image
Alvaro Montoro

And there's more to CSS art than positioning:

  • Selectors and combinators
  • Transforms
  • Filters and masks
  • Transitions and animations
  • Shadows, box model, borders, units, sizing......

Also, position: absolute is not inherently wrong. It highly depends how you use it and for what: for positioning in a web app, Ok; For laying out elements in a website, bad.

If developers knew how to use CSS properly, the complexity of the web would be reduced considerably. But people prefer to spend 50 hours with GIMP/Illustrator than 50 hours with CSS. But once more, that's my perspective. Not criticizing you or your view. It's just my weird way of seeing things :)

Thread Thread
 
grahamthedev profile image
GrahamTheDev • Edited

I would agree if it was learn CSS or learn illustrator, learn CSS.

But by the time you are at the level of creating icons and art with CSS you have almost certainly mastered the bits you need to build a site.

Much better for a developer to learn a graphics package once they know how to do layout, positioning and general styling, as most work will be received as an image file from a designer.

Being able to grab the icons that are already designed is far more useful and productive than trying to recreate them in CSS as the designer has already done the work? And if you work solo it is far more productive to recreate client logos etc. using a graphics package than CSS.

Plus nowadays we have (urgh) TailWind etc. so learning CSS is less important (and it hurts me saying that as a CSS purist).

I mean, you already know this as your awesome "help a teacher" post was SVG as drawing that in CSS would have taken ages!

edit - you edited your response, sneaky! Not sure how much of this is relevant anymore lol!

Really fun debate and just to clarify, I may be playing devils advocate here, but I do agree that CSS art is a useful skill, I just want to make that clear that I do not actually think it is pointless, even if I leaned into that for a bit of fun!

Thread Thread
 
alvaromontoro profile image
Alvaro Montoro

Too late... we are coming for you with pitchforks and torches!!!

South park animated gif showing people with pitchforks and torches

Thread Thread
 
alvaromontoro profile image
Alvaro Montoro

On the bright side, they are CSS pitchforks and torches, so they are not going to be too painful ;)

Thread Thread
 
grahamthedev profile image
GrahamTheDev • Edited

Haha, given how hard you defended CSS I am not surprised.

After a good spirited and interesting conversation we just had it is great to turn nasty 👿 so...


 

 

bring it on, CSS sucks

 

 


(kidding, but I am up for a war again as I was too busy for the last one, hence my late entry!)

Thread Thread
 
grahamthedev profile image
GrahamTheDev

🤣