Examples

A few examples are given here to show the possibilities of "hand" editing the XML file. Another example was given in the section called “Formatting with the Text and Font Dialog ”.

Adding color to a marker arrow

Markers on paths in Inkscape do not inherit the attributes of the path. This is most noticeable for colored paths where the markers are drawn in black.

To add color to a marker, open up the XML Editor. Select the path with the marker in the canvas window. In the "style" attribute for the line, locate the marker entry (marker-end:url(#Arrow2Lend) for example). Then expand the "<svg:defs>" line by clicking on the triangle at the beginning of the line (if not already expanded). You should see an entry for the marker. Select that entry. The attributes for the marker should be displayed on the right. Select the "style" attribute. Add "fill:#rrggbb" to the attributes in the entry box at the bottom right, where #rrggbb is the RGB color in hexadecimal form (obtainable from the attributes for the path).

The marker should change color. If is doesn't then expand the "<svg:marker>" line. Select the path entry and remove any Fill and/or Stroke paint. For this change to show up you must save and reopen the SVG file.

If you wish to have markers of the same type with different colors then you must add copies in the <svg:defs> section. You can use the Duplicate Node icon to duplicate a marker entry. Rename the new entry to a suitable name and change the reference to the marker in the path object you want the marker to be associated with. Again the file must be closed and reopened for the changes to be seen.

You are not limited to changing color. You can change other attributes such as the marker size.

Line with red arrowhead marker.

A red line with a red marker.

Underlined text

Underlined text can not be added through the normal Inkscape interface, nor will Inkscape display underlines. But you can add underlined text that will be displayed properly by another SVG program.

To underline text, open the XML Editor. Select the text you wish underlined. Go to the "<svg:tspan>" object found inside an "<svg:text>" tag. If you are selecting part of the text, you may need to add some attribute temporarily (color for example) to create a corresponding "tspan" object, the color can be removed later. Add to the style: "text-decoration: underline".

Here is an example as rendered by the Squiggle program.

Underlined text.

Underlined text example.

Gaussian blurs and drop shadows

The SVG standard includes the possibility of applying filters to objects. These filters can be very powerful for producing effects that scale with a drawing. SVG filter support is rather scarce in available viewers. Squiggle and the Adobe plug-in are two viewers that do support filters. Firefox has support in the development version.

Inkscape does not support filters yet. However, filters can be added with the XML Editor. The following two examples show how filters are included in an SVG drawing.

Gaussian Blur.

Text with the Gaussian Blur filter applied.



<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg:svg
   xmlns:svg="http://www.w3.org/2000/svg"
   version="1.0"
   width="300"
   height="150"
   id="svg1316">
  <svg:defs
     id="defs1318">
    <svg:filter          1
       id="MyGaussianBlur">
      <svg:feGaussianBlur          2
         id="feGaussianBlur01"
         stdDeviation="2" />
    </svg:filter>
  </svg:defs>
  <svg:g
     id="layer1">
    <svg:text
       filter="url(#MyGaussianBlur)"          3
       x="150.70312"
       y="68.894531"
       style="font-size:48px;font-weight:bold;text-align:center;text-anchor:middle;
              fill:#9f0000;font-family:Bitstream Vera Sans"
       id="text1328"
       xml:space="preserve"><svg:tspan
         x="150.70312"
         y="68.894531"
         id="tspan1330">Gaussian</svg:tspan><svg:tspan
         x="150.70312"
         y="116.89453"
         id="tspan1332">Blur</svg:tspan></svg:text>
  </svg:g>
</svg:svg>

   

Note that the SVG listing was saved from Inkscape as plain SVG. The line 'filter="url(#MyGaussianBlur)"' was added in a text editor as saving as plain SVG removed the line (BUG). Some unnecessary style parameters were deleted for clarity.

1

Start of filter definition.

2

Inclusion of 'feGaussianBlur' filter with a blurring of two pixel standard deviations. By default the filter applies to the object that calls it (in this case our text object).

3

Reference to filter definition.

Drop Shadow.

Text with the Gaussian Blur filter used to create a drop shadow.


<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg:svg
   xmlns:svg="http://www.w3.org/2000/svg"
   version="1.0"
   width="300"
   height="150"
   id="svg1316">
  <svg:defs
     id="defs1318">
    <svg:filter          1
       filterUnits="userSpaceOnUse"          2
       height="150"
       width="300"
       y="0"
       x="0"
       id="MyDropShadow">
      <svg:feGaussianBlur          3
         in="SourceAlpha"          4
         result="blur"          5
         id="feGaussianBlur"
         stdDeviation="2" />
      <svg:feOffset          6
         dy="3"
         dx="3"
         in="blur"          7
         id="feOffset"
         result="offsetBlur" />
      <svg:feMerge>          8
        <svg:feMergeNode
           in="offsetBlur" />          9
        <svg:feMergeNode
           in="SourceGraphic" />          10
      </svg:feMerge>
    </svg:filter>
  </svg:defs>
  <svg:g
     id="layer1">
    <svg:text
       filter="url(#MyDropShadow)"
       x="150.70312"
       y="68.894531"
       style="font-size:48px;font-weight:bold;text-align:center;
              text-anchor:middle;fill:#9f0000;font-family:Bitstream Vera Sans"
       id="text1328"
       xml:space="preserve"><svg:tspan
         x="150.70312"
         y="68.894531"
         id="tspan1332">Drop</svg:tspan><svg:tspan
         x="150.70312"
         y="116.89453"
         id="tspan1395">Shadow</svg:tspan></svg:text>
  </svg:g>
</svg:svg>

   

Note that the SVG listing was saved from Inkscape as plain SVG. The line 'filter="url(#MyDropShadow)"' was added in a text editor as saving as plain SVG removed the line (BUG). Some unnecessary style parameters were deleted for clarity.

1

Start of filter definition.

2

Area that should be used in filter. This can be used to reduce the resources the filtering process uses by ensuring only the relevant area is filtered.

3

Inclusion of a 'feGaussianBlur' filter.

4

Input for 'feGaussianBlur' filter. The key word SourceAlpha indicates that the input should be the Alpha of the object that calls the filter.

5

Output for 'feGaussianBlur' filter. If an result line is given, the result of the filter can be used as an input to another filter.

6

Inclusion of a 'feOffset' filter. This filter just shifts an object, in this case by three pixels in x and y.

7

Input for 'feOffset' filter. The input is defined to be the output of the 'feGaussianBlur' filter.

8

Inclusion of a 'feMerge' filter. This filter combines objects. The order of the inputs determines the display order.

9

First input for 'feMerge' filter.

10

Second input for 'feMerge' filter. SourceGraphic is a keyword that indicates the calling object should be used as the source.