External Stylesheets handling

As specified in the SVG standard, external Stylesheets can be used for svg styling.

You can either declare the css file:

• In an xml processing instruction
• In a link element

For example:

   <svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
   width="210mm" height="297mm" viewBox="0 0 744.09448819 1052.3622047" version="1.1">
      <link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="style.css" type="text/css" />  
      <g>
         <circle class="circle" cx="86.428566" cy="84.505058" r="70.714287" />
      </g>
   </svg>

With the following css file:

   .circle {
      -fx-fill: Green;
      -fx-stroke: Red;
   }

Limitations

The names of the css properties in the css file must be those which are defined in the JavaFX CSS specification.

For example:

• Rather than fill, you must use the -fx-fill property name
• Rather than stroke, you must use the -fx-stroke property name

Examples

The following examples use this css:

   .circle {
      -fx-fill: Green;
      -fx-stroke: Red;
   }

Example declaring the stylesheet as a processing instruction

   <?xml-stylesheet href="style.css" type="text/css"?>
   <svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
   width="210mm" height="297mm" viewBox="0 0 744.09448819 1052.3622047" version="1.1"> 
      <g>
         <circle class="circle" cx="86.428566" cy="84.505058" r="70.714287" />
      </g>
   </svg>

Example using an html link element

   <svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
   width="210mm" height="297mm" viewBox="0 0 744.09448819 1052.3622047" version="1.1">
      <link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="style.css" type="text/css" />  
      <g>
         <circle class="circle" cx="86.428566" cy="84.505058" r="70.714287" />
      </g>
   </svg>