SVG Import
From Synfig Studio :: Documentation
m ({{TOCright}}) |
m (→Import SVG directly in Synfig Studio: new version -+--> previous version) |
||
| Line 29: | Line 29: | ||
'''Since version 0.91 of Inkscape (linux and windows) it is unnecessary to use additional extension, Inkscape includes the registration under the extension SIF .''' | '''Since version 0.91 of Inkscape (linux and windows) it is unnecessary to use additional extension, Inkscape includes the registration under the extension SIF .''' | ||
| − | From | + | From previous Synfig versions there is an option to import SVG from {{c|<File>|Import}} menu. This seems to work better than the options described below, however there may be problems importing some SVG elements correctly. See [http://synfig.org/forums/viewtopic.php?f=12&t=2728 this topic] in forums for some hints. |
* First import may fail, try to import same file for two times. | * First import may fail, try to import same file for two times. | ||
Revision as of 14:08, 31 March 2016
Inkscape SIF exporter extension
The Inkscape extension converts SVG files to Synfig Studio (.sif) format and it is a recommended way.
Since Inkscape 0.91 the extension is shipped with the official Inkscape installation and can be found from - "<File> → <Save as> → Animation synfig (.sif)".
If you want to manually install it, you can found it at Scripts & Tools download section.
Usage
svg2sif adds a "Synfig Animation (*.sif)" option to Inkscape's "Save As" dialog.
I you want to group objects, put all the objects to group on their own layer in inkscape. This way, they end up in a Group Layer once in the sif format.
If your SVG document contains clones or non-paths (text, rectangles, etc.) the extension will quickly open another Inkscape window to convert these elements to paths. This may take a while. The file is not saved until the status bar reads "Document Saved."
If you save frequently, you can speed up the process by selecting "<Extensions> → Synfig → Prepare for Export" from the Inkscape menu. This will convert everything in the current document to paths (but may make it harder to edit).
Source : github/svg2sif/README.md
Import SVG directly in Synfig Studio
Since version 0.91 of Inkscape (linux and windows) it is unnecessary to use additional extension, Inkscape includes the registration under the extension SIF .
From previous Synfig versions there is an option to import SVG from "<File> → Import" menu. This seems to work better than the options described below, however there may be problems importing some SVG elements correctly. See this topic in forums for some hints.
- First import may fail, try to import same file for two times.
- 0.62.02 is reported to work better in Ubuntu than version 0.63.00.
Other options
The following are outdated options or special options for experts.
Option 1
This uses an XSLT 2.0 stylesheet to transform SVG XML to Synfig XML.
Objective
Turn an SVG image into a Synfig file for import. First posted in the forums: http://synfig.org/forums/viewtopic.php?t=30
Prerequisites
- Make sure a Java runtime environment is installed.
- Get a recent version of the SAXON XSLT processor for Java from http://saxon.sourceforge.net/. Recommended version: Saxon-SA 9.0 (saxonsa9-0-0-2j.zip).
- Extract the SAXON package to a folder of your choice. As an example we're going to use d:\saxon in the following. The folder will contain several JAR files.
- Create the file d:\saxon\svg2synfig.xsl with the content provided at the bottom of this document ([[#svg2synfig.xsl|]]).
Optional Prerequites for Windows
If you don't want to use the command line, create a batch file d:\saxon\svg2synfig.bat with this content:
@java -jar %0\..\saxon9.jar -xsl:%0\..\svg2synfig.xsl %1 > %0\..\synfig.sif @pause
Transforming an SVG into a Synfig File
Windows Batch File
- Just drop the SVG file onto svg2synfig.bat.
Command line
- Change directory to d:\saxon.
- Enter the following command (replace your_input.svg by the path of the SVG file):
java -jar saxon9.jar -xsl:svg2synfig.xsl your_input.svg > synfig.sif
Result
If the conversion has been successful, the result will be written to the file d:\saxon\synfig.sif. You can open this file in Synfig.
Limitations
- Doesn't seem to work with SaxonB (FOSS version)
- Compressed SVG (svgz) must be uncompressed first.
- Only SVG path objects are supported. Try converting all objects to paths.
- Only a subset of path elements is supported. Try to modify all path nodes to have split tangents, and all path segments to be curves.
- Sophisticated coloring (e. g. gradients) is not supported.
- Only basic transformations are supported.
- Fill and outline on the same object is not supported.
svg2synfig.xsl
<xsl:stylesheet version="2.0" exclude-result-prefixes="#all"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns:xs="http://www.w3.org/2001/XMLSchema"
xmlns:math="http://exslt.org/math">
<xsl:output method="xml" indent="yes" encoding="UTF-8"/>
<xsl:template match="/">
<xsl:apply-templates/>
</xsl:template>
<xsl:template match="svg:svg">
<xsl:variable name="width" select="math:units_to_px(@width)"/>
<xsl:variable name="height" select="math:units_to_px(@height)"/>
<xsl:variable name="has_view_box" select="matches(@viewBox, '(\d+\s){3}\d+')"/>
<canvas version="0.2" id="{@id}"
width="{if ($has_view_box) then replace(@viewBox, '(\d+)\s(\d+)\s(\d+)\s(\d+)', '$3') else $width}"
height="{if ($has_view_box) then replace(@viewBox, '(\d+)\s(\d+)\s(\d+)\s(\d+)', '$4') else $height}"
view-box="{if ($has_view_box) then @viewBox else concat('0 0 ', $width, ' ', $height)}">
<xsl:apply-templates select="svg:g|svg:svg|svg:path"/>
</canvas>
</xsl:template>
<xsl:template match="svg:g">
<layer type="PasteCanvas" active="true" version="0.1" desc="{@id}">
<param name="canvas">
<canvas>
<xsl:apply-templates/>
</canvas>
</param>
</layer>
</xsl:template>
<xsl:template match="svg:path">
<xsl:variable name="style">
<xsl:for-each select="ancestor-or-self::*">
<xsl:sort select="position()" data-type="number" order="descending"/>
<xsl:value-of select="concat(@style, ';fill:', @fill, ';stroke:', @stroke, ';stroke-width:', @stroke-width, ';')"/>
</xsl:for-each>
</xsl:variable>
<xsl:variable name="self" select="."/>
<xsl:variable name="is_fill" select="not(matches(replace($style, 'fill:[^n;][^o].*', ''), 'fill:none'))"/>
<xsl:analyze-string select="@d" regex="m[^z]+(z|$)" flags="i">
<xsl:matching-substring>
<layer type="{if ($is_fill) then 'region' else 'outline'}" version="0.1" desc="{$self/@id}">
<xsl:call-template name="style-to-color">
<xsl:with-param name="style" select="replace(replace($style, ':none.*', ''), if ($is_fill) then '.*fill:([^;]+).*' else '.*stroke:([^;]+).*', '$1')"/>
</xsl:call-template>
<xsl:if test="not ($is_fill)">
<xsl:call-template name="style-to-width">
<xsl:with-param name="style" select="replace($style, '.*stroke-width:([^;]+).*', '$1')"/>
</xsl:call-template>
</xsl:if>
<param name="bline">
<bline type="bline_point" loop="{matches(., 'z', 'i')}">
<xsl:call-template name="path-to-bline">
<xsl:with-param name="path" select="."/>
<xsl:with-param name="node" select="$self" tunnel="yes"/>
</xsl:call-template>
</bline>
</param>
</layer>
</xsl:matching-substring>
</xsl:analyze-string>
</xsl:template>
<xsl:template name="path-to-bline">
<xsl:param name="path"/>
<xsl:variable name="stripped" select="replace(replace(translate($path, ',', ' '), '(\d)-', '$1 -'), '\s*([a-z]+)\s*', '$1', 'i')"/>
<xsl:variable name="closed" select="if (matches($stripped, 'z', 'i')) then $stripped else replace($stripped, 'm([-\d.]+\s[-\d.]+).*$', '$0l$1z', 'i')"/>
<xsl:variable name="tmp" select="replace($closed, '([-\d.]+\s[-\d.]+)l([-\d.]+\s[-\d.]+)', '$1c$1 $2 $2', 'i')"/>
<xsl:variable name="curve" select="replace($tmp, '([-\d.]+\s[-\d.]+)l([-\d.]+\s[-\d.]+)', '$1c$1 $2 $2', 'i')"/>
<xsl:analyze-string select="$curve" regex="\s([-\d.]+\s[-\d.]+)\s[-\d.]+\s[-\d.]+z" flags="i">
<xsl:matching-substring>
<xsl:analyze-string select="concat(regex-group(1), $curve)" regex="([-\d.]+)\s([-\d.]+)[m\s]([-\d.]+)\s([-\d.]+)c([-\d.]+)\s([-\d.]+)" flags="i">
<xsl:matching-substring>
<xsl:call-template name="node-to-bline-point">
<xsl:with-param name="c1_x" select="regex-group(1)"/>
<xsl:with-param name="c1_y" select="regex-group(2)"/>
<xsl:with-param name="x" select="regex-group(3)"/>
<xsl:with-param name="y" select="regex-group(4)"/>
<xsl:with-param name="c2_x" select="regex-group(5)"/>
<xsl:with-param name="c2_y" select="regex-group(6)"/>
</xsl:call-template>
</xsl:matching-substring>
</xsl:analyze-string>
</xsl:matching-substring>
</xsl:analyze-string>
</xsl:template>
<xsl:template name="node-to-bline-point">
<xsl:param name="x"/>
<xsl:param name="y"/>
<xsl:param name="c1_x"/>
<xsl:param name="c1_y"/>
<xsl:param name="c2_x"/>
<xsl:param name="c2_y"/>
<xsl:param name="node" tunnel="yes"/>
<xsl:variable name="transform">
<xsl:for-each select="$node/ancestor-or-self::*/@transform">
<xsl:value-of select="."/>
</xsl:for-each>
</xsl:variable>
<xsl:variable name="t" select="math:resolve_transform($transform)"/>
<xsl:variable name="transformed_x" select="$t[5] + $t[1] * xs:float($x) + $t[3] * xs:float($y)"/>
<xsl:variable name="transformed_y" select="$t[6] + $t[2] * xs:float($x) + $t[4] * xs:float($y)"/>
<xsl:variable name="transformed_c1_x" select="$t[5] + $t[1] * xs:float($c1_x) + $t[3] * xs:float($c1_y)"/>
<xsl:variable name="transformed_c1_y" select="$t[6]+ $t[2] * xs:float($c1_x) + $t[4] * xs:float($c1_y)"/>
<xsl:variable name="transformed_c2_x" select="$t[5] + $t[1] * xs:float($c2_x) + $t[3] * xs:float($c2_y)"/>
<xsl:variable name="transformed_c2_y" select="$t[6]+ $t[2] * xs:float($c2_x) + $t[4] * xs:float($c2_y)"/>
<entry>
<composite type="bline_point">
<point>
<vector>
<x><xsl:value-of select="$transformed_x"/></x>
<y><xsl:value-of select="$transformed_y"/></y>
</vector>
</point>
<width>
<real value="1"/>
</width>
<origin>
<real value="0.5"/>
</origin>
<split>
<bool value="true"/>
</split>
<t1>
<xsl:call-template name="vector-pair-to-radial">
<xsl:with-param name="origin-x" select="$transformed_c1_x"/>
<xsl:with-param name="origin-y" select="$transformed_c1_y"/>
<xsl:with-param name="x" select="$transformed_x"/>
<xsl:with-param name="y" select="$transformed_y"/>
</xsl:call-template>
</t1>
<t2>
<xsl:call-template name="vector-pair-to-radial">
<xsl:with-param name="origin-x" select="$transformed_x"/>
<xsl:with-param name="origin-y" select="$transformed_y"/>
<xsl:with-param name="x" select="$transformed_c2_x"/>
<xsl:with-param name="y" select="$transformed_c2_y"/>
</xsl:call-template>
</t2>
</composite>
</entry>
</xsl:template>
<xsl:template name="vector-pair-to-radial">
<xsl:param name="x"/>
<xsl:param name="y"/>
<xsl:param name="origin-x"/>
<xsl:param name="origin-y"/>
<xsl:variable name="dx" select="xs:float($x) - xs:float($origin-x)"/>
<xsl:variable name="dy" select="xs:float($y) - xs:float($origin-y)"/>
<xsl:variable name="d" select="math:sqrt($dx * $dx + $dy * $dy)"/>
<xsl:variable name="angle" select="math:atan2($dy, $dx)"/>
<radial_composite type="vector">
<radius>
<real value="{$d * 3}"/>
</radius>
<theta>
<angle value="{$angle * 57.295779513082320876798154814105}"/>
</theta>
</radial_composite>
</xsl:template>
<xsl:template name="style-to-width">
<xsl:param name="style"/>
<xsl:if test="matches($style, '^\d')">
<param name="width">
<real value="{math:units_to_px($style)}"/>
</param>
</xsl:if>
</xsl:template>
<xsl:template name="style-to-color">
<xsl:param name="style"/>
<xsl:if test="matches($style, '#')">
<xsl:analyze-string select="concat($style, ';')" regex="#([\da-f]{{2}})([\da-f]{{2}})([\da-f]{{2}});">
<xsl:matching-substring>
<param name="color">
<color>
<r><xsl:value-of select="math:hex_to_color(regex-group(1))"/></r>
<g><xsl:value-of select="math:hex_to_color(regex-group(2))"/></g>
<b><xsl:value-of select="math:hex_to_color(regex-group(3))"/></b>
<a><xsl:value-of select="if (matches($style, 'fill-opacity:')) then math:power(xs:float(replace($style, '.*fill-opacity:([-\d.]+).*', '$1')), 1 div 2.2) else 1"/></a>
</color>
</param>
</xsl:matching-substring>
</xsl:analyze-string>
</xsl:if>
<xsl:if test="matches($style, 'rgb')">
<xsl:analyze-string select="concat($style, ';')" regex="rgb[(\s]+([-\d.]+)[,\s]+([-\d.]+)[,\s]+([-\d.]+)[\s)]+;">
<xsl:matching-substring>
<param name="color">
<color>
<r><xsl:value-of select="math:power(xs:float(regex-group(1)) div 255, 2.2)"/></r>
<g><xsl:value-of select="math:power(xs:float(regex-group(2)) div 255, 2.2)"/></g>
<b><xsl:value-of select="math:power(xs:float(regex-group(3)) div 255, 2.2)"/></b>
<a>1</a>
</color>
</param>
</xsl:matching-substring>
</xsl:analyze-string>
</xsl:if>
<xsl:if test="matches($style, 'url')">
<param name="color">
<color><r>0.5</r><g>0.5</g><b>0.5</b><a>0.5</a> </color>
</param>
</xsl:if>
</xsl:template>
<xsl:function name="math:resolve_transform">
<xsl:param name="transform"/>
<xsl:variable name="stripped" select="replace(replace($transform, 'translate\(', 'X(1,0,0,1,'), 'matrix', 'X')"/>
<xsl:analyze-string select="concat('X(1,0,0,1,0,0)', $stripped)" regex="(.*)X\((-?[\d.]+),(-?[\d.]+),(-?[\d.]+),(-?[\d.]+),(-?[\d.]+),(-?[\d.]+)\)[^X]*X\((-?[\d.]+),(-?[\d.]+),(-?[\d.]+),(-?[\d.]+),(-?[\d.]+),(-?[\d.]+)\).*">
<xsl:non-matching-substring>
<xsl:sequence select="(1,0,0,1,0,0)"/>
</xsl:non-matching-substring>
<xsl:matching-substring>
<xsl:variable name="a2" select="xs:float(regex-group(8))"/>
<xsl:variable name="b2" select="xs:float(regex-group(9))"/>
<xsl:variable name="c2" select="xs:float(regex-group(10))"/>
<xsl:variable name="d2" select="xs:float(regex-group(11))"/>
<xsl:variable name="e2" select="xs:float(regex-group(12))"/>
<xsl:variable name="f2" select="xs:float(regex-group(13))"/>
<xsl:variable name="a1" select="xs:float(regex-group(2))"/>
<xsl:variable name="b1" select="xs:float(regex-group(3))"/>
<xsl:variable name="c1" select="xs:float(regex-group(4))"/>
<xsl:variable name="d1" select="xs:float(regex-group(5))"/>
<xsl:variable name="e1" select="xs:float(regex-group(6))"/>
<xsl:variable name="f1" select="xs:float(regex-group(7))"/>
<xsl:variable name="p" select="($a1*$a2+$c1*$b2,$b1*$a2+$d1*$b2,$a1*$c2+$c1*$d2,$b1*$c2+$d1*$d2,$a1*$e2+$c1*$f2+$e1,$b1*$e2+$d1*$f2+$f1)"/>
<xsl:variable name="remainder" select="replace(regex-group(1), 'X\(1,0,0,1,0,0\)', '')"/>
<xsl:choose>
<xsl:when test="matches($remainder, 'X')">
<xsl:variable name="recursion" select="concat($remainder, 'X(', $p[1], ',', $p[2], ',', $p[3], ',', $p[4], ',', $p[5], ',', $p[6], ')')"/>
<xsl:sequence select="math:resolve_transform($recursion)"/>
</xsl:when>
<xsl:otherwise>
<xsl:sequence select="$p"/>
</xsl:otherwise>
</xsl:choose>
</xsl:matching-substring>
</xsl:analyze-string>
</xsl:function>
<xsl:function name="math:hex_to_color" as="xs:float">
<xsl:param name="hex"/>
<xsl:value-of select="math:power(xs:float(string-length(substring-before('0123456789abcdef', substring($hex,1,1))) * 16 + string-length(substring-before('0123456789abcdef', substring($hex,2,1)))) div 255, 2.2)"/>
</xsl:function>
<xsl:function name="math:units_to_px" as="xs:float">
<xsl:param name="size"/>
<xsl:analyze-string select="$size" regex="^([-\d.]+)([a-z%]*)$">
<xsl:matching-substring>
<xsl:variable name="factor">
<xsl:choose>
<xsl:when test="regex-group(2) = 'pt'">1.25</xsl:when>
<xsl:when test="regex-group(2) = 'em'">16</xsl:when>
<xsl:when test="regex-group(2) = 'mm'">3.54</xsl:when>
<xsl:when test="regex-group(2) = 'pc'">15</xsl:when>
<xsl:when test="regex-group(2) = 'cm'">35.43</xsl:when>
<xsl:when test="regex-group(2) = 'in'">90</xsl:when>
<xsl:otherwise>1</xsl:otherwise>
</xsl:choose>
</xsl:variable>
<xsl:value-of select="xs:float($factor) * xs:float(regex-group(1))"/>
</xsl:matching-substring>
</xsl:analyze-string>
</xsl:function>
</xsl:stylesheet>
Option 2
This is a C program by akagogo that uses libxml to convert SVG to Synfig format.
http://none.carlos.googlepages.com/svgtosif.zip
Installation
Just make the usual ./configure && make && sudo make install
Usage
The SVG files needs to be inside a folder called data. You have to run the command from the parent directory, but just using the name file as the command argument. So if:
- You are in folder "/example" you have to create a folder called "/example/data" and put the file "file.svg" there.
- Now you execute svgtosif file.svg when you got "/example" as your current working directory.
As you can see, this is really not to friendly. To quickly fix the problem, use the following bash script:
#!/bin/bash mkdir data cp "$1" data/ /usr/local/bin/svgtosif "$1" NAME=`echo "$1" | cut -d "." -f 1` cp "data/$NAME.sif" . rm data/* rmdir data echo "Conversion complete!"
Put those lines in a file named "svg2sif" (name it as you want, but avoid using "svgtosif") and put it in a PATH directory (suggest /usr/bin). Then:
chmod +x /usr/bin/svg2sif
Thats all. Now use:
svg2sif <file.svg>
and you will get a .sif file in the same folder you are working in.
