Can CSS Styles Be Applied to SVGs Embedded within an `` Tag?

CSS Styling of Embedded SVGs

Applying CSS styles to an SVG directly included in a document using the tag is straightforward. However, if the SVG is embedded within an tag, this approach falls short. Can CSS styles be applied to an embedded SVG?

Short Answer: No

CSS styles do not traverse document boundaries. An tag, in this case, effectively creates a boundary between the containing document and the embedded SVG.

Alternative Approaches

Fortunately, there are alternative methods to style embedded SVGs:

1. Programmatic Stylesheet Insertion:

Using JavaScript, the stylesheet can be inserted directly into the SVG document within the tag. This assumes the has fully loaded.

var svgDoc = yourObjectElement.contentDocument; var styleElement = svgDoc.createElementNS("http://www.w3.org/2000/svg", "style"); styleElement.textContent = "svg { fill: #fff }"; // Adjust as needed svgDoc.getElementById("where-to-insert").appendChild(styleElement); Copy after login 2. External Stylesheet Referencing:

A element can be inserted to reference an external stylesheet:

var svgDoc = yourObjectElement.contentDocument; var linkElm = svgDoc.createElementNS("http://www.w3.org/1999/xhtml", "link"); linkElm.setAttribute("href", "my-style.css"); linkElm.setAttribute("type", "text/css"); linkElm.setAttribute("rel", "stylesheet"); svgDoc.getElementById("where-to-insert").appendChild(linkElm); Copy after login 3. CSS Import (@import Rule):