Overview of SVG structure

This example shows a typical minimal SVG file that renders a shape—in this case, a rounded rectangle with a red solid fill and a blue border.

Copy 
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1"
    xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    width="200" 
    height="200">
  <rect x="50" 
      y="25" 
      rx="5" 
      ry="5" 
      width="100" 
      height="125" 
      style="fill:red;stroke:blue" />
</svg> 

This SVG file has the following elements:

  • The <?xml version="1.0" encoding="utf-8"?> XML declaration provides the version and encoding information. For FileMaker Pro, UTF-8 encoding is preferred and UTF-16 is not supported.

  • One svg root element with the following attributes:

    • version – the SVG version to which the document conforms.

    • xmlns="http://www.w3.org/2000/svg" – a namespace declaration that identifies that all SVG elements belong to the SVG namespace.

    • xmlns:xlink="http://www.w3.org/1999/xlink" – a namespace declaration that allows an SVG file to contain internal links (such as elements under defs).

    • width – the width of the image’s viewport in the current user coordinate system.

    • height – the height of the image’s viewport in the current user coordinate system.

  • Graphical elements (child elements of svg), such as rect, that describe the various shapes and properties of the image contents.

In general, a graphical element represents a geometric shape and describes how a shape is rendered. It has the following properties:

  • Rendering is defined by several XML attributes.

  • Some attributes specify geometrical information (for example, position, size, and coordinate transform).

  • Some attributes specify display properties information (for example, stroke or fill color).

  • Some attributes can be inherited from their parents (for example, a rect element that is embedded within a g element would inherit a fill color defined for the whole group).