Using Style Sheets

SVG drawings can use CSS (Cascading Style Sheets) to control the presentation of the drawing objects. Support for style sheets is in its infancy in Inkscape. One can, however, do a few simple useful things. At the moment, Inkscape can handle only an internal style sheet. External style sheets cannot be used.

In the following example, a CSS is used to change the opacity of the blue square whenever the mouse cursor passes over it (when the drawing is displayed in an SVG-enabled browser).

Styled square example.
A simple SVG styled with CSS.
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   version="1.1"
   width="150"
   height="150">
  <style type="text/css">     1
   rect:hover {fill-opacity:1.0}     2
  </style>
  <a xlink:href="http://www.w3.org/"
     style="fill-opacity:0.75">     3
    <rect
     width="90"
     height="90"
     x="30"
     y="30"
     style="fill:#0000ff;stroke:#000000"/>     4
  </a>
</svg>
  

1

Style sheet start.

2

Rectangle's hover (i.e., when the mouse cursor is above the rectangle) declaration.

3

Rectangle's default opacity.

4

Rectangle's style. Note that fill-opacity is not defined here. This allows the attribute to be overridden.

The style attribute can either be added through a text editor or with a bit of difficulty through the Inkscape XML Editor (Edit icon XML Editor... (Shift+Ctrl+X)) dialog. The fill-opacity attribute must be moved from the rectangle and put into a wrapper of the rectangle (in this case the <a> tag).

Steps to add a style sheet via the XML Editor dialog:

  1. Open the XMLEdit dialog.

  2. Select the top-level entry <svg:svg>.

  3. Click on New element node icon icon.

  4. Enter svg:style into entry box; click Create button.

  5. Drag new node above first <svg:g> (layer1).

  6. Select <svg:style> node.

  7. Enter type into Attribute entry line (middle of dialog).

  8. Enter text/css into Value entry area (bottom of dialog).

  9. Click Set button.

  10. Click on New text node icon icon.

  11. Enter: rect:hover {fill-opacity:1.0;} on right, with a carriage return before and after (which suppresses the quotes).

  12. Click on triangle to open <svg:g id="layer1"> node.

  13. Click on triangle to open <svg:a> node.

  14. Select rectangle, select style attribute, select fill-opacity:0.75; and cut (Ctrl+X).

  15. Select <svg:a> node, add style to Attribute entry line, paste (Ctrl+V) "fill-opacity:0.75" into the Value entry area.

  16. Save, but do NOT save as a plain SVG file as this removes the hover attribute from the CSS style node. (Bug)