Using Style Sheets

Inkscape » SVG and the Web » 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).


<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   version="1.0"
   width="150"
   height="150"
   id="svg1341">
  <defs
     id="defs1343" />
  <style     
     id="style1324"
     type="text/css">
     rect:hover {fill-opacity:1.0;}     
  </style>
  <g
     id="layer1">
    <a
       xlink:href="http://www.w3.org/"
       style="fill-opacity:0.75"     
       id="a1445">
      <rect
         width="90"
         height="90"
         x="30"
         y="30"
         style="fill:#0000ff;stroke:#000000;stroke-width:1px"     
         id="rect1353" />
    </a>
  </g>
</svg>

	Style sheet start.
	Rectangle's hover (i.e., when the mouse cursor is above the rectangle) declaration.
	Rectangle's default opacity.
	Rectangle's style. Note that “fill-opacity” is not defined here. This allows class attributes 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 → XML Editor... (Shift+Ctrl+X)) dialog. The fill-opacity attribute must be moved from the rectangle and put into a wrapper of the rectangle.

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

Open the XMLEdit dialog.
Select the top-level entry <svg:svg>.
Click on New element node icon.
Enter “svg:style” into entry box; click Create button.
Drag new node above first <svg:g> (layer1).
Select <svg:style> node.
Enter “type” into Attribute entry line (middle of dialog).
Enter “text/css” into Value entry area (bottom of dialog).
Click Set button.
Click on New text node icon.
Enter: “rect:hover {fill-opacity:1.0;}” on right, with a carriage return before and after (which suppresses the quotes).
Click on triangle to open <svg:g id="layer1"> node.
Click on triangle to open <svg:a> node.
Select rectangle, select style attribute, select “fill-opacity:0.75;” and cut (Ctrl+X).
Select <svg:a> node, add “style” to Attribute entry line, paste (Ctrl+V) "fill-opacity:0.75" into the Value entry area.
Save, but do NOT save as a plain SVG file as this removes the “hover” attribute from the CSS style node. (Bug)


Adding Links		Simple Animation