Bug d'import d'images svg

a marqué ce sujet comme résolu.

Bonjour,

J’ai remarqué plusieurs comportements bizarres avec l’import d’images dans ma galerie de tutoriel.

  1. D’abord, le plus embêtant car pas mitigeable. J’ai une image svg qui n’est pas du tout importée/affichée correctement.

Image SVG que je veux importer :

Diagramme patate solution
Diagramme patate solution

Ce à quoi ça devrait ressembler :

Exemple_bug
Exemple_bug
  1. Quand je veux "mettre à jour" une image déjà créée dans ma galerie, et que je veux changer l’image source mais pas les légendes ou titre, je fais "Parcourir", je choisis mon image, tout est ok. Et quand j’appuie sur "Mettre à jour", je me prends systématiquement "Erreur interne du serveur". Je suis obligé de supprimer l’image pour la recréer.
+1 -0

Salut,

J’ai déjà été confronté à des problèmes de ce genre.

Pour ce qui est du mauvais import, j’ai l’impression que Inkscape à tendance à créer des SVG difficilement gérables par les outils d’imports, par certains visualiseurs, voire par les navigateurs. J’ai converti les images d’un tuto récemment vers du SVG, et j’ai fini par tout faire à la main parce que ça s’y prêtait bien et marchait correctement.

Pour ce qui est des erreurs de serveur, c’est un vrai problème. J’ai eu le même soucis, les mêmes erreurs, et j’ai pu reproduire le genre de soucis sur la version de développement de ZdS sans trouver la cause originelle. Il semblerait qu’il y ait des soucis avec une des bibliothèques utilisées pour faire la conversion. Je soupçonne que ce soit encore à cause de bizarreries d’Inkscape.

Bref, les SVG sortis par Inkscape ont tendance à être un peu tordu, et à ne pas être si compatibles que ça avec d’autres outils. Je n’ai pas investigué plus pour savoir s’il y aurait des options de mitigation. Essaie de voir si c’est toujours pareil quand tu choisis d’enregistrer au format « SVG simple » et pas « SVG Inkscape ».

+3 -0

J’ai tenté vite fait de faire un truc reproductible. J’ai un peu de mal.

SVG TEST

La miniature a supprimé le E. C’est moi qui est “oublié” les A/B. Vous pouvez peut-être reproduire plus facilement de votre coté ?

Le code source de mon SVG
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   width="203.40851mm"
   height="206.79327mm"
   viewBox="0 0 203.40851 206.79327"
   version="1.1"
   id="svg5"
   inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20, custom)"
   sodipodi:docname="test.svg"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:svg="http://www.w3.org/2000/svg">
  <sodipodi:namedview
     id="namedview7"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageshadow="2"
     inkscape:pageopacity="0.0"
     inkscape:pagecheckerboard="0"
     inkscape:document-units="mm"
     showgrid="false"
     fit-margin-top="10"
     fit-margin-left="10"
     fit-margin-right="10"
     fit-margin-bottom="10"
     inkscape:zoom="0.44010466"
     inkscape:cx="276.0707"
     inkscape:cy="270.39023"
     inkscape:window-width="1912"
     inkscape:window-height="1055"
     inkscape:window-x="0"
     inkscape:window-y="17"
     inkscape:window-maximized="1"
     inkscape:current-layer="layer1" />
  <defs
     id="defs2">
    <rect
       x="448.48788"
       y="740.75073"
       width="186.75844"
       height="150.89932"
       id="rect51163" />
    <rect
       x="309.44162"
       y="766.36957"
       width="158.03307"
       height="140.65253"
       id="rect41143" />
    <rect
       x="649.39209"
       y="146.72215"
       width="247.16058"
       height="201.44812"
       id="rect17697" />
    <rect
       x="657.64734"
       y="453.4444"
       width="203.92894"
       height="110.82757"
       id="rect10997" />
    <rect
       x="100.57432"
       y="441.41248"
       width="154.83688"
       height="126.69595"
       id="rect3457" />
  </defs>
  <g
     inkscape:label="Calque 1"
     inkscape:groupmode="layer"
     id="layer1"
     transform="translate(-8.9921259,-27.603652)">
    <circle
       style="font-variation-settings:'wght' 700;fill:none;fill-opacity:0.422446;stroke:#000000;stroke-width:2.11667;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1;paint-order:fill markers stroke"
       id="path850"
       cx="110.69638"
       cy="132.69267"
       r="90.64592" />
    <circle
       style="font-variation-settings:'wght' 700;fill:none;fill-opacity:0.422446;stroke:#000000;stroke-width:2.11667;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1;paint-order:fill markers stroke"
       id="path898"
       cx="75.243675"
       cy="93.854927"
       r="33.667427" />
    <circle
       style="font-variation-settings:'wght' 700;fill:none;fill-opacity:0.422446;stroke:#000000;stroke-width:2.11667;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1;paint-order:fill markers stroke"
       id="path898-2"
       cx="146.0699"
       cy="94.605209"
       r="33.667427" />
    <circle
       style="font-variation-settings:'wght' 700;fill:none;fill-opacity:0.422446;stroke:#000000;stroke-width:2.11667;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1;paint-order:fill markers stroke"
       id="path898-7"
       cx="75.178513"
       cy="166.11752"
       r="33.667427" />
    <circle
       style="font-variation-settings:'wght' 700;fill:none;fill-opacity:0.422446;stroke:#000000;stroke-width:2.11667;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1;paint-order:fill markers stroke"
       id="path898-0"
       cx="146.40387"
       cy="166.3893"
       r="33.667427" />
    <ellipse
       style="font-variation-settings:'wght' 700;fill:none;fill-opacity:0.422446;stroke:#000000;stroke-width:2.11667;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1;paint-order:fill markers stroke"
       id="path1220"
       cx="62.703094"
       cy="92.448677"
       rx="11.218917"
       ry="22.437834" />
    <ellipse
       style="font-variation-settings:'wght' 700;fill:none;fill-opacity:0.422446;stroke:#000000;stroke-width:2.11667;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1;paint-order:fill markers stroke"
       id="path1222"
       cx="88.283119"
       cy="91.921623"
       rx="10.668564"
       ry="21.337128" />
    <ellipse
       style="font-variation-settings:'wght' 700;fill:none;fill-opacity:0.422446;stroke:#000000;stroke-width:2.11667;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1;paint-order:fill markers stroke"
       id="path1220-9"
       cx="134.81268"
       cy="94.07962"
       rx="11.218917"
       ry="22.437834" />
    <ellipse
       style="font-variation-settings:'wght' 700;fill:none;fill-opacity:0.422446;stroke:#000000;stroke-width:2.11667;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1;paint-order:fill markers stroke"
       id="path1222-3"
       cx="160.39272"
       cy="93.552567"
       rx="10.668564"
       ry="21.337128" />
    <ellipse
       style="font-variation-settings:'wght' 700;fill:none;fill-opacity:0.422446;stroke:#000000;stroke-width:2.11667;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1;paint-order:fill markers stroke"
       id="path1220-6"
       cx="63.42659"
       cy="165.37553"
       rx="11.218917"
       ry="22.437834" />
    <ellipse
       style="font-variation-settings:'wght' 700;fill:none;fill-opacity:0.422446;stroke:#000000;stroke-width:2.11667;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1;paint-order:fill markers stroke"
       id="path1222-0"
       cx="89.006607"
       cy="164.84848"
       rx="10.668564"
       ry="21.337128" />
    <ellipse
       style="font-variation-settings:'wght' 700;fill:none;fill-opacity:0.422446;stroke:#000000;stroke-width:2.11667;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1;paint-order:fill markers stroke"
       id="path1220-62"
       cx="133.72847"
       cy="166.01901"
       rx="11.218917"
       ry="22.437834" />
    <ellipse
       style="font-variation-settings:'wght' 700;fill:none;fill-opacity:0.422446;stroke:#000000;stroke-width:2.11667;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1;paint-order:fill markers stroke"
       id="path1222-6"
       cx="159.30849"
       cy="165.49196"
       rx="10.668564"
       ry="21.337128" />
    <text
       xml:space="preserve"
       transform="matrix(0.26458333,0,0,0.26458333,-2.4158713,-2.7510954)"
       id="text3455"
       style="font-size:96px;line-height:1.25;font-family:'Fira Code';-inkscape-font-specification:'Fira Code, Normal';letter-spacing:0px;white-space:pre;shape-inside:url(#rect3457)"><tspan
         x="100.57422"
         y="525.41211"
         id="tspan51581">6°</tspan></text>
    <text
       xml:space="preserve"
       transform="matrix(0.26458333,0,0,0.26458333,-2.6501197,-7.0727354)"
       id="text10995"
       style="font-size:96px;line-height:1.25;font-family:'Fira Code';-inkscape-font-specification:'Fira Code, Normal';letter-spacing:0px;white-space:pre;shape-inside:url(#rect10997)"><tspan
         x="657.64648"
         y="537.44531"
         id="tspan51583">5°</tspan></text>
    <text
       xml:space="preserve"
       transform="matrix(0.26458333,0,0,0.26458333,-0.13381736,-5.1730649)"
       id="text17695"
       style="font-size:96px;line-height:1.25;font-family:'Fira Code';-inkscape-font-specification:'Fira Code, Normal';letter-spacing:0px;white-space:pre;shape-inside:url(#rect17697)"><tspan
         x="649.39258"
         y="231.66016"
         id="tspan51587"><tspan
           style="font-family:'Bitstream Vera Serif';-inkscape-font-specification:'Bitstream Vera Serif, Normal'"
           id="tspan51585">E</tspan></tspan></text>
    <text
       xml:space="preserve"
       transform="matrix(0.26458333,0,0,0.26458333,-4.598698,-6.1376779)"
       id="text41141"
       style="font-size:96px;line-height:1.25;font-family:'Fira Code';-inkscape-font-specification:'Fira Code, Normal';letter-spacing:0px;white-space:pre;shape-inside:url(#rect41143)"><tspan
         x="309.44141"
         y="850.36914"
         id="tspan51589">4°</tspan></text>
    <text
       xml:space="preserve"
       transform="matrix(0.26458333,0,0,0.26458333,-3.7622343,1.1107517)"
       id="text51161"
       style="font-size:96px;line-height:1.25;font-family:'Fira Code';-inkscape-font-specification:'Fira Code, Normal';letter-spacing:0px;white-space:pre;shape-inside:url(#rect51163)"><tspan
         x="448.48828"
         y="824.75"
         id="tspan51591">3°</tspan></text>
  </g>
</svg>
+0 -0

Quand je veux "mettre à jour" une image déjà créée dans ma galerie, et que je veux changer l’image source mais pas les légendes ou titre, je fais "Parcourir", je choisis mon image, tout est ok. Et quand j’appuie sur "Mettre à jour", je me prends systématiquement "Erreur interne du serveur". Je suis obligé de supprimer l’image pour la recréer.

Je viens de regarder et la fonctionnalité de mise à jour d’une image a été oubliée lorsqu’on a ajouté la possibilité de sauvegarder des SVG. Le code actuel s’attend à une image matricielle et lorsqu’il rencontre un SVG, il ne comprend pas et retourne cette affreuse erreur interne.

La correction permettant de mettre à jour une image avec un SVG est simple et sera donc probablement disponible avec la prochaine version de ZDS. Je vais ouvrir un ticket ou proposer directement une modification pour que l’erreur s’affiche de façon plus humaine que la page d’erreur interne. La correction pour afficher un beau message d’erreur au lieu de la page d’erreur interne est aussi simple et sera donc probablement disponible avec la prochaine version de ZDS.

+1 -0

Ok désolé pour mon message, l’image de base de l’OP reproduit le comportement, c’est juste que de base l’image s’affiche mal dans un navigateur non ?

Le problème du fait que le SVG est mal formaté, svg:circle devrait être un path dans le fichier SVG de base. Je ne sais pas trop d’où sort le svg:circle ici mais je pense que l’image de base est problématique.

  <circle
       style="fill:#bc64c7;fill-opacity:0;stroke:#000000;stroke-width:0.264999;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
       id="path905"
       sodipodi:type="arc"
       sodipodi:cx="24.287922"
       sodipodi:cy="20.773926"
       sodipodi:rx="10.335286"
       sodipodi:ry="10.645345"
       sodipodi:start="0"
       sodipodi:end="6.2787522"
       sodipodi:open="true"
       sodipodi:arc-type="chord"
       d="M 34.623208,20.773926 A 10.335286,10.645345 0 0 1 24.299376,31.419264 10.335286,10.645345 0 0 1 13.952661,20.797522 10.335286,10.645345 0 0 1 24.253559,10.12864 10.335286,10.645345 0 0 1 34.623106,20.726734 Z" />

Le champ d n’est pas normal (au sens de la norme SVG), les champs de circle devraient être cx, cy et r, pour une ellipse on a deux r, rx et ry mais d est typique d’un path, d’ailleurs si on remplace circle par path dans le fichier original, il s’affiche correctement dans Firefox. Est-ce Inkscape qui l’a ajouté ? Si oui, le problème vient de Inkscape.

+2 -0

J’avoue être un novice total en SVG, j’avais Inkscape sur mon ordinateur et je me suis dit que produire des images SVG étaient mieux que des images PNG (zoomage, dézoomage, multi-plateforme, toussa, j’ai tort ?).

Mais visiblement, vos messages ont l’air de converger vers :

  • Il y a bien quelques petits soucis internes (merci @Situphen <3 )
  • Inkscape a l’air de générer des images SVG qui font un peu n’importe quoi au vu de la norme SVG. ( merci @Aabu et @Ache ; j’avoue, je ne connais rien au SVG)

Deux possibilités :

  • Auriez-vous un logiciel créateur de SVG autre que Inkscape à conseiller ? (libre tant qu’à faire)
  • Au pire, un outil de conversion ? Genre un logiciel qu’on peut juste ouvrir, et resauvegarder avec pour avoir un fichier SVG correct ?
+0 -0

Qu’ont donné les tests sur l’enregistrement en svg classique ? Comme dit plus haut, inkscape enregistre par défaut dans un format "étendu" svg inkscape. Faut tester l’enregistrement en svg normal.

Sinon, une solution pourrait être à la fin de sélectionner toutes les formes et de les convertir en chemin, peut-être ?

Edit : J’ai testé avec ton image. Enregistrer en svg simple n’a pas fonctionné, par contre convertir les objets en chemin, oui. Menu chemin -> Objet en chemin. Idélement, il faudrait mettre les textes sur un calque séparé pour ne pas les convertir.

Test de svg

+0 -0

Idélement, il faudrait mettre les textes sur un calque séparé pour ne pas les convertir.

Moté

J’y connais rien. Pourquoi il faudrait mettre les textes à part ?

Lyph

C’est pas obligatoire, ça fonctionnera aussi très bien, mais je pense qu’il y aurait sûrement un meilleur rendu s’ils sont pas transformés en chemin ^^

+0 -0

C’est pas obligatoire, ça fonctionnera aussi très bien, mais je pense qu’il y aurait sûrement un meilleur rendu s’ils sont pas transformés en chemin ^^

Moté

Oulà, ça dépend. Pour des raisons de fingerprint, les navigateurs réduisent drastiquement les polices utilisables. Si tu utilises une police particulière, il vaut mieux malheuresement convertir en chemin, sinon tu peux laisser en texte.

+0 -0
Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte