AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |
Back to Blog
Svg rounded rectangle1/14/2024 ![]() ![]() This said, I am not against SVG but I am a CSS hacker ) I doubt we can easily do this with SVG :) With SVG most of the control is done with attributes and not all of them have CSS equivalent.Īnother example without the padding hack and with a responsive behavior (the shape will adjust to the text size and the screen size): /8fo9w6s3/. We can rely on CSS variables to easily control the different values (colors, position, size, etc).SVG and content isn't great especially when it comes to a responsive behavior. You can easily add random content when dealing with CSS which is a great thing for accessibility (a topic you know about ) ).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).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. 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.įollowed 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 □! Like comment: Like comment: 7 likesįor 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. 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! 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". Remove the padding and you will see you do not see an image at all! if you don't add padding the shape would collapse and not take up any space. 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?):ĮDIT - 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.Īnd for the second p.s. 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. ![]() 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) Like comment: Like comment: 8 likesĪ 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!).īut I still think SVG would be better for most scenarios. it allow me to control the size by changing only one property (the width). PS: the code works fine on Firefox, clip-path has a good support and the same for filter 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.Ī basic example: /L4op8kzv/ (you will have a hard time to do the same with only SVG, at least for someone not familiar with SVG)Īnother example with a hexagon grid: dev.to/afif/responsive-hexagon-gri. It's easier to build your layout using divs and at the end apply a filter like you do with border-radius. In a real world, that shape will contain texts, images, hover effect, etc which is something not easy to do with SVG. I am also giving some trivial examples to illustrate only the shapes. 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 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. SVG shapes are trivial things since SVG is a drawing tool.
0 Comments
Read More
Leave a Reply. |