robohash image acting as kam's profile photo

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 on another site? Put the URL here: