How can I export Evolus Pencil mockups to SVG?

Question

Evolus Pencil is a powerful FOSS GUI mock-up tool. Unfortunately it doesn't support SVG export out of the box. Is there any way I can still convert my Pencil mock-ups to SVG?

Answer 1

Overview

Turns out there is a way to do this using xsltproc, a command-line xslt-processor. The style-sheet we are going to use was developed by Robert Kosten and released on the issues tracker of the evolus Pencil project page.

Quoted from the bug report:

I would love to have this through the UI, but until then I've written a small XSLT-Sheet that basically only strips everything from the http://www.evolus.vn/Namespace/Pencil namespace (Mostly management data not needed in an export anyway). The resulting file should work fine in Firefox (where the foreignObject tag of SVG is well supported), but libraries like batik (used in apache fop for example) will have trouble with the XHTML, XUL or XLink in it. I intend to extend the sheet to support at least a few of those elements I encounter, but I won't make promises I can't keep ;-)

The file attached can also be found as part of my collection of tools (used to generate DocBook and then PDF for my projects): https://github.com/Robert-Kosten/de.robertkosten.tools/blob/master/xsl/ep2svg.xsl

It is currently under GPLv3, but I'd be willing to release it under GPLv2 so no-one has to invoke "any later version" should anyone wish to include it in their software ;-)

---

Installation

Either download the style sheet from the link above or copy and paste the following passage into a file named ep2svg.xsl:

<?xml version="1.0" encoding="UTF-8"?>
<!--
This file is part of de.robertkosten.tools. de.robertkosten.tools is
free software: you can redistribute it and/or modify it under the terms of
the GNU General Public License as published by the Free Software Foundation,
either version 3 of the License, or (at your option) any later version.
de.robertkosten.tools is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General
Public License for more details. You should have received a copy of the GNU
General Public License along with de.robertkosten.tools. If not, see
<http://www.gnu.org/licenses/>.

I suggest calling this with:
xsltproc -o dir/ ep2svg.xsl input.ep

@author Robert Kosten
-->
<xsl:stylesheet version="1.0" extension-element-prefixes="exsl" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns="http://www.w3.org/2000/svg" xmlns:p="http://www.evolus.vn/Namespace/Pencil" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xi="http://www.w3.org/2001/XInclude" xmlns:exsl="http://exslt.org/common">
    <xsl:output omit-xml-declaration="yes" />
    <xsl:strip-space elements="p:Document p:Pages p:Page"/>

    <xi:include href="includes/tools.xsl" />

    <xsl:template match="/p:Document">
        <xsl:apply-templates />
    </xsl:template>

    <xsl:template match="p:Pages">
        <xsl:apply-templates />
    </xsl:template>

    <xsl:template match="p:Page">
        <exsl:document href="{p:Properties/p:Property[@name='name']}.svg" method="xml" version="1.0" encoding="utf-8" doctype-public="-//W3C//DTD SVG 1.1//EN" doctype-system="http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" media-type="image/svg+xml">
            <svg version="1.1">
                <xsl:apply-templates />
            </svg>
        </exsl:document>
    </xsl:template>

    <xsl:template match="p:Content">
        <xsl:apply-templates />
    </xsl:template>

    <xsl:template match="*[namespace-uri() != 'http://www.evolus.vn/Namespace/Pencil']">
        <xsl:copy>
            <xsl:copy-of select="@*[namespace-uri() != 'http://www.evolus.vn/Namespace/Pencil']" />
            <xsl:apply-templates />
        </xsl:copy>
    </xsl:template>

    <xsl:template match="*">
        <!-- Void -->
    </xsl:template>

</xsl:stylesheet>

Save the following script as ep2svg.sh:

#!/bin/bash

# converts evol.us Pencil mockup files to svg
# (c) 2013 Glutanimate (http://askubuntu.com/users/81372/)
# released under GNU GPL v2
# XSL source: (c) 2013 Robert Kosten (https://code.google.com/p/evoluspencil/issues/detail?id=260#c1)

XSLFILE="./ep2svg.xsl"
WORKINGDIR=$(dirname "$1")


xsltproc -o "$WORKINGDIR"/ "$XSLFILE" "$@"

Make sure to point XSLFILE to the right location.

Usage:

ep2svg.sh <mockup1.ep> <mockup2.ep> ...

Answer 2

If you are using the mockups with Java and maven developmnet you can use the maven plugin pencil2svg-maven-plugin.