old:carto:net - Example for using CSS-Styles

Cascading Style Sheets can in a centralized way define the layout of a whole project. E.g. the background is not defined explicitly in each of the SVG-files but defined centrally in a CSS-file. SVG can be controlled in exactly this manner: above one sees two files with the identical contents. It is the same file, but with two different stylesheet definitions.

Files used

Right-click, save ...

Technical Details

Both views differ in both colors and font-style, within the HTML part and the SVG part.

CSS-Links

Both files share the same SVG-code, but have different references to style-sheet files.
Within the header of the HTML-file one can read:

<link href="styles_austria_1.css" rel="stylesheet" TYPE="text/css">
This is the well-known reference to an external style-sheet file.

Within the header of the SVG-file one can read:

<?xml-stylesheet href="styles_austria_1.css" type="text/css"?>
Here we deal with an XML-conform reference to a style-sheet-file. Note that this needs to be placed before the <svg> tag.

CSS-File

In the centralized CSS-file one can format the HTML-elements ore one can define new styles with their own name.

The entry .str0 {stroke:#DA251D;stroke-width:55;color:#DA251D}
defines color and stroke-width of the country-borders of the map, but also the color of the word "Austria" within the text, what means, that also stroke-widths can be defined with external style-sheet files.

Within the SVG-file one defines within the statement
<path class="fil0 str0" d="M2196 757c-18,-18 -50 ... ">
the line color with the statement str0. In a similar way one can deal with text objects.

Centralized styles without an external file:

The style-sheet definitions can also be defined within a special sector of the header. This works within CDATA section or ENTITY-definitions in the SVG header.

Example as CDATA:

<?xml version="1.0" encoding="iso-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" 
                                       "https://www.w3.org/TR/SVG/DTD/svg10.dtd">
<svg width="350px" height="176px"  
                                    viewBox="-2361 0 4625 2336" id="cont"
     xmlns="https://www.w3.org/2000/svg" 
                                     xmlns:xlink="https://www.w3.org/1999/xlink">
 <defs>
  <style type="text/css">
   <![CDATA[
    .str0 {stroke:#DA251D;stroke-width:21}
    .fil0 {fill:none}
    .fil2 {fill:#1F1A17}
    .fnt1 {font-weight:normal;font-size:125;font-family:Arial}
    .fnt0 {font-weight:normal;font-size:139;font-family:Arial;
                                                         text-decoration:underline}
   ]]>
  </style>
 </defs>
 <g ...>
 ...
<path class="str0" d="M166.639,1394.512"/>

Example as ENTITY:

<?xml version="1.0" encoding="iso-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" 
                                          "https://www.w3.org/TR/SVG/DTD/svg10.dtd" [
  <!ENTITY st6 "font-size:17.4325;">
  <!ENTITY st7 "font-size:31.797;">
  <!ENTITY st8 "fill-rule:evenodd;clip-rule:evenodd;fill:#000000;stroke:none;">
  <!ENTITY st9 "fill-rule:evenodd;clip-rule:evenodd;fill:#1E2C90;stroke:none;">
  <!ENTITY st28 "fill:#FFFFFF;">
]>
<svg viewBox="... >
...
<path style="&st8;" d="M166.639,1394.512"/>

Styles on objects

We also have the possibility not to centralize the style-sheet definitions, but define them directly within the element tag we would like to change. In this case the statement looks like the following:

<rect style="fill:none;stroke:rgb(123,45,67)" ... />.

This notation has no particular advantage and is not recommended. It neither supports centralized classes, nor is it easy to change per script.

Presentation Attributes

When adding interactivity (like color changes on mouse events) it may be better having styles defined as individual attributes. In this case you just set the attribute fill to something else and the other values stay untouched. With the style attribute that contains multiple styling parameters this is not that easy. This is the preferred way if one doesn't use CSS classes and definitely the preferred way in SVG tiny.

<rect fill="none" stroke="rgb(123,45,67)" ... />.

Also see www.w3.org/TR/SVG/styling.html

carto:papers:svg:examples:basic:styles