SVG tips & tricks
By now, SVG might seem straightforward, but trust me, it has its quirks that can make your data visualization journey challenging.
In this lesson, I'll share some tips and tricks that can save you hours of frustration — lessons I learned the hard way.
SVG Elements Don't Have a Background Color
Unlike HTML elements, SVG elements do not support background colors directly. They also do not support borders.
If you want to create a background or add a border to your SVG, you need to draw a rectangle that covers the desired area. CSS properties like background-color or fill or border on the SVG element itself are not recognized and will be ignored.
Example:
Text Alignment in SVG
Text alignment in SVG works differently compared to HTML. You can control both horizontal and vertical alignment using the text-anchor and alignment-baseline properties, which are unique to SVG.
Remember, in JSX, CSS properties should be camelCased (e.g., textAnchor instead of text-anchor).
Here's a summary of how they work:
text-anchor controls the horizontal alignment →alignment-baseline controls the vertical alignment →Oh no! 😱
This lesson is not ready yet.
But we're working hard on it, releasing 1-2 lessons per week. If you're a student, check the discord channel for announcements! (
logo above. )
🙇