Les fichiers image au format SVG

[archeo]

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/" xlinkhow="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.[/*]
   

[archeo]

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/" xlinkhow="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.[/*]