SVG Selective Unfading

I recently worked on a web presentation with a complex Scalar Vector Graphics (SVG) diagram for a simple computer processor implementation. I wanted to discuss several different activities in the processor with multiple versions of the diagram emphasizing the parts of the diagram that are involved in the different activities.

There are many ways of doing this, but most that I have seen involved cutting and pasting the SVG diagram and/or its associated CSS style sheet into an HTML file. This creates a maintenance nightmare. So ideally I wanted to be able to put references to one SVG file and one CSS file into several HTML web pages, with minimal styling modifications added into the HTML files to modify the emphasized parts of the diagram. Then the HTML files can be pulled into the presentation with <object> tags.

To keep things simple, we work with the simple diagram shown below. We want HTML files, part-a.html, part-b.html, and part-c.html, that show each of the boxes along with the arrows connecting them to other boxes. For completeness we create HTML files nothing.html, where nothing is unfaded, and all.html, where all boxes and arrows are unfaded.

All of the HTML files use the following <link> tag in the document's <head> tag to bring in the style sheet selective-unfading.css.

<link rel="stylesheet" href="selective-unfading.css">

Its style rules fade the boxes and arrows with the following rule.

opacity: 0.2;

This makes the boxes and arrows semitransparent, which in effect fades them by letting the white background show through.

The HTML files also have an <svg> tag that contains the following tag.

<use xlink:href="selective-unfading.svg#diagram"/>

This brings in the diagram. So all of the HTML files share the same CSS and SVG files.

The only visual differences between the HTML files are

Most of the files have a <style> tag that selectively unfades part of the diagram.
Each of the files has a different <text> tag for a diagram label.

The shared files are discussed further in the "Shared Files" menu item to the left. The HTML files are discussed further in the "Various Unfadings" menu item to the left.

All of the diagram HTML files share the following files.

selective-unfading.svg — This file declares boxes with class attribute "box all part-?", where "?" is "a", "b", or "c" depending on the box. It also declares arrows with class attribute "arrow all part-? part-??", where "?" and "??" are "a", "b", or "c" depending on the boxes at either end of the arrow. Finally, it uses the boxes and arrows in a group (<g> tag) with "id" attribute "diagram".
This file can be incorporated into a <svg> tag in an HTML file with the following tag:
```
<use xlink:href="selective-unfading.svg#diagram"/>
```
selective-unfading.css — This file declares the styling for the boxes, arrows, and labels. The styling for both boxes and arrows includes the rule "opacity: 0.2;". This makes the boxes and arrows faded unless a rule in the <svg> tag overrides it. For overriding, the rule should be inside a <svg> tag.

In the web page below (nothing.html) there is no <style> tag in the <svg> tag so nothing is unfaded.

<object style="width: 100%; height: 434px;" data="nothing.html"></object>

nothing.html

In this web page (all.html) the class "all" is declared to have opacity 1.0. This is done in a <style> tag inside the <svg> tag.

All of the boxes and all of the arrows have "all" in their style class.

<object style="width: 100%; height: 434px;" data="all.html"></object>

all.html

In this web page (part-a.html) the class "part-a" is declared to have opacity 1.0. This is done in a <style> tag inside the <svg> tag.

The box A and the arrow from box A to Box B have "part-a" in their style class.

<object style="width: 100%; height: 434px;" data="part-a.html"></object>

part-a.html

In this web page (part-b.html) the class "part-b" is declared to have opacity 1.0. This is done in a <style> tag inside the <svg> tag.

The box B and the arrows from box A to box B and from box B to Box C have "part-b" in their style class.

<object style="width: 100%; height: 434px;" data="part-b.html"></object>

part-b.html

In this web page (part-c.html) the class "part-c" is declared to have opacity 1.0. This is done in a <style> tag inside the <svg> tag.

The box C and the arrow from box B to Box C have "part-c" in their style classes.

<object style="width: 100%; height: 434px;" data="part-c.html"></object>

part-c.html

You cannot put two or more selectively unfaded diagrams on the same web page unless you embed them as <object> tags. It appears that all of the <svg> tags are in the same lexical scope with regard to styling. This is the reason for having multiple HTML files, each of which uses nothing but the shared CSS file and the shared SVG file. The HTML files just make simple modifications to the styling and SVG content.
If an item in the diagram has selective fading classes applied and it appears in a SVG <g> (group) tag that has selective unfading classes applied then it is faded whenever either the item or the group is faded. It is doubly faded when both the item and the group are faded. This kind of fading is usually undesirable. The use of selective unfading on groups needs to be carefully planned.
When an HTML web page includes diagrams from a separate SVG file, arrowheads in the diagram appear normal in Firefox and Safari. However when the diagrams are printed or converted to PDF then the arrowheads are lost. See the example.

This example is an HTML file with an arrow entirely contained in its <svg> tag. If you print it (or just preview the print) it shows a complete arrow. An error occurs if the arrow is imported from an SVG file.

arrowhead-test-1.html

This example is an HTML file with an arrow imported from an SVG file. If you print it (or just preview the print) the arrowhead is lost.