SVG Lib

An SVG library is a specialized library where SVG shapes are used to render the items.

Creating an SVG shape library

Overview

Diagrammer uses SVG to define sprites. Using SVG helps to easily integrate complex shapes into Diagrammer. It also gives the possibility to export a diagram in SVG for printing.

Diagrammer supports a subset of SVG 1.1. Most of the features needed for sprite definitions supported :

Nodes definition

To define sprites, Diagrammer uses extensions to standard SVG. They are defined in the namespace "http://schemas.kapit.fr/svg/2007/". You must add to the <svg>, tag in your library the following attribute: xmlns:k="http://schemas.kapit.fr/svg/2007/" . Each sprite must be defined as a group (<g> tag), with the followings attributes:

SVGLib Example

The fllowing file is an SVG file that contains a two nodes library:
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns:k="http://schemas.kapit.fr/svg/2007/" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.0" width="1024" height="800" id="sgvlib">
  <defs id="defs1">
    <style type="text/css">
      <![CDATA[
.basic {
action-accept:annotation;
}
.bg {
action-click:link;
action-accept:link;
}
.annotation {
font-style:italic;
}
.link-annotation
{
	font-size:12px;
	fill:#666;
}
]]>
    </style>
    <linearGradient id="linearGradient3157">
      <stop id="stop3159" style="stop-color:#e1eaf5;stop-opacity:1" offset="0" />
      <stop id="stop3161" style="stop-color:#c3daea;stop-opacity:1" offset="1" />
    </linearGradient>
    <linearGradient xlink:href="#linearGradient3157" id="linearGradient6627" gradientUnits="userSpaceOnUse" gradientTransform="translate(98.840748,-67.175132)" x1="94.95433" y1="85.235107" x2="94.95433" y2="146.25534" />
  </defs>
  <g
    k:spriteid="rectangle"
    k:groupid="Basic"
    class="basic"
    id="grectangle">
    <rect
       id="rect3155"
       style="fill:url(#linearGradient6627);fill-opacity:1;stroke:#6996cf;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
       x="137.22656"
       y="18.47105"
       rx="0"
       ry="0"
       width="98.994949"
       height="60.609154" />
    <path
       class="bg"
       id="rect31551"
       style="fill:none;fill-opacity:0;stroke:#6996cf;stroke-width:3;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0"
       d="M 137.22656,18.47105 L 236.22151,18.47105 L 236.22151,79.080204 L 137.22656,79.080204 L 137.22656,18.47105 z" />
  </g>
  <g
    k:spriteid="rounded-rectangle"
    k:groupid="Basic"
    id="grrectangle"
    class="basic">
    <rect
      style="fill:#e1eaf5;fill-opacity:0.8;stroke:#6996cf;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
      id="rect3157"
      y="18.47105" x="137.22656"
      rx="10" ry="10"
      height="60.609154" width="98.994949" />
    <path
       class="bg"
       id="rect31552"
       style="fill:none;fill-opacity:0;stroke:#6996cf;stroke-width:3;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0"
       d="M 137.22656,18.47105 L 236.22151,18.47105 L 236.22151,79.080204 L 137.22656,79.080204 L 137.22656,18.47105 z" />
  </g>
</svg>