Est-ce qu’il vous est déjà arrivé d’avoir besoin de récupérer un logo ou une image sur un site internet ? … Puis vous rendre compte que le logo est au format svg, et donc impossible à télécharger ? Si cela ne vous est jamais arrivé, vous avez de la chance ! Si non, j’ai peut être la solution qu’il vous faut.

Parce que oui, les images en svg c’est bien, c’est beau et c’est la qualité idéale pour le web… Mais qu’est-ce que c’est chiant ! Récupérer une image png c’est super simple. Un clic droit et c’est fait.

Par contre dès qu’on entre dans du svg… C’est un peu plus compliqué, voir parfois impossible.

Et quand c’est le cas, cela demande généralement 5-10 minutes pour prendre une screenshot, faire les modifications sur Photoshop ou Affinity Designer et l’exporter au bon format… Sur ce point là, je pense qu’on est tous les deux d’accord, c’est pas tip top.

Du coup, j’ai commencé à faire des recherches et j’ai finis par trouver deux petites solutions bien sympathiques ! Et voici donc point par point comment récupérer un svg :

Récupérer une image svg quand j’ai un logiciel de graphisme

  1. Rendez-vous sur SVG Crowdbar via le navigateur Chrome.
  2. Copiez le lien du bouton «SVG Crowdbar» dans la section Bookmarklet.
  3. Collez ce lien quelque part dans votre liste de liens favoris. (les trois petits points verticaux en haut à droite)
  4. Rendez-vous sur le site auquel vous voulez récupérer une ou plusieurs images svg
  5. Cliquez sur le bouton «SVG Crowdbar» en favori que vous venez d’ajouter

    Téléchargement des images en .svg grâce à SVG Crowdbar
  6. Et hop, il télécharge toutes les images .svg se trouvant sur la page ! 😍

Bon, par contre le hic c’est qu’il regroupe toutes les images svg de la page en un seul fichier. Il vous faudra donc avoir un logiciel de graphisme qui vous permettra de supprimer les formes svg non voulues.

Il y a cependant un autre moyen si le premier ne vous convient pas. Celui-ci ne marche pas à tous les coups et reste plus compliqué mais… Voici comment faire :

Récupérer une image svg quand je n’ai aucun logiciel de graphisme

  1. Faites un clic droit sur l’image concernée.
  2. Sélectionnez «Inspecter l’élément» ou «Inspecter» si vous êtes sur Chrome.
  3. Il va maintenant falloir récupérer l’URI du logo svg. Et là, il y a trois cas possibles :
      • Vous voyez du code <svg></svg>. Dans ce cas, il sera malheureusement impossible de le récupérer (du moins, je n’ai pour ma part, pas encore trouvé le moyen).

    Analyse du code source d'un site web. Nous pouvons voir du code <svg></svg>

      • Il y a un tag src= «  »/> mettant directement vers l’image svg.

    Visualisation du code source du site Get Response. Nous pouvons voir le tag <a></a> avec un lien vers le logo .svg

      • Autrement, le bloc HTML est relié au document svg via les éléments CSS :

    Visualisation du code source du site Spotify avec une class CSS contenant l'url vers le logo .svg

  4. Récupérez le lien vers l’image .svg en retournant sur «Inspecter» puis «Application» dans le document «image». (Si le lien est une URI «data:[…]» et non une URL, il sera impossible de la récupérer. Sinon, voyez la suite !)
  5. Cliquez donc sur l’URL menant vers l’image svg
  6. Rendez-vous sur Online-Converter puis intégrez le lien de l’image afin de la convertir en .png, .jpeg ou .svg (selon vos envies)
  7. Voilà, vous avez une belle image au format de votre choix !

Alors certes, c’est largement plus ardu que de télécharger une image png. Mais c’est quand même bien plus rapide que d’aller sur un logiciel de graphisme pour retaper toute une image. Et… Cela ne nécessite aucune compétence en design ! 😉

P.S: Si vous n’avez aucun logiciel pour faire des montages ou du design, je vous conseille fortement Affinity Designer. Pour 55€ (sans abonnement), il est simple et ouvre vraiment de nombreuses portes… Ne serait-ce que pour ces petits besoins du quotidien. Et regardez moi le swag de cette vidéo… ! (lien)

Share This