Running the demo

Click on the "Start SVG Demo" at the top of this page. Then, in the demo page, select the name of the alternate stylesheet to apply

Click on the 'start svg demo' button on this page. Then select one of the links next to the 'select stylesheet' prompt to to enable the desired stylesheet (and disable the others).

Applying CSS styles to SVG and HTML from one stylesheet

SVG is fully stylable with CSS and features like alternate stylesheets apply. This demo shows a web page with both HTML and SVG content. At the top of the page, the user can select one of the available stylesheets which gets enabled while the others are disabled. This mechanisme is generally useful to allow users to select a prefered style, for example chosing high contrast if needed for accessibility reason.

The demo shows how the style of SVG graphical element is subject to CSS styles, just like any other HTML element is and that the same stylesheet can naturally be used to style both SVG and HTML content.

The key to turning stylesheets on or off is to change the disabled property on the <link> element referencing the stylesheets like so:

var link = ...; // e.g., from document.getElementsByTagName("link");
link.disabled = false; // Enables the stylesheet
....
link.disabled = true; // Disables the stylesheet

The code for turning stylesheets on and off was inspired by the example found at A list appart.