Import d'images Inkscape (SVG)

From Synfig Studio :: Documentation
Jump to: navigation, search
m (remove tutos cats)
m (adding a link)
 
Line 26: Line 26:
  
 
= Import direct de fichiers SVG dans Synfig Studio =
 
= Import direct de fichiers SVG dans Synfig Studio =
'''Depuis la version 0.91 de Inkscape (linux et windows) il est inutile d'utiliser l'extension additionnel, Inkscape intègre l'enregistrement sous l'extension SIF .'''
+
'''Depuis la version 0.91 de Inkscape (linux et windows) il est inutile d'utiliser l'extension additionnel, Inkscape [https://inkscape.org/fr/apprendre/animation/#programmes-indpendants intègre] l'enregistrement sous l'extension SIF .'''
  
 
Depuis la version 0.62.02 de Synfig, une option permet l'import SVG dans le menu du canevas {{c|Fichier|Importer}}. Cela semble mieux fonctionner que les options décrites ci-après, toutefois il peut y avoir des problèmes lors de l'importation de certains éléments SVG. Allez voir [http://synfig.org/forums/viewtopic.php?f=12&t=2728 ce sujet] sur les forums pour avoir des conseils.
 
Depuis la version 0.62.02 de Synfig, une option permet l'import SVG dans le menu du canevas {{c|Fichier|Importer}}. Cela semble mieux fonctionner que les options décrites ci-après, toutefois il peut y avoir des problèmes lors de l'importation de certains éléments SVG. Allez voir [http://synfig.org/forums/viewtopic.php?f=12&t=2728 ce sujet] sur les forums pour avoir des conseils.

Latest revision as of 06:40, 6 September 2016

Languages Language: 

English • español • français • italiano • română • русский


Navigation Navigation:  Manuel>>


Extension Inkscape d'export SIF

Cette extension d'Inkscape convertit les fichiers SVG au format Synfig Studio (.sif) et c'est la méthode recommandée.

Depuis la version 0.91 d'Inkscape, l'extension est installé par défaut dans la version officiel. Pour y accéder depuis Inkscape : "<File> → <Save as> → Animation synfig (.sif)".

Si vous voulez installer manuellement l'extension, vous la trouverez dans la section téléchargement de Scripts & Tools.

Utilisation

svg2sif ajoute une option "Synfig Animation (*.sif)" à la boîte de dialogue "Save As" (Enregistrer-Sous) d'Inkscape.

Si vous voulez grouper des objets, dans Inkscape, ranger les par calques. De cette façon, ils apparaîtront dans un calque Groupe un fois dans le format sif.

Si votre document SVG contient des clones ou des objets qui ne sont pas des chemins (non-path), text, rectangles, etc... l'extension ouvrira une autre fenêtre Inkscape afin que vous puissiez convertir ces objets en chemins. L'export peut prendre du temps. Le fichiers ne sera pas enregistrer tant que la phrase "Document Saved" ne seras pas apparut dans la barre de status.

Si vous utilisez fréquemment l'extension d'export, vous pouvez accélérer le processus en sélectionnant "<Extensions> → Synfig → Prepare for Export" depuis le menu d'Inkscape. Cela aura pour effet de convertir tout les objets du document en chemin (en revanche, cela peut rendre plus complexe l’édition dans Synfig)

Source : github/svg2sif/README.md

Import direct de fichiers SVG dans Synfig Studio

Depuis la version 0.91 de Inkscape (linux et windows) il est inutile d'utiliser l'extension additionnel, Inkscape intègre l'enregistrement sous l'extension SIF .

Depuis la version 0.62.02 de Synfig, une option permet l'import SVG dans le menu du canevas "Fichier → Importer". Cela semble mieux fonctionner que les options décrites ci-après, toutefois il peut y avoir des problèmes lors de l'importation de certains éléments SVG. Allez voir ce sujet sur les forums pour avoir des conseils.

Notes :

  • Le premier import peut échouer ; essayez d'importer le même fichier plusieurs fois.
  • 0.62.02 semble mieux fonctionner sous Ubuntu que la version 0.63.00

Autres méthodes

Ce qui suit présente des méthodes anciennes ou spéciales pour les experts.

Méthode 1

Cette méthode utilise les feuilles de style XSLT 2.0 pour transformer le XML SVG en XML Synfig.

But

Transformer une image SVG en un fichier Synfig pour l'importer. Premier post dans les forums : http://synfig.org/forums/viewtopic.php?t=30

Prérequis

  1. Vérifiez que l'environnement Java Runtime est installé.
  2. Récupérez une version récente du processeur SAXON XSLT pour Java à http://saxon.sourceforge.net/. La version recommandée est : Saxon-SA 9.0 (saxonsa9-0-0-2j.zip).
  3. Décompressez le paquet SAXON dans le répertoire de votre choix. En exemple, nous utiliserons D:\saxon pour la suite. Le répertoire devrait contenir un certain nombre de fichiers JAR.
  4. Créez le fichier D:\saxon\svg2synfig.xsl avec le contenu fourni plus loin de ce document ([[#svg2synfig.xsl|]]).

Méthode optionnelle pour Windows

Si vous ne voulez pas utiliser la ligne de commande, créez un fichier batch D:\saxon\svg2synfig.bat contenant : @java -jar %0\..\saxon9.jar -xsl:%0\..\svg2synfig.xsl %1 > %0\..\synfig.sif @pause

Transformer un SVG en un fichier Synfig

Avec un fichier batch windows

  1. Il suffit de faire glisser le fichier SVG sur svg2synfig.bat.

Avec la ligne de commande

  1. Changez de répertoire vers D:\saxon.
  2. Tapez la commande suivante (remplacez votre_fichier.svg par le chemin vers votre fichier SVG) :

java -jar saxon9.jar -xsl:svg2synfig.xsl votre_fichier.svg > synfig.sif

Résultat

Si la conversion s'est bien passée, le résultat sera écrit dans le fichier D:\saxon\synfig.sif. Vous pouvez ouvrir ce fichier avec Synfig.

Limitations

  • Cela ne semble pas fonctionner avec SaxonB (version FOSS).
  • Les fichiers SVG compressés (svgz) doivent d'abord être décompressés.
  • Seuls les objets SVG chemins sont reconnus. Vous devrez donc transformer tous les objets en chemins.
  • Seul un sous-ensemble des éléments chemin est supporté. Essayez de modifier tous les nœuds des chemins pour avoir des tangentes séparées et tous les segments en courbes.
  • Les couleurs compliquées comme les dégradés ne sont pas supportés.
  • Seules les transformations élémentaires sont supportées.
  • Remplissage et contour pour un même objet ne fonctionne pas.

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>

Méthode 2

Note : La description de cette méthode est prévue uniquement pour Linux.

Un programme en C de akagogo qui utilise libxml permet de convertir le SVG au format Synfig.

http://none.carlos.googlepages.com/svgtosif.zip

Installation

Faites juste comme d'habitude ./configure && make && sudo make install.

Utilisation

Le fichier SVG doit être dans le répertoire appelé data. Vous devez lancer la commande depuis le répertoire parent, mais en utilisant juste le nom du fichier comme paramètre. Donc si :

  • Vous êtes dans le répertoire "/example" vous devez créer un répertoire appelé "/example/data" et y mettre le fichier "file.svg".
  • Ensuite, lancez svgtosif file.svg quand vous avez "/example" comme répertoire de travail courant.

Comme vous pouvez le voir, ce n'est pas vraiment simple. Pour résoudre facilement ce problème, utilisez le script suivant :

#!/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!"

Mettez ces lignes dans un fichier nommé "svg2sif" (le nom est à votre convenance mais évitez d'utiliser "svgtosif") et mettez-le dans un répertoire du PATH (par exemple /usr/bin). Puis :

chmod +x /usr/bin/svg2sif 

C'est tout. Maintenant, utilisez :

svg2sif <file.svg>

et vous devriez obtenir un fichier .sif dans le même répertoire que celui où vous travaillez.

Navigation Navigation:  Manuel>>


Languages Language: 

English • español • français • italiano • română • русский