Forum CMS Made Simple FR
Les fichiers image au format SVG - Version imprimable

+- Forum CMS Made Simple FR (https://forum.cmsmadesimple.fr)
+-- Forum : Ressources (https://forum.cmsmadesimple.fr/forum-4.html)
+--- Forum : Développement et Astuces (https://forum.cmsmadesimple.fr/forum-15.html)
+--- Sujet : Les fichiers image au format SVG (/thread-4156.html)


Les fichiers image au format SVG - archeo - 19/06/2018

Bonjour,

Le format Flash étant à terme condamné semble-t-il, j'ai commencé à m'intéresser aux images au format SVG.

Je n'en suis pas à faire des animations mais j'ai tenté de manière plus prosaïque d'inclure des liens dans un SVG.
Je crée mes fichiers SVG soit avec Openoffice soit avec Affinity designer.
Dans OpenOffice on peut donner un nom à un groupe ou à un objet en faisant un clique droit dessus > nom...
On exporte ensuite en SVG puis on ouvre le fichier dans notepad++. Il suffit de rechercher le nom (ici bivalves) du groupe que l'on a nommé dans openoffice pour le retrouver dans le fichier svg
Code :
[== XML ==]
<g id="DrawingGroup_29_bivalves">
    <g>
     <path fill="rgb(0,102,255)" stroke="none" d="M 15978,20564 L 15308,20564 15313,19119 15735,19119 15735,18703 15842,18703 15842,18223 15735,18223 15735,17696 15573,17696 15573,15289 15285,15289 15285,10763 16700,10763 16700,15289 16412,15289 16412,17696 16252,17696 16252,18223 16140,18223 16136,18703 16252,18703 16252,19119 16670,19119 16665,20564 15978,20564 Z"/>
     <path fill="none" stroke="rgb(0,102,255)" id="Drawing_136_0" stroke-linejoin="round" d="M 15978,20564 L 15308,20564 15313,19119 15735,19119 15735,18703 15842,18703 15842,18223 15735,18223 15735,17696 15573,17696 15573,15289 15285,15289 15285,10763 16700,10763 16700,15289 16412,15289 16412,17696 16252,17696 16252,18223 16140,18223 16136,18703 16252,18703 16252,19119 16670,19119 16665,20564 15978,20564 Z"/>
    </g>
    <g id="Drawing_137">
     <rect fill="none" stroke="none" x="15671" y="11072" width="642" height="2049"/>
     <g fill="rgb(255,255,255)" stroke="none" font-family="Arial" font-size="353" font-style="normal" font-weight="400">
      <g transform="translate(16110,12870) rotate(-90) translate(-16110,-12870)">
       <text x="16110" y="12870">
        <tspan x="16110 16378 16489 16698 16927 17039 17247 17477">Bivalves</tspan></text>
      </g>
     </g>
    </g>
   </g>


Il suffit ensuite d'ajouter la balise
<a xlink:href="https://www.universalis.fr/encyclopedie/bivalves/" xlinkConfusedhow="new"> avant le bloc <g id="DrawingGroup_29_bivalves">

et </a> après le bloc, d'enregistrer et le tour est joué enfin presque car il faut intégrer l'image dans la page HTML. On peut le faire de 3 façons:

  1. avec la balise <img /> mais les liens ne sont pas actifs
  2. avec la balise <embed src="uploads/images/biodiv/images/crise-permo-trias.svg"
    width="800"
    type="image/svg+xml"
    pluginspage="http://www.adobe.com/svg/viewer/install/" />
    Les liens sont actifs mais figés
    [/*]
  3. en copiant le contenu Xml du fichier SVG dans le code HTML, les liens sont actifs et en plus on peut utiliser des smarties pour faire des liens paramétrables mais si l'image est complexe on alourdit le contenu de la base de donnée.
    J'ai essayé de faire des liens paramétrables avec la méthode 3 mais sans succès.[/*]


Les fichiers image au format SVG - archeo - 19/06/2018

Une solution pour des liens paramétrable

dans la page deux liens et une balise utilisateur pour charger l'image dans la page dont l'extension a été transformée en php

Code :
[== Indéfini ==]
{$lien1={cms_selflink href='presumes-coupables' } scope=global}
{$lien2='uploads/images/biodiv/images/pendant-crise.svg' scope=global}

{image_svg image="uploads/images/biodiv/images/crise-permo-trias2.php"}

La balise utilisateur qui inclut le fichier le XML du fichier image dans la page

Code :
// paramètres d'entrée image //
$image=$params['image'];
include $image;

De la sorte je n'encombre pas la base de données mais le SVG est inutilisable hors de la page

Après avoir inclu le fichier XML les smarty ne fonctionnent plus et on ne peut pas utiliser {$lien1}{$lien2} (ce que l'on peut faire si on copie colle le xml du fichier SVG) . On ajoute donc une petite ligne de php dans le fichier SVG pour les remplacer :
Code :
[== PHP ==]
<?php $lien = $smarty->get_template_vars('lien1');echo $lien; ?>
ce qui donne dans le SVG
Code :
[== XHTML ==]
<a xlink:href =<?php $lien = $smarty->get_template_vars('lien1');echo $lien; ?> xlink:show="new">
    <g id="Drawing_150">
     <rect fill="none" stroke="none" x="21692" y="10270" width="2545" height="888"/>
     <g fill="rgb(0,0,0)" stroke="none" font-family="Arial" font-size="282" font-style="normal" font-weight="400">
      <text x="21942" y="10649">
       <tspan x="21942 22168 22266 22458 22649 22748 22922 23114 23242 23421 23520 23635">Biodiversité</tspan></text>
     </g>
    </g>
</a>
<a xlink:href =<?php $lien = $smarty->get_template_vars('lien2');echo $lien; ?> xlink:show="new">
    <g id="Drawing_151">
     <rect fill="none" stroke="none" x="20853" y="9890" width="4449" height="391"/>
     <g fill="rgb(0,0,0)" stroke="none" font-family="Arial" font-size="353" font-style="normal" font-weight="400">
      <text x="20870" y="10204">
       <tspan x="20870 21138 21351 21580 21793 21993 22206 22338 22568 22904 23133 23346 23479 23611 23841 23994 24148 24378 24590 24723 24876 25106">Écosystèmes terrestres</tspan></text>
     </g>
    </g>
</a>