SVG shapes are trivial things since SVG is a drawing tool. I won't write an article to explain how to draw something using a drawing tool, we also don't need filter since we can easily have curvature with paths.
I am giving a trick that apply to CSS shapes since it's now something very common and it's not easy to build them with rounded corners.
I am also giving some trivial examples to illustrate only the shapes. In a real world, that shape will contain texts, images, hover effect, etc which is something not easy to do with SVG. It's easier to build your layout using divs and at the end apply a filter like you do with border-radius. SVG would be more suitable if you will only build the shapes and use them as icons or basic images for example but not as a part of a complex layout.
A basic example: jsfiddle.net/L4op8kzv/ (you will have a hard time to do the same with only SVG, at least for someone not familiar with SVG)
PS: the code works fine on Firefox, clip-path has a good support and the same for filter
PS2: the padding trick is not a hack. it allow me to control the size by changing only one property (the width). Using SVG you will do the same by setting a viewBox and you have to define some explicit value based on the shape there to give an intrinsic ratio (and it's not a hack too)
Accessibility First DevRel. I focus on ensuring content created, events held and company assets are as accessible as possible, for as many people as possible.
A couple of scenarios there where CSS is a great choice if you don't care about supporting old browsers / it can fall back gracefully that I hadn't thought about (the hex grid is a great example of something that is far better in CSS, although I would imagine that falls back horribly yet again!).
But I still think SVG would be better for most scenarios.
The example doesn't work in Firefox as I said, which is another thing to consider for complex shapes (not sure why that last shape doesn't work when the rest do???):
EDIT - the issue is conic-gradient on Firefox, removing that it works so it is some interaction between conic gradient and clip-path that isn't working there.
And for the second p.s. if you don't add padding the shape would collapse and not take up any space. Remove the padding and you will see you do not see an image at all!
The exact same technique is use to make space for images that haven't loaded yet to avoid Cumulative Layout Shift and is known as "the CSS padding hack". It is certainly a hack to use padding to give something an intrinsic height, not saying it is a bad thing at all as I have used it before, just an observation!
I just wanted to point out that by the time you are defining polygons in CSS an SVG is better in a lot of scenarios and people need to stop being scared of SVG as it isn't that complicated.
Followed you as can't wait to see what else you put out and with responses like that I am sure I will enjoy reading them / learning from them / debating them with you in the future 😁!
For the firefox thing, I invite you to update your browser because the support of conic-gradient() there is something new but available on the new Firefox Browser.
I am not scared about SVG ;) but I still think there are a lot of cases where CSS can do a better job or let's say an easier one.
you can easily use media query to adjust the layout and the shapes when working with CSS (it would be tedious to do the same with CSS)
You can easily add random content when dealing with CSS which is a great thing for accessibility (a topic you know about ;) ). SVG and content isn't great especially when it comes to a responsive behavior.
We can rely on CSS variables to easily control the different values (colors, position, size, etc). With SVG most of the control is done with attributes and not all of them have CSS equivalent.
Another example without the padding hack and with a responsive behavior (the shape will adjust to the text size and the screen size): jsfiddle.net/8fo9w6s3/ .. I doubt we can easily do this with SVG :)
This said, I am not against SVG but I am a CSS hacker ;)
PS: if you don't like the padding trick we can still consider the use of CSS variables: jsfiddle.net/gxrkqw6d/ or the new aspect-ratio property: jsfiddle.net/gxrkqw6d/1/ (still not available on Firefox but works on chrome)
Accessibility First DevRel. I focus on ensuring content created, events held and company assets are as accessible as possible, for as many people as possible.
Fun debate, I really am sad that I enjoy these types of conversations 🤣🤣
For the firefox thing, I invite you to update your browser because the support of conic-gradient() there is something new but available on the new Firefox Browser.
Firefox is bang up to date, so I am guessing you are on Mac maybe as I am Windows? (the coincidence that your colours nearly match the firefox logo when I took this screenshot made me smile as I am a nerd 😋)
Also looks a bit strange on iPhone browser within dev.to app (guessing Safari based) for some reason (the rounded corners don't work on some parts of the shapes...is very odd I can't pinpoint what is causing that!) but the shapes work fine, that just appears to be some issue with the rounding part.
I am not scared about SVG ;)
I didn't mean you are scared of SVG so apologies there as I didn't phrase that well, I just see loads of posts with people battering CSS to do the job of an SVG and it was meant more as a general observation.
you can easily use media query to adjust the layout
Agree on ease of adjusting layouts, as I said hexagons was a prime example where SVG would not be a logical choice for a layout etc.
I doubt we can easily do this with SVG :)
Also entirely agree on the background jsfiddle with the strange shape "X" with rounded corners, easier in CSS and a prime use case where it would degrade gracefully and not impact the page in any way.
We can rely on CSS variables to easily control the different values (colors, position, size, etc). With SVG most of the control is done with attributes and not all of them have CSS equivalent.
Every single item in SVG can be controlled so not sure what properties you mean here? You can add a class to an item and manipulate it (there is not a single inline style or attribute in the HTML of my old website, which would be near impossible to build in CSS if we are coming up with "SVG can't do that" vs "CSS can't do that" scenarios 😋).
You can translate, scale, change fill colour etc. with no issue. (I may have missed the point you were trying to make here as I am sure there are some things that are difficult).
You can easily add random content when dealing with CSS which is a great thing for accessibility
I am also especially in favour of SVG as the preference over CSS as <title> and <desc> provide a lot of baked in support for screen readers if an image has purpose (sadly content: <string> / <alt description> has poor support`. )
For decorative only stuff CSS works fine, also for simple shapes it is great too.
if you don't like the padding trick we can still consider the use of CSS variables:
The CSS variable doesn't work for being responsive as it won't resize, so you would have to use some interesting calc to make that work in a responsive fashion I presume (or use vw units I suppose, but that seems messy). In comparison with SVG just set the width to 100% within a container and it will do all the magic for you as you resize the container, maintaining it's aspect ratio unless you tell it otherwise.
or the new aspect-ratio property
aspect-ratio is going to be a game changer, but once again support is the big enemy at the moment. Why we didn't have that years ago is beyond me! I can't wait to be able to use it in production (which at the rate of roll out will hopefully be soon!)
Accessibility First DevRel. I focus on ensuring content created, events held and company assets are as accessible as possible, for as many people as possible.
I don’t have any plugins on Firefox so that is the only thing I can think of, maybe there is some strange rendering race conditions going on that a plugin inadvertently fixes?
Either that or display resolution, I’m running 4K monitors? I mean completely grabbing at straws here as same version and same OS should mean consistent results surely lol!
If we get into a position where we can’t even rely on version numbering for feature consistency then we are certainly doomed lol!
I don't know too but try the clip-path and background without the filter. Probably the issue is the filter. Try also outside codepen. Sometimes Codepen & co are buggy
Accessibility First DevRel. I focus on ensuring content created, events held and company assets are as accessible as possible, for as many people as possible.
I loved you old website @inhuofficial
, I was looking for some inspirations for my website and this is great... Can I have a link for your current one please?
Accessibility First DevRel. I focus on ensuring content created, events held and company assets are as accessible as possible, for as many people as possible.
Not done yet, we go live in 2 weeks but the url is inhu.co if you want to bookmark it. 10th March is our launch date for the site (and the company!). If you want to drop me a message using the contact form on klu.io I will drop you over the designs as a sneak peak and a few others for inspiration if you want.
SVG shapes are trivial things since SVG is a drawing tool. I won't write an article to explain how to draw something using a drawing tool, we also don't need filter since we can easily have curvature with
paths.I am giving a trick that apply to CSS shapes since it's now something very common and it's not easy to build them with rounded corners.
I am also giving some trivial examples to illustrate only the shapes. In a real world, that shape will contain texts, images, hover effect, etc which is something not easy to do with SVG. It's easier to build your layout using
divs and at the end apply a filter like you do with border-radius. SVG would be more suitable if you will only build the shapes and use them as icons or basic images for example but not as a part of a complex layout.A basic example: jsfiddle.net/L4op8kzv/ (you will have a hard time to do the same with only SVG, at least for someone not familiar with SVG)
Another example with a hexagon grid: dev.to/afif/responsive-hexagon-gri...
Some examples from SO: stackoverflow.com/a/62341241/8620333 / stackoverflow.com/a/65726583/8620333
PS: the code works fine on Firefox, clip-path has a good support and the same for filter
PS2: the padding trick is not a hack. it allow me to control the size by changing only one property (the width). Using SVG you will do the same by setting a viewBox and you have to define some explicit value based on the shape there to give an intrinsic ratio (and it's not a hack too)
Great answer!
A couple of scenarios there where CSS is a great choice if you don't care about supporting old browsers / it can fall back gracefully that I hadn't thought about (the hex grid is a great example of something that is far better in CSS, although I would imagine that falls back horribly yet again!).
But I still think SVG would be better for most scenarios.
SVG animation between two states is actually pretty easy as you can use a visual design tool to make the shapes, I would argue doing that in CSS would be more difficult. This can be done without JS too.
The example doesn't work in Firefox as I said, which is another thing to consider for complex shapes (not sure why that last shape doesn't work when the rest do???):
EDIT - the issue is
conic-gradienton Firefox, removing that it works so it is some interaction between conic gradient and clip-path that isn't working there.And for the second p.s. if you don't add
paddingthe shape would collapse and not take up any space. Remove the padding and you will see you do not see an image at all!The exact same technique is use to make space for images that haven't loaded yet to avoid Cumulative Layout Shift and is known as "the CSS padding hack". It is certainly a hack to use padding to give something an intrinsic height, not saying it is a bad thing at all as I have used it before, just an observation!
I just wanted to point out that by the time you are defining polygons in CSS an SVG is better in a lot of scenarios and people need to stop being scared of SVG as it isn't that complicated.
Followed you as can't wait to see what else you put out and with responses like that I am sure I will enjoy reading them / learning from them / debating them with you in the future 😁!
For the firefox thing, I invite you to update your browser because the support of conic-gradient() there is something new but available on the new Firefox Browser.
I am not scared about SVG ;) but I still think there are a lot of cases where CSS can do a better job or let's say an easier one.
Another example without the padding hack and with a responsive behavior (the shape will adjust to the text size and the screen size): jsfiddle.net/8fo9w6s3/ .. I doubt we can easily do this with SVG :)
This said, I am not against SVG but I am a CSS hacker ;)
PS: if you don't like the padding trick we can still consider the use of CSS variables: jsfiddle.net/gxrkqw6d/ or the new
aspect-ratioproperty: jsfiddle.net/gxrkqw6d/1/ (still not available on Firefox but works on chrome)Fun debate, I really am sad that I enjoy these types of conversations 🤣🤣
For the firefox thing, I invite you to update your browser because the support of conic-gradient() there is something new but available on the new Firefox Browser.
Firefox is bang up to date, so I am guessing you are on Mac maybe as I am Windows? (the coincidence that your colours nearly match the firefox logo when I took this screenshot made me smile as I am a nerd 😋)
Also looks a bit strange on iPhone browser within dev.to app (guessing Safari based) for some reason (the rounded corners don't work on some parts of the shapes...is very odd I can't pinpoint what is causing that!) but the shapes work fine, that just appears to be some issue with the rounding part.
I am not scared about SVG ;)
I didn't mean you are scared of SVG so apologies there as I didn't phrase that well, I just see loads of posts with people battering CSS to do the job of an SVG and it was meant more as a general observation.
you can easily use media query to adjust the layout
Agree on ease of adjusting layouts, as I said hexagons was a prime example where SVG would not be a logical choice for a layout etc.
I doubt we can easily do this with SVG :)
Also entirely agree on the background jsfiddle with the strange shape "X" with rounded corners, easier in CSS and a prime use case where it would degrade gracefully and not impact the page in any way.
We can rely on CSS variables to easily control the different values (colors, position, size, etc). With SVG most of the control is done with attributes and not all of them have CSS equivalent.
Every single item in SVG can be controlled so not sure what properties you mean here? You can add a class to an item and manipulate it (there is not a single inline style or attribute in the HTML of my old website, which would be near impossible to build in CSS if we are coming up with "SVG can't do that" vs "CSS can't do that" scenarios 😋).
You can translate, scale, change fill colour etc. with no issue. (I may have missed the point you were trying to make here as I am sure there are some things that are difficult).
You can easily add random content when dealing with CSS which is a great thing for accessibility
SVG is great for accessibility though (probably why I am more bothered about support than most as I still have to consider IE11 as a minimum due to 10%+ of screen reader users still using Internet Explorer because of compatibility with their screen reader).
I am also especially in favour of SVG as the preference over CSS as
<title>and<desc>provide a lot of baked in support for screen readers if an image has purpose (sadly content: <string> / <alt description> has poor support`. )For decorative only stuff CSS works fine, also for simple shapes it is great too.
if you don't like the padding trick we can still consider the use of CSS variables:
The CSS variable doesn't work for being responsive as it won't resize, so you would have to use some interesting
calcto make that work in a responsive fashion I presume (or usevwunits I suppose, but that seems messy). In comparison with SVG just set the width to 100% within a container and it will do all the magic for you as you resize the container, maintaining it's aspect ratio unless you tell it otherwise.or the new aspect-ratio property
aspect-ratiois going to be a game changer, but once again support is the big enemy at the moment. Why we didn't have that years ago is beyond me! I can't wait to be able to use it in production (which at the rate of roll out will hopefully be soon!)I have the same version as yours and I am also on Windows. We are probably facing a strange bug then.
I don’t have any plugins on Firefox so that is the only thing I can think of, maybe there is some strange rendering race conditions going on that a plugin inadvertently fixes?
Either that or display resolution, I’m running 4K monitors? I mean completely grabbing at straws here as same version and same OS should mean consistent results surely lol!
If we get into a position where we can’t even rely on version numbering for feature consistency then we are certainly doomed lol!
I don't know too but try the clip-path and background without the filter. Probably the issue is the filter. Try also outside codepen. Sometimes Codepen & co are buggy
Very healthy and informative debate there, I learned a couple of things from this.
Me too, that’s why I love conversations like this they challenge your perceptions of things you know (or think you know lol!)
I loved you old website @inhuofficial , I was looking for some inspirations for my website and this is great... Can I have a link for your current one please?
Not done yet, we go live in 2 weeks but the url is inhu.co if you want to bookmark it. 10th March is our launch date for the site (and the company!). If you want to drop me a message using the contact form on klu.io I will drop you over the designs as a sneak peak and a few others for inspiration if you want.
Thanks, I really appreciate that. I'll drop you a message :)