[PHP Tour Lyon] Banners DIY - Fix IE10 (windows 7)

[woecifaun]

Avec Internet Explorer 10 sur Windows 7 tout se comporte normalement mais le click sur le bouton [Télécharger l'image] n'a aucun effet. L'utilisateur ne peut donc pas enregistrer l'image.

Vérifier aussi pour les versions plus récentes de IE / Windows.

[woecifaun]

Précision : Je n'ai pas pu tester les autres versions de IE ou même de Windows mais cette issue est ouverte de manière globale pour cette plate-forme et ce navigateur.

---

Sinon aussi loin que j'ai pu investiguer, voici les dernières pistes :
Si l'utilisateur veut enregistrer l'image, IE émet l'erreur suivante

Non-default namespace declarations must not have an empty URI.

Après contrôle j'ai constaté que IE transforme le SVG téléchargé et intégré en créant des namespaces vides dans certains nœuds. Lors de la récupération de ce SVG pour l'intégrer au canvas qui permet l'enregistrement, l'erreur surgit.

Des exemples concrets dès que mon portable sous Windows récupère son chargeur. 🔌

[woecifaun]

Voici les dernières trouvailles côté Internet Explorer et comment celui-ci transforme un SVG en un autre qui n'est plus valide pour lui-même.

AVANT :

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

<svg
    xmlns:dc="http://purl.org/dc/elements/1.1/"
    xmlns:cc="http://creativecommons.org/ns#"
    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
    xmlns:svg="http://www.w3.org/2000/svg"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
    width="728"
    height="90"
    id="svg2"
    version="1.1"
    inkscape:version="0.48.4 r9939"
    sodipodi:docname="base_728x90_bronze.svg"
    inkscape:export-xdpi="90"
    inkscape:export-ydpi="90">
  <defs…

APRÈS :

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg
    xmlns="http://www.w3.org/2000/svg"
    id="banner"
    width="728"
    height="90"
    xmlns="http://www.w3.org/2000/svg"
    version="1.1"
    xmlns:NS1=""
    NS1:xmlns:xlink="http://www.w3.org/1999/xlink">
<desc>Created with Snap</desc>
<defs />
<!--?xml version="1.0" encoding="UTF-8" standalone="no"?-->
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
    id="svg2"
    width="728"
    height="90"
    xmlns:NS2=""
    NS2:inkscape:version="0.48.4 r9939"
    version="1.1"
    xmlns:NS3=""
    NS3:inkscape:export-ydpi="90"
    xmlns:NS4=""
    NS4:inkscape:export-xdpi="90"
    xmlns:NS5=""
    NS5:sodipodi:docname="base_728x90_bronze.svg"
    xmlns:NS6=""
    NS6:xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
    xmlns:NS7=""
    NS7:xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    xmlns:NS8=""
    NS8:xmlns:svg="http://www.w3.org/2000/svg" xmlns:NS9=""
    NS9:xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
    xmlns:NS10=""
    NS10:xmlns:cc="http://creativecommons.org/ns#"
    xmlns:NS11=""
    NS11:xmlns:dc="http://purl.org/dc/elements/1.1/">
<defs…

J'ai bien vérifié que ce n'est pas Snap.svg qui crée ces namespace bizarres (sous FF c'est ok)

[woecifaun]

L'idée était alors d'injecter dans le canvas une chaîne de caractères clean représentant le DOM SVG mais on tombe alors sur

SCRIPT5022: SecurityError

au moment de l'injection. C'est une erreur cross-origin O_o alors même que toutes les ressources sont chargées sur le même domaine.

[woecifaun]

La bannière est maintenant générée depuis le serveur. Cette issue n'a plus de raison d'être.