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.