Customizing CSS and SVG

The simplest customization that can be performed to provide a style sheet or custom SVG patterns and symbols. These are done by including them in a <svg:defs> element. This is just a standard <defs> element as defined in the SVG specification. The element and its content will be copied into the model diagram verbatim. Custom patterns and symbols used by <style>, <overlay> and <border> can be defined in a <svg:defs> element. A <svg:style> section can also be used to define CSS rules which alter the display of any aspect of the model such as block background colour.

Note: !important can be added to ensure that the style is used. Scripting can also be added, but any scripts defined can interfere with the existing scripts (such as text wrapping).

The default CSS can be overridden by new styles:

<?xml version="1.0"?>
<shapes xmlns:svg="http://www.w3.org/2000/svg">

<svg:defs>
<svg:style type="text/css">
rect.layer 
{
 stroke: red; <!-- Color for border -->
 fill: #9f9;  <!-- Background colour -->
}
text.block
{
  font-size: 2.4px!important  <!-- Bigger block text size -->
}
</svg:style>

<svg:pattern id="my-deprecated" patternUnits="userSpaceOnUse"
viewBox="0 0 10 10" x="0" y="0" width="100%" height="100%">

<svg:path d="M 1 1 L 9 9 M 1 9 L 9 1" stroke="#555" stroke-width="1.15"
stroke-linecap="round"/>

</svg:pattern>  <!-- User-defined pattern to be referenced from Values XML file -->

<symbol id="my-border" viewBox="0 0 20 20">
<s:path d="M 0 0 L 0 20 L 20 20 L 20 5 L 15 0 z" stroke="orange"/>
</symbol>   <!-- User-defined border shape to be referenced from Values XML file -->
</svg:defs>

</shapes>

Note: The namespace for <defs> must be declared. The namespace prefix can be <svg:defs>, <SVG:defs> or <s:defs> but must be defined.

CSS classes

The CSS classes are used in the model, and can be modified by a style sheet included in the Shapes XML. The classes for the text that appears in System Model items are named after the following item type:

  • layer

  • block

  • sub-block

  • collection

  • component

In addition to these classes, the label class is used for small text that appears in the legend, and title is used for the title which appears in the lower right.

Text items appear in <svg:text> elements and can be modified using CSS in the following way:

text.component 
{
  font-size: 1.6px;
  font-weight: normal;
}

This will make component text appear smaller and not in bold.

The boxes that surround layers, blocks and so on are generated by the SVG rectangles, <svg:rect>. Their class is the same as their item type, that is, layer, block, sub-block and collection. Components are not drawn as rectangles. In addition, the legend class is used for <svg:rect> which contains the legend. These can be modified using CSS in the following way:

rect.legend 
{
 fill: #ffa;
 stroke-width: 0.5px;
 stroke: blue;
}

This will give the legend a thicker blue border filled with light yellow colour. Other classes are used in the generated SVG, but are not supported and can change in future versions.

Defining patterns and symbols

While defining patterns and symbols in SVG, it is necessary to provide an ID which is used to refer to it in the System Model SVG. The IDs are used throughout the SVG and hence it is essential that the IDs be chosen carefully to avoid name collisions. It is recommended that any ID defined in <svg:defs> be prefixed with a lower-case my, for example, myPattern or my-symbol.