Tip 010 - CSS in SVG

If you're cool and savvy and whatever, you might be familiar with SVG - an XML-based format for drawing shapes with code. If you put that SVG code in your HTML inline, you can actually control the look of that SVG a bit, using CSS. The catch is that when you're working with SVG things, the properties have names that are different than the ones you might guess.

svg circle {
  background: red; /* This won't work - SVG items don't have "backgrounds" */
  fill: red; /* This is the one you want */

Instead of background, you've got fill. Instead of border, you've got stroke. This is just the beginning, though. There are lots of properties that only work on SVG elements. More details are here:


Have you written a reply to this post? Send me the URL here: