![Cover image for Rate my SVG art! [Compared to CSS art]](https://media.dev.to/cdn-cgi/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 what you should actually use for art...SVG
Inspired by this post where @afif once again blows my mind with his CSS ninja skills!
As a first CSS drawing...my rating is a 10!
But what if a zero skilled noob like myself wanted to create an image? Well I would use SVG of course!
Let's compare the results
let's see the three items side by side:
Original image
CSS version
SVG version
ย
ย
Comparison of effort etc.
Let's compare how long they took etc.
Time to complete
CSS version: 6 hours โ
SVG version: <30 minutes (would take longer without reference image to copy!) โ
File Size
CSS Version: 3kb gzipped โ
SVG version: 16kb gzipped (but can be made a lot smaller at the expense of accuracy) โ
Accuracy
CSS Version: Good โ
SVG Version: Extremely Good โ
Scalability
CSS Version: Will scale almost infinitely โ
SVG Version: Will scale almost infinitely โ
(A draw! They are both effectively vector images)
Compatibility
Note: this point is actually not entirely fair so should be disregarded. Most CSS art will not have issues with compatibility and as @afif pointed out the issues were more to do with aspect-ratio than the main CSS. I have left it in so the comments make sense!
CSS Version: Doesn't work well in Safari (the new IE!) โ
SVG Version: works all the way back to IE9! โ
Flexibility
CSS Version: Works well on a web page (assuming all CSS properties are supported). โ
SVG Version: Works on a web page, but can also be sent for professional printing. As an added bonus you can include it as an image on a web page (or you can inline it to reduce the need for a network request). You can even export it as a JPEG or PNG etc. for image sharing sites. โ
Skill Level Required
CSS Version: Simply blows my mind โ
SVG Version: Meh, SVG is pretty easy! โ
The winner?
SVG without a doubt, even the one item it didn't win (file size) was due to the massive complexity / detail increase.
Obviously it isn't as impressive though and I suppose if you want to show off you should use CSS, for everything else there is mastercard SVG!
So which should you use?
If you enjoy making CSS art it is far more impressive than SVG and is a great way to learn some advanced CSS tricks.
But for production, in the real world, where time is important, SVG wins hands down.
It will also just work on any browser, no worrying about supported properties or anything like that!
So while I love CSS art as it is always amazing to see how people make things work, SVG creation is probably the tool you want in your arsenal when designing things!
What do you think?
Let me know what do you think ๐๐
โ๏ธ SVG is amazing, I am going to go learn it!
โ I won't use SVG ๐คฎ, I want overly complex CSS imagery and lots of headaches instead!
p.s. I think I need to add here that I am baiting people when I say CSS art is useless, it isn't, I am just being my normal mischievous self ๐คฃ
Update
As everyone loves CSS art - I made CSS art, check that out too!
Top comments (43)
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 :)
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!
Too late... we are coming for you with pitchforks and torches!!!
On the bright side, they are CSS pitchforks and torches, so they are not going to be too painful ;)
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...
ย
ย
ย
ย
(kidding, but I am up for a war again as I was too busy for the last one, hence my late entry!)
๐คฃ
Oh absolutely could make it smaller, I completely cheated here and automated 80% of the process (hence the massive time difference).
I can't even remember if I passed it through SVG OMG to minimise it.
Some of the areas could be converted to larger areas and combined with gradients used to fill them instead of distinct areas, some of the paths could be massively simplified without any noticeable difference etc.
SVG can just be imported into illustrator etc. converted to print ready PDF and sent to print.
Also much easier to convert the RGB colour space to CMYK on an SVG (as your CSS art would have to be screenshotted and then converted).
I mean I suppose I am splitting hairs as most print is digital nowadays, not litho, so the colour spaces are less important and, as you said, we can blow the CSS image up to a decent size and screen shot it so we can get the 300dpi we are after for most modern print jobs.
The only other thing with SVG is if you want spot UV etc. separating the layer off is probably easier (depending on how you build the CSS version of course).
But again, that's not SVG anymore, and it's only practical for large images. I could claim that screenshooting the CSS image is easier and faster than importing an SVG to Illustrator (but with a lot less features). CSS also supports CMYK (not all browsers though).
If we are screenshotting, we can just screenshot the SVG so I would call this one a draw if you just want an image ๐๐คฃ
I don't think browser compatibility is a problem once we get into CMYK territory as I am saying to use a graphics package! So browser compatibility issues are not an issue here (in fact +1 for CSS art as it doesn't require any expensive software!)!
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!
โ๏ธ 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!
You forgot this:
How could I be so stupid ๐คฆโโ๏ธ๐คฃ!
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.
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.
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!
Calling safari the new ie controversial ๐. Otherwise amazing work!
Pssst, this comment was written mobile safari
Haha, I did wonder if anyone would call me out on that! ๐คฃ
You so good at this
Really cool!
Really very impressive.
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!
Pretty impressive SVG :)