Insert the stylesheet into the SVG instead of the head?

[mbostock]

This way, it’ll work out of the box with React and other frameworks, and it’ll work better with Observable’s Download SVG since the stylesheet will be included. Related #248.

[shancarter]

Thinking about this more last night, was wondering if this inheritance was more what I would want? I was worried about the styles leaking out of the plot svg into my surrounding document. (though with namespaced selectors, maybe not a problem)

  <svg>
    <g class="plot" font-family="system-ui, sans-serif" font-size="10">
      <text x=20 y=20>Test</text>
    </g>
  </svg>

so then I could easily do this to override the styles:

<div>
<style>
  .plot {
    font-size: 22px;
  }
</style>
  <svg>
    <g class="plot" font-family="system-ui" font-size="10">
      <text x=20 y=20>Test</text>
    </g>
  </svg>
  
</div>

If the styles were inside the svg, I would have to do this:

<div>
  <style>
      svg .plot {
        font-size: 22px;
      }
    </style>
  <svg>
    <style>
      .plot {
        font-size: 10px;
      }
    </style>
    <g class="plot">
      <text x=20 y=20>Test</text>
    </g>
  </svg>
  
</div>

which is not terrible, but slightly more annoying.

Stepping back a minute too, the reason the text css feels different than the other css in plot/style.css is that they affect the presentation of the content of the svg. The other things in style.css are css styles that only really affect the container. I sort of mostly want a plot chart to act like an image when I'm integrating in into another environment.