While SVG and HTML are both markup languages, there are two significant differences between them that affect how they work with CSS:
- SVG doesn’t adhere to the CSS box model
- SVG lacks a positioning scheme
1. SVG Doesn’t Adhere to the CSS Box Model
When used with HTML, CSS layout follows the rules of the CSS box model. SVG, on the other hand, uses coordinates for layout. It adheres to what may be best understood as a “shape model”.
SVG shapes aren’t limited to rectangular boxes. As a result, most box-model-related properties don’t apply to SVG elements. You can’t, for instance, change the padding or margin of an SVG element. Nor can you use the box-sizing , box-shadow , outline , or border-* properties. Grid layout, floats, and Flexbox also don’t work.
You can, however, use CSS to set or change a range of SVG properties and attribute values. The full list is outlined in the SVG 2 specification , although support in most browsers is incomplete. Some CSS properties, such as filter , can be used with SVG or HTML. We’ll discuss a few of them in this chapter, within the context of specific techniques.
2. SVG Lacks a Positioning Scheme
When CSS is used with HTML, element boxes can:
- exist within a normal flow
- be removed from normal flow with the float property
- be removed from normal flow with the position property
The CSS specification refers to these as positioning schemes. Positioning schemes don’t exist in SVG. The position property has no effect on SVG elements. Neither do properties such as top , Left and bottom , which depend on elements being positioned. You also can’t float elements within an SVG document.
Instead, SVG uses a coordinate system for element placement. To create a <circLe> , for example, you need to set its center point coordinates using the cx and cy attributes, and set a radius length using the r attribute. A polygon consists of a series of point coordinates and line segments drawn between them. In other words, you can define where an element will be drawn to the SVG canvas, but you can’t “position” them in the CSS sense of the word.
Related to positioning schemes, SVG also lacks the idea of z-index and stacking contexts. The SVG 2 specification does define behavior for z-index and stacking contexts in SVG documents , but most browsers don’t yet support it. SVG elements are instead stacked according to their source order. Those that appear later in the document sit towards the top of the stack. If you want to change the stacking order of SVG elements, you’ll need to move them around in the source or use JavaScript to reorder them in the DOM tree.
In fact, most CSS 2.1 properties don’t apply to SVG documents. Exceptions include animations and transforms, display , overflow , visibility , filter , and a few font and text-related properties. Instead, you’ll have to use SVG-specific styling properties with SVG documents. Most of these properties can also be expressed as SVG element attributes.
Source: Brown Tiffany B (2021), CSS , SitePoint; 3rd edition.