Comment convertir une image PNG en SVG? [fermé]

266

Comment convertir une image PNG en SVG?

user199337
la source
21
Par programme ou non? Quelle langue, quelle plateforme?
Michael Petrotta,
Via une application ou via les commandes du système d'exploitation? Si à travers le système d'exploitation pourriez-vous s'il vous plaît dire quel système d'exploitation .. Merci
Mahesh Velaga

Réponses:

130

Il existe un site Web où vous pouvez télécharger votre image et voir le résultat.

http://vectormagic.com/home

Mais si vous souhaitez télécharger votre image svg, vous devez vous inscrire. (Si vous vous inscrivez, vous obtenez 2 images gratuitement)

FrankkieNL
la source
122

potracene prend pas en charge PNG comme fichier d'entrée, mais PNM .
Par conséquent, d'abord convertdu PNG au PNM:

convert file.png file.pnm        # PNG to PNM
potrace file.pnm -s -o file.svg  # PNM to SVG

Expliquez les options

  • potrace -s=> Le fichier de sortie est S VG
  • potrace -o file.svg => Écrire la sortie dans file.svg

Exemple

Fichier d'entrée = 2017.png Fichier d'entrée

convert 2017.png 2017.pnm

Fichier temporaire = 2017.pnm

potrace 2017.pnm -s -o 2017.svg

Fichier de sortie = 2017.svg Fichier de sortie

Scénario

ykarikos propose un script png2svg.sh que j'ai amélioré:

#!/bin/bash

File_png="${1?:Usage: $0 file.png}"

if [[ ! -s "$File_png" ]]; then
  echo >&2 "The first argument ($File_png)"
  echo >&2 "must be a file having a size greater than zero"
  ( set -x ; ls -s "$File_png" )
  exit 1
fi

File="${File_png%.*}"

convert "$File_png" "$File.pnm"        # PNG to PNM
potrace "$File.pnm" -s -o "$File.svg"  # PNM to SVG
rm "$File.pnm"                         # Remove PNM

Commande sur une ligne

Si vous souhaitez convertir de nombreux fichiers, vous pouvez également utiliser la commande à une ligne suivante:

( set -x ; for f_png in *.png ; do f="${f_png%.png}" ; convert "$f_png" "$f.pnm" && potrace "$f.pnm" -s -o "$f.svg" ; done )

Voir également

Voir également cette bonne comparaison des convertisseurs raster en vecteur sur Wikipedia.

olibre
la source
2
L'image perd de la couleur lorsqu'elle est convertie de pnm en svg à l'aide de potrace. Existe-t-il un moyen de conserver la couleur?
Coder
1
Salut @mundella. J'ai toujours utilisé potracedes icônes en noir et blanc. Merci pour vos commentaires. Mais désolé aucune idée de comment conserver les couleurs ... Ho! J'ai une idée: si votre image originale a peu de couleurs (disons trois couleurs uniques), vous pouvez créer trois images initiales (une pour chaque couleur). Convertissez ensuite en SVG. Et enfin, fusionnez les trois contenus SVG dans un seul fichier (SVG est basé sur XML). J'espère que cela pourrait vous aider ...
Santé
@olibre Existe-t-il une plate-forme pour faire les mêmes choses de manière pragmatique
Ami Kamboj
1
Salut @AmiKamboj. Je ne suis pas sûr de comprendre votre question. Les commandes convertet potracesont disponibles sur de nombreuses plateformes. J'utilise des ordinateurs Linux. Je viens d'utiliser ces commandes hier pour produire un SVG à partir d'un papier numérisé. Vous pouvez voir le résultat: cpp-frug.github.io/images/Cpp-President-2017.svg Veuillez expliquer plus sur votre cible. Que voulez-vous / me demandez-vous? Quel est votre besoin / souhait?
Santé
1
J'ai utilisé à peu près tous les convertisseurs x en svg en ligne. Le paquet potrace npm les a tous soufflés hors de l'eau. C'est génial.
tsteve
59

Un png est un style d'image bitmap et un SVG est une conception graphique vectorielle qui prend en charge les bitmaps, ce n'est donc pas comme s'il convertissait l'image en vecteurs, juste une image incorporée dans un format vectoriel. Vous pouvez le faire en utilisant http://www.inkscape.org/ qui est gratuit. Il serait intégré, mais il dispose également d'un moteur de type Live Trace qui tentera de le convertir en chemins si vous le souhaitez (en utilisant Potrace). Voir trace en direct dans Adobe Illustrator (Commericial) en est un exemple:

http://graphicssoft.about.com/od/illustrator/ss/sflivetrace.htm

Keith Adler
la source
1
J'ai utilisé la trace en direct dans Inkscape pour recréer des logos avec des originaux perdus depuis longtemps. À moins que la dernière version n'ait apporté quelques améliorations, c'est un peu hasardeux. Cela dit, j'ai également tracé manuellement certains logos dans Inkscape et réussi assez bien.
AnonJr
12
Voici une explication sur la façon de procéder dans Inkscape: wiki.inkscape.org/wiki/index.php/Potrace
Erel Segal-Halevi
grand commentaire. Nous avons remarqué que iOS 7.1 Safari n'affichera pas les images intégrées dans les svg tandis que Chrome n'a pas de problème avec cela
ProblemsOfSumit
28

Vous voudrez peut-être regarder Potrace .

Michael Krelin - pirate
la source
1
ce Potrace est très précis lorsque vous savez comment l'utiliser: mais ce n'est pas multicolore 1.) convertissez votre fichier en BMP 2.) (pour la partie précise) convertissez bmp en une haute résolution (strech it) 3.) coloriez les formes vous voulez tracer en noir 4.) convertir 5.) changer la largeur et la hauteur en original 6.) apprécier le tracé précis.
PauAI
18

Facile

  1. Téléchargez Inkscape (c'est totalement gratuit)
  2. Suivez les instructions de cette courte vidéo YouTube

Comme vous le verrez, si vous voulez faire beaucoup d'autres choses intelligentes .svg, vous pouvez le faire en utilisant également Inkscape.

Une observation non technique: personnellement, je préfère cette méthode aux offres de sites Web «gratuits» car, en plus d'exiger souvent une inscription, en téléchargeant l'image, dans tous les termes pratiques, on donne l'image au propriétaire du site.

Pancho
la source
1
Pourquoi le downvote? J'utilise cette approche avec beaucoup de succès. Ayez au moins la courtoisie d'expliquer pourquoi les gens peuvent bénéficier de vos idées.
Pancho
5
Suivre ces instructions enveloppe uniquement l'image avec du SVG XML - il ne convertit rien en données de chemin.
Robert
@Robert - merci pour l'info, j'étais parfaitement ignorant car cela fonctionnait bien pour mes besoins. Cela ne nuit cependant pas au fait qu'Inkscape est capable d'effectuer une conversion complète de PNG en SVG - et bien plus encore. Pour illustrer pour toute personne intéressée, j'ai modifié ma réponse pour inclure un court clip vidéo explicatif.
Pancho
En est-il vraiment ainsi? J'ai vérifié le SVG généré et il semble avoir des données de chemin, contrairement à la méthode mobilefish ...
dario_ramos
Il y a des gens qui votent de temps en temps sans raison valable et je commence à penser que c'est malveillant. S'il y a vraiment une raison - pas de problème, arrêtez d'être paresseux et ajoutez de la valeur à cette communauté en la fournissant.
Pancho
15

avec Adobe Illustrator:

Ouvrez Adobe Illustrator. Cliquez sur "Fichier" et sélectionnez "Ouvrir" pour charger le fichier .PNG dans le programme. Modifiez l'image au besoin avant de l'enregistrer en tant que fichier .SVG. Cliquez sur "Fichier" et sélectionnez "Enregistrer sous". Créez un nouveau nom de fichier ou utilisez le nom existant. Assurez-vous que le type de fichier sélectionné est SVG. Choisissez un répertoire et cliquez sur "Enregistrer" pour enregistrer le fichier.

ou

convertisseur en ligne http://image.online-convert.com/convert-to-svg

je préfère l'IA car vous pouvez apporter les modifications nécessaires

bonne chance

JayD
la source
3
+1 pour online-convert.com. Je l'ai essayé maintenant avec quelques silhouettes monochromes .. effectué sans problème .. Semble également être complètement gratuit.
nedR
Oui, l'un des meilleurs convertisseurs ... Merci
JayD
1
Je n'avais pas réalisé qu'Illustrator avait tout préparé. Le fait d'avoir déjà tout le .ai, cela me fera gagner une tonne de temps.
Doyle Lewis
10

À ma grande surprise, potrace il se trouve que la peut uniquement traiter le noir et blanc. Cela peut convenir à votre cas d'utilisation, mais certains peuvent considérer que l'absence de traçage des couleurs est problématique.

Personnellement, j'ai eu des résultats satisfaisants avec Vector Magic

Ce n'est toujours pas parfait.

cavalcade
la source
9

Une note pour ceux qui utilisent potrace et imagemagick , la conversion d' images PNG avec transparence en PPM ne semble pas très bien fonctionner. Voici un exemple qui utilise l' -flattenindicateur convertpour gérer cela:

sudo apt-get install potrace imagemagick
convert -flatten input.png output.ppm
potrace -s output.ppm -o output.svg
rm output.ppm

Un autre phénomène intéressant est que vous pouvez utiliser PPM (256 * 3 couleurs, ie. RVB), PGM (256 couleurs, ie. Niveaux de gris) ou PBM (2 couleurs, ie. Blanc ou noir uniquement) comme format d'entrée. D'après mes observations limitées, il semblerait que sur les images qui sont anti-aliasées, PPM et PGM (qui produisent des SVG identiques pour autant que je puisse voir) rétrécissent la zone colorée et PBM élargit la zone colorée (quoique seulement un peu). Vraisemblablement, c'est la différence entre un pixel > (256 / 2)test et un pixel > 0test. Vous pouvez basculer entre les trois en modifiant l'extension du fichier, c'est-à-dire. l'utilisation suivante PBM :

sudo apt-get install potrace imagemagick
convert -flatten input.png output.pbm
potrace -s output.pbm -o output.svg
rm output.pbm
Bardi Harborow
la source
7

Vous pouvez également essayer http://image.online-convert.com/convert-to-svg

Je l'utilise toujours pour mes besoins.

thednp
la source
Je travaille vraiment comme un charme même dans des images complexes. Je conseille vraiment cet outil.
Atıfcan Ergin
Ça n'a pas marché pour moi malheureusement.
adamj
Ne fonctionne pas bien si l'image est transparente
Genaut
Vous ne pouvez pas vous attendre à ce que le script prenne une photo de vous-même et obtienne un SVG parfaitement superposé, il n'y a rien de tel. Si vous avez une forme simple et que vous souhaitez obtenir le (s) chemin (s), cela suffit. J'ai fait beaucoup d'icônes de polices avec cette page et je n'ai jamais échoué pour moi.
thednp
@thednp mon image est sortie en noir et blanc
iOSAndroidWindowsMobileAppsDev
7

Je viens de trouver cette question et ses réponses alors que j'essaie de faire la même chose! Je ne voulais pas utiliser certains des autres outils mentionnés. (Je ne veux pas donner mon e-mail et je ne veux pas payer). J'ai trouvé qu'Inkscape (v0.91) peut faire du très bon travail. Ce tutoriel est rapide et facile à comprendre.

C'est aussi simple que de sélectionner votre bitmap dans Inkskape et Shift + Alt + B.

Détection des bords avec l'outil bitmap Inksape Trace basé sur Potrace

Dai Bok
la source
4

Selon pourquoi vous souhaitez convertir le format .png en .svg, vous n'aurez peut-être pas à passer par le problème. La conversion de .png (raster) en .svg (vecteur) peut être pénible si vous n'êtes pas très familier avec les outils disponibles, ou si vous n'êtes pas un graphiste de métier.

Si quelqu'un vous envoie un gros fichier haute résolution (par exemple 1024x1024), vous pouvez le redimensionner à peu près à la taille souhaitée dans GIMP. Souvent, vous aurez des problèmes pour redimensionner une image si la résolution (nombre de pixels par pouce) est trop faible. Pour corriger cela dans GIMP, vous pouvez:

  1. File -> Open: votre fichier .png
  2. Image -> Image Properties: vérifiez la résolution et l'espace colorimétrique. Vous voulez une résolution d'environ 300 ppp. Dans la plupart des cas, vous souhaitez que l'espace colorimétrique soit RVB.
  3. Image -> Mode: réglé sur RVB
  4. Image -> Scale Image: laissez la taille seule, définissez la résolution Y à 300 ou plus. Hit Scale.
  5. Image -> Scale Image: la résolution devrait maintenant être de 300 et vous pouvez maintenant redimensionner l'image à peu près à la taille souhaitée.

Pas aussi simple que de redimensionner un fichier .svg, mais certainement plus facile et plus rapide que d'essayer de convertir un .png en .svg, si vous avez déjà une grande image haute résolution.

Brian D
la source
2

Je suppose que vous souhaitez écrire un logiciel pour ce faire. Pour le faire naïvement, il vous suffit de trouver des lignes et de définir les vecteurs. Pour le faire intelligemment, vous essayez d'ajuster des formes sur le dessin (ajustement du modèle). De plus, vous devriez essayer de vérifier les régions bitmap (régions que vous ne pouvez pas modéliser par des hontes ou appliquer des textures. Je ne recommanderais pas de suivre cette route car cela prendra un peu de temps et nécessitera un peu de connaissances graphiques et de vision par ordinateur. Cependant, la sortie sera beaucoup plus évolutive que votre sortie d'origine.

monksy
la source
0

Cet outil fonctionne très bien en ce moment.

http://www.mobilefish.com/services/image2svg/image2svg.php

alejandro
la source
17
Cela incorpore l'image en svg, pas de vrais graphiques vectoriels
Paul Gobée
Cela a converti l'un de mes pngs colorés dans lesquels d'autres convertisseurs en ligne n'ont pas pu convertir correctement. Je pensais que cela fonctionnait car je peux l'ouvrir dans le navigateur mais quand j'ai essayé de l'ouvrir sur un autre outil, il a une erreur. Peut-être à cause du commentaire indiqué ci-dessus.
vida
-1

Si vous utilisez un système Linux, imagemagick est parfait. C'est à dire

convert somefile.png somefile.svg

Cela fonctionne avec des tas de formats différents.

Pour d'autres médias tels que les vidéos et l'utilisation audio (ffmpeg), je sais cependant que vous avez clairement indiqué png à svg; C'est toujours lié aux médias.

ffmpeg -i somefile.mp3 somefile.ogg

Juste une astuce pour si vous souhaitez parcourir de nombreux fichiers; une boucle utilisant des astuces de base du shell ..

for f in *.jpg; do convert $f ${f%jpg}png; done

Cela supprime le jpg et ajoute png qui indique convertir ce que vous voulez.

DarkFox
la source
2
Imagemagick fonctionne sur d'autres plates-formes, pas seulement sur «Linux».
Lunatik
25
Cela fonctionne techniquement, cependant, le fichier svg généré n'est pas vraiment des graphiques vectoriels - il contient juste le bitmap original "tel quel". Ainsi, lorsque vous l'agrandissez, vous obtenez toujours la qualité dégradée d'une image raster.
Erel Segal-Halevi
7
@archeyDevil non, ce n'est pas "convertir" en SVG, c'est "incorporer" le bitmap dans un SVG vide. Inutile à personne.
Adam
4
@archeyDevil Le titre de la question est "convertir ... en SVG". Votre réponse ne se convertit pas. Il intègre. PNG est un format bitmap, SVG est un format vectoriel. Différence massive. L'incorporation est inutile et ne mérite pas une question SO IMHO
Adam
3
Je suis conscient qu'il ne se convertit pas. Je l'ai fait cependant; postez ceci pour ceux qui n'ont pas besoin d'une persécution vectorielle, mais ont juste besoin d'un changement rapide et sale entre les types de fichiers.
DarkFox