From the course: D3.js Essential Training

Unlearning CSS: Why HTML CSS doesn't work with SVG - D3.js Tutorial

From the course: D3.js Essential Training

Start my 1-month free trial Buy for my team

Unlearning CSS: Why HTML CSS doesn't work with SVG

“

- [Instructor] Did you know that much of your HTML styling won't work on SVG elements? We have to unlearn some of what we might already know for D3. You can use CSS. You just need to learn some new commands, and we're going to take a look at those. CSS stands for cascading style sheets. The cascading part of that tells us that if we were to define two conflicting styles for the same element, the more specific definition will take precedence, or the later definition, if they are in direct conflict. Style sheets contain the formatting or styles for HTML elements, things like height, width, fill or border. So in a sense, a style sheet isn't real coding, it's just a list. You could style your elements using D3, by the way, and that would take precedence over a style sheet, but it's far less efficient to do so, and it really bloats your code. So I would recommend you only style elements directly where you must. If you already know a bit of CSS, beware. A lot of this sorts of code that works on standard HTML does not apply to SVG. So you may be frustrated by correct looking statements simply not working. Let's look at some of those now. Confusingly, SVG itself is an HTML element. It's not a graphical element, but what goes inside the SVG is a graphical element. And what this means is I can use normal HTML styling on my SVG. So I can say background color is pink, for example. But if I then come in here, and I say background-color, and then let's make that pink. So if that were to work, the circle would disappear completely. It goes black. It can't make sense of background color for an SVG element. Okay, so graphical elements take a fill, like so, instead, and there it is gone. Now what else? Here we have the SVG element has a border of black. Let's try that one. Let's turn that back to pink. So in theory, we should be able to see the black outline, but we can't, okay, because border doesn't work either. So you have to use stroke, and I think as an extra kind of gotcha that stroke doesn't work unless it has its friend stroke-width alongside. And we don't need all of these commands either. So stroke is simply for the color. I think that's what confused it there. There we go. Our circle has reappeared. One of the common ones that causes problems is text. So if we have SVG text, and we say "Hello," let's see where that comes out. We'll give it a location, and you can see that's positioned over the circle. Now if that was normal HTML text, we would use color, and we would say make it a different color, 'cause you won't be able to tell if it's worked if I do that. Okay, so color will no longer work. Text-align no longer works. Pretty much all of the styling commands for text, you will have to relearn, I'm afraid. But it is worth the effort. So for text, it's fill, because as far as SVG is concerned, text is a graphical element, just like a circle. It's a vector. It can be scaled up and down. It can have a border, which would obviously be called stroke. In fact, let's do that now. That might look a bit funny because the text is quite small, but it will show you what I mean. Let's have a go. There you go. That's given itself a stroke width of one, and if we get rid of that, you can see that it's red. This is all called internal CSS, by the way, where the CSS is sitting within the HTML. There is also external CSS where instead of typing all of these styles into your HTML page, you just provide a URL to a different file. But for the purposes of this course, it's easier with your exercise files if everything is in one file. So you could dispense with CSS when using D3, because you could apply all of these styles with D3 and you see people doing it, but it's a really bad idea. That's because it bloats your code. It prevents you from centrally managing your styles. So let's say you are going to build 10 charts and all of them need to have pale gray axes. With D3, you're going to be making at least 10 style statements to achieve that. But with CSS, you can do it centrally, and you can do it with just one command. So although there is a bit of hard work to unlearn your HTML CSS and to relearn some SVG CSS, in my opinion, it's a very good time investment, and will save you time and headache in the future.

Contents