![Cover image for Rate my SVG art! [Compared to CSS art]](https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5itogrj77gbvro4hpq93.jpg)
Loads of people like to do CSS art. It is really impressive but next to pointless for anything other than a cool demonstration.
Why don't we see ...
For further actions, you may consider blocking this person and/or reporting abuse
The Flexibility part should be a tie or still SVG but being a bit more realistic: we could also claim that there are SVG properties not supported in all browsers (same as CSS), and you can inline the CSS image too (same as SVG). For professional printing, you'd need to move both to a different format (which would be easier with SVG) but I wouldn't consider that a huge advantage unless you are planning on printing a huge version of the image.
Also, I am 99% positive you can make that SVG a lot smaller by reorganizing the paths, merging some of them, and even dropping the classes (e.g.,
class="colourXX"is longer thanfill="#123456", which is longer thanclass="XX"). Cutting the size considerably.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.
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: absoluteextensively 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!
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.
And there's more to CSS art than positioning:
Also,
position: absoluteis 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 :)
The compatibility is not really an issue. I was lazy using the
aspect-ratioproperty that we can easily replace using the padding trick. I also used display:grid and grid-area:1/1 to make all the layers above each other. We can easily replace this using the classic position:absolute.Ah fair enough, I didn't notice that was the issue I thought it was something else as the eyes didn't have pupils (I assumed there was a conic-gradient or something there!)
In that case it would probably work back to IE as well so that was my bad!
You forgot this:
How could I be so stupid 🤦♂️🤣!
Your post raises an important point about the split between using art as medium for practice or flexing, and using a particular technology for artistic stuff to put on a website. In the former case, go nuts and do what you want. In the latter case, you will probably reach for CSS for simpler stuff like an icon e.g hamburger icon, probably go for SVG for the middle ground, and if its complex, you probably want it as a raster image. If you are great at CSS or SVG, you can stretch it further, but there is a tipping point with performance.
For example, Diana Adrianne did amazing oil portraits in CSS, it an amazing demo of skills, but its gets your CPU fan racing!
Its important to appreciate the skill of what someone has achieved, but also understand what is practical for general usage.
✔️ SVG is amazing, I am going to go learn it!
WOW ! Actually WOW ! Will you win the war ? :🤔 :
Depends who is judging and what the criteria is!
I will let @afif dictate terms 🤣🤣
hmmm, so you want to fight 🤔 .... you are lucky that it's a new field to me or I would make you KO in less than 24h!
I will get back stronger
Even as a new field you drawing was really impressive!
I was blown away when I saw it on iPhone where it didn't work properly, was really great seeing it on PC!
I would imagine your round 2 would be epic!
But nah, let's fight about something else, SVG and CSS should be friends!
Pretty impressive SVG :)
SVG gets really interesting when you start to work both in an imaging program and an editor, to the point where it's almost hand crafted.
Yes, I am currently working on cheating my way to a CSS only solution - so I am converting
<path d="">toclip-path: polygon().I get
<path>but there are some<polygon points="">in there and converting them is something I am having to learn (seems straight forward but really threw a spanner in the works!).I think the bit that is hard to hand craft is the curves, I can "edit" them if they are generated, I don't understand them well enough to write one from scratch by hand though!
I don't think I will ever hand craft anything other than a circle and a square in SVG! 🤣
you cannot convert a path to polygon because polygon cannot handle curves. Clip-path already have a path() value (twitter.com/jensimmons/status/1201...) so converting this to CSS is easy but still SVG behind the scene
You can try to have an approximation of a curve as a polygon, by spliitting it into multiple lines. However, that doesn't scale as well for obvious reasons.
This is what I am doing, approximating a curve. In a busy enough image you don't need to add too many paths to make a circular looking shape. I am having fun trying to fine tune it though to try and keep the balance right.
What I am finding is that gaps between two polygons that previously had curves is a pain to fix, but I think I can just hide that with a background colour and the eye will miss it.
Did you hand coded the svg or what? I'm curious to know!!🤔🤔
No that would be next to impossible given there are over 900 elements in the SVG. I used Adobe illustrator and a few tricks to speed the process up!
Ah! I see. Thank you for replying
Nice! Really makes me want to see stuff on how to make amazing SVG art, because while I generally draw stuff in inkscape I sometimes feel like a total caveman moving points around manually 🙃
You cheat (or at least I did)!
Illustrator -> image trace (fiddle with settings until looks right) -> expand -> adjust points that look bad -> adjust colours that didn't get captured properly -> add relevant groupings and voila, copied item!
I am average at illustrator, but I learned all the hacks to make things that look impressive to those who don't know the cheats! 😋
To actually draw SVG art takes a lot of practice, I can just about create decent isometric illustrations but this kind of art is beyond me!
I figured a lot of it had to be automated due to the time it took! Still, I can imagine those "hacks" coming in handy even when drawing something original, eg. image tracing a real apple to get the basic curves and then adjust for artistic expression, etc.
Image Trace has got me out of a lot of jams, clients sending PNG logos etc. Takes a bit of practice to get the setting right but as you can see it can do some pretty impressive work as I maybe had 5 minutes tidy up to do that was all!
Well worth buying illustrator just for that feature!
You so good at this
Really very impressive.
Really cool!
Haha, I did wonder if anyone would call me out on that! 🤣
Yes I thought I would start a different type of war, an SVG vs CSS war! 🤣
Just to reiterate, CSS art is incredible, just wanted to show what happens if you cheat like me!