How to transform custom graphic format to SVG graphics view via XSLT?

Question

I have custom graphic format in xml-like format. I want to arrange nodes, textview and edges as is, definitely. My approach is to use XSL transformations from xml to svg. I'm new to svg format but worked a little with xsl previosuly. I wonder if such a task already solved like graphml to svg feature in yEd. Is there some handy method to make such a transformation?

<?xml version="1.0" encoding="windows-1251"?>
<project version="1.2">
  <calc allowworktime="false" cutoff="0"/>
  <sfc>
    <graphview>
      <nodeview idref="1">
        <properties>
          <color value="#FF000000" name="outline.color"/>
          <rectangle left="165" top="85" right="195" bottom="115" name="bounds"/>
          <color value="#FFFFFFFF" name="fill.color"/>
        </properties>
      </nodeview>
      <edgeview idref="1">
        <properties>
          <color value="#FF000000" name="outline.color"/>
        </properties>
      </edgeview>
      <textview>
        <properties>
          <color value="#00000000" name="outline.color"/>
          <color value="#FF000000" name="label.font.color"/>
          <integer value="8" name="label.font.size"/>
          <rectangle left="176" top="63" right="194" bottom="78" name="bounds"/>
          <string value="Tahoma" name="label.font.family"/>
          <color value="#00000000" name="fill.color"/>
          <integer value="0" name="label.font.style"/>
          <string value="Ë1" name="label.text"/>
        </properties>
      </textview>
    </graphview>
  </sfc>
</project>

I've just created sample xslt that can transform nodeviews to rects, but svg not rendered somehow when opened in inkscape.

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns:xs="http://www.w3.org/2001/XMLSchema"
    xmlns:local="local"
    exclude-result-prefixes="xs"
    version="2.0"
    xmlns:svg="http://www.w3.org/2000/svg">
    <xsl:output indent="yes"/>

    <xsl:template match="/">
        <svg>
        <xsl:apply-templates select="@* | node()"/>
                </svg>

            </xsl:template>

    <xsl:template match="//graphview/nodeview">
        <xsl:variable name="nodeleft" select="properties/rectangle/@left"/>
        <xsl:variable name="noderight" select="properties/rectangle/@right"/>
        <xsl:variable name="nodetop" select="properties/rectangle/@top"/>
        <xsl:variable name="nodebottom" select="properties/rectangle/@bottom"/>
        <!-- adding svg group item -->
        <g>
            <xsl:element name="rect">
                <xsl:attribute name="x"><xsl:value-of select="$nodeleft"/></xsl:attribute>
                <xsl:attribute name="width"><xsl:value-of select="($noderight - $nodeleft)"/></xsl:attribute>
                <xsl:attribute name="height"><xsl:value-of select="($nodetop - $nodebottom)"/></xsl:attribute>
                <xsl:attribute name="y"><xsl:value-of select="($nodetop)"/></xsl:attribute>
            </xsl:element>
        </g>
    </xsl:template>
</xsl:stylesheet>

score 3 · Accepted Answer · answered Nov 02 '16 at 23:00

3

The main problem with your stylesheet is that the elements you are creating are not in the SVG namespace. You can fix that easily by making the SVG namespace the default namespace of the stylesheet - IOW, change this:

xmlns:svg="http://www.w3.org/2000/svg"

to:

xmlns="http://www.w3.org/2000/svg"

The other thing is that your calculation returns a negative height, which is not allowed in SVG.

answered Nov 02 '16 at 23:00

michael.hor257k

113,275
6
33
51

I've changed it, the elements are now to be in svg ns, but the graphics already hided. But I can view it via xml editor in inkscape. – Juriy Nov 02 '16 at 23:08
@Juriy I am not sure what you're trying to say. – michael.hor257k Nov 02 '16 at 23:10
1

@Juriy: This answer covers your two main problems. Consider [**accepting it**](http://meta.stackoverflow.com/q/5234/234215) and then for the rest of your problems, try creating SVG by hand at first that achieves the results you want. It'll then be easier to target that SVG via XSLT. – kjhughes Nov 02 '16 at 23:20

How to transform custom graphic format to SVG graphics view via XSLT?

1 Answers1