Exporter une image au format SVG

Version imprimable

14/01/2018, 15h59
yarol

Exporter une image au format SVG

Bonjour,

J'ai récemment découvert JQuery Vector Maps après lecture de Vous pouvez désormais afficher vos cartes vectorielles en SVG.

J'ai créer des cartes interactives (avec changement de couleur, par exemple). Aucun souci, tout fonctionne.

Désormais, je voudrais ajouter un bouton proposant de télécharger la carte telle qu'elle est au moment où on souhaite l'exporter (au format png, jpg, voire svg).
Je ne trouve pas comment faire. Auriez vous une piste ? Y'a t-il un autre plugin pour ça ?

Merci d'avance pour votre aide.

Salut et merci pour cet information ;).

Citation:

Envoyé par SylvainPV

Vu qu'il s'agit de SVG, est-il prévu d'ajouter une fonctionnalité de zoom progressif, à la molette par exemple ?

Il semblerait que oui voir https://codepen.io/headmax/pen/wpxomQ?editors=0010 mais l'effet provient du plugin jquery-mousewheel.js

Citation:

Envoyé par yarol

Désormais, je voudrais ajouter un bouton proposant de télécharger la carte telle qu'elle est au moment où on souhaite l'exporter (au format png, jpg, voire svg).
Je ne trouve pas comment faire. Auriez vous une piste ? Y'a t-il un autre plugin pour ça ?

Js :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 document.querySelector(".link-download").addEventListener("click", (evt) => { const svgContent = document.querySelector("svg").outerHTML, blob = new Blob([svgContent], { type: "image/svg+xml" }), url = window.URL.createObjectURL(blob), link = evt.target; link.target = "_blank"; link.download = "Illustration.svg"; link.href = url; });
Html :
Code:

1 2 <a href="#" class="link-download">Télécharger le SVG</a>
voir exemple : https://codepen.io/headmax/pen/wpxomQ?editors=0010

Merci pour le lien et les codes .... mais je n'arrive pas à les introduire dans mon exemple.
Pourriez vous m'aider à l'inscrire dans l'exemple basique ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>France Map for JQVMap / Gaël Jaffredo</title> 
 
    <link href="jqvmap.css" media="screen" rel="stylesheet" type="text/css" />
 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
    <script src="jquery.vmap.js" type="text/javascript"></script>
    <script src="jquery.vmap.france.js" type="text/javascript"></script>
    <script src="jquery.vmap.colorsFrance.js" type="text/javascript"></script>
 
	<script type="text/javascript">
        $(document).ready(function() {
                $('#francemap').vectorMap({
                    map: 'france_fr',
                        hoverOpacity: 0.5,
                        hoverColor: false,
                        backgroundColor: "#00ffff",
                        colors: couleurs,
                        borderColor: "#000000",
                        selectedColor: "#EC0000",
                        enableZoom: true,
                        showTooltip: true,
                    onRegionClick: function(element, code, region)
                    {
                        var message = 'Département : "'
                            + region 
                            + '" || Code : "'
                            + code
                                        + '"';
             
                        alert(message);
                    }
                });
        });
        
 
        document.querySelector(".link-download").addEventListener("click", (evt) => {
                const svgContent = document.querySelector("svg").outerHTML,
                        blob = new Blob([svgContent], {
                                type: "image/svg+xml"
                        }),
                        url = window.URL.createObjectURL(blob),
                        link = evt.target;
 
                        link.target = "_blank";
                        link.download = "Illustration.svg";
                        link.href = url;
        });
        </script>
  </head>
  <body>
    <div id="francemap" style="width: 960px; height: 704px;">
    </div>
    <div><a href="#" class="link-download">Télécharger le SVG</a></div>
  </body>
</html>

15/01/2018, 00h30
yarol

désolé pour l'erreur de quote.

Je viens de trouver mon erreur :
à la place de document.querySelector("svg").outerHTML, il fallait inscrire document.querySelector("#francemap").outerHTML.

Par contre, la moindre "pollution" ajoutée à mon div génère un svg erroné. Par exemple, si les boutons de zoom sont présents alors le fichier svg est corrompu.
15/01/2018, 06h03
headmax

3 pièce(s) jointe(s)

Oui @yarol lorsqu'on zoom je pense que les datas ne sont plus valable dans ce cas de figure "essayé d'upload sur developpez.com les .svg ne sont pas accepté", l'image prendre en compte le zoom niveau client mais peut passé par différente extension (.gif, jpg, png) en passant par du langage côté serveur et utiliser des libs styles GD2 ou imagemagic...
Juste une conversion de svg a png ou jpg pourrait suffire a rendre l'image valide le zoom est conservé.
Après tout dépend de ton navigateur pour moi sous linux avec firefox developper j'ai pas ton problème :(.

Pièce jointe 342512
Pièce jointe 342517
Pièce jointe 342519