Como converter uma imagem PNG para SVG? [fechadas]


266

Como converter uma imagem PNG para SVG?


21
Programaticamente ou não? Qual idioma, plataforma?
22420 Michael Petrotta 17/07/2009

Através de algum aplicativo ou através de comandos do sistema operacional? Se através do sistema operacional você poderia por favor dizer qual sistema operacional .. Obrigado
Mahesh Velaga

Respostas:


130

Existe um site onde você pode fazer upload de sua imagem e ver o resultado.

http://vectormagic.com/home

Mas se você deseja baixar sua imagem svg, você precisa se registrar. (Se você se registrar, você recebe 2 imagens de graça)


122

potraceque não suporta PNG como arquivo de entrada, mas PNM .
Portanto, primeiro convertde PNG para PNM:

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

Explique as opções

  • potrace -s=> O arquivo de saída é S VG
  • potrace -o file.svg => Grava a saída em file.svg

Exemplo

Arquivo de entrada = 2017.png Arquivo de entrada

convert 2017.png 2017.pnm

Arquivo temporário = 2017.pnm

potrace 2017.pnm -s -o 2017.svg

Arquivo de saída = 2017.svg Arquivo de saída

Roteiro

O ykarikos propõe um script png2svg.sh que melhorei:

#!/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

Comando de uma linha

Se você deseja converter muitos arquivos, também pode usar o seguinte comando de uma linha:

( 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 )

Veja também

Veja também esta boa comparação de conversores de varredura para vetor na Wikipedia.


2
A imagem perde cor quando convertida de pnm para svg usando potrace. Existe alguma maneira de preservar a cor?
Coder

1
Olá @mundella. Eu sempre usei potraceícones preto e branco. Obrigado pelo seu feedback! Mas desculpe, não faço ideia de como preservar cores ... Ho! Tenho uma ideia: se a sua imagem original tiver poucas cores (digamos três cores únicas), você poderá criar três imagens iniciais (uma para cada cor). Em seguida, converta para SVG. E, finalmente, mescle os três conteúdos SVG em um arquivo (o SVG é baseado em XML). Espero que isso poderia ajudar ... Felicidades ;-)
olibre

@olibre Existe alguma plataforma de pragmaticamente fazer as mesmas coisas
Ami Kamboj

1
Oi @AmiKamboj. Não tenho certeza de entender sua pergunta. Os comandos converte potraceestão disponíveis em várias plataformas. Estou usando computadores baseados em Linux. Acabei de usar esses comandos ontem para produzir um SVG a partir de um papel digitalizado. Você pode ver o resultado: cpp-frug.github.io/images/Cpp-President-2017.svg Por favor, explique mais sobre o seu destino. O que você quer / quer saber? Qual é a sua necessidade / desejo? Cheers ;-)
olibre 29/07

1
Eu usei praticamente todos os conversores on-line de x para svg por aí. O pacote potrace npm expulsou todos eles da água. É incrivel.
tsteve

59

Um png é um estilo de imagem de bitmap e um SVG é um design gráfico baseado em vetor que suporta bitmaps; portanto, não é como se convertesse a imagem em vetores, apenas uma imagem incorporada em um formato baseado em vetor. Você pode fazer isso usando http://www.inkscape.org/, que é gratuito. Ele seria incorporado, no entanto, também possui um mecanismo semelhante ao Live Trace, que tentará convertê-lo em caminhos, se você desejar (usando potrace). Veja o rastreamento ao vivo no adobe illustrator (comercial) é um exemplo:

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


1
Usei o rastreamento ao vivo no Inkscape para recriar logotipos com originais perdidos há muito tempo. A menos que a versão mais recente tenha feito algumas melhorias, ela é um pouco imprevisível. Dito isto, também rastreei manualmente alguns logotipos no Inkscape e consegui muito bem.
#

12
Aqui está uma explicação de como fazer isso no Inkscape: wiki.inkscape.org/wiki/index.php/Potrace
Erel Segal-Halevi

ótimo comentário. Temos notado que iOS 7.1 Safari não irá exibir imagens incorporadas em SVG da enquanto o Chrome não tem um problema com ele
ProblemsOfSumit

28

Você pode querer olhar para potrace .


1
este Potrace é muito preciso quando você sabe como usá-lo: mas não é multicolorido 1.) converta seu arquivo em BMP 2.) (para a parte exata) converte bmp em alta resolução (estique-o) 3.) colore as formas você deseja rastrear em preto 4.) converter 5.) alterar largura e altura para original 6.) apreciar o rastreamento preciso.
PauAI

18

Fácil

  1. Download do Inkscape (é totalmente gratuito)
  2. Siga as instruções neste pequeno vídeo do youtube

Como você verá, se você quiser fazer um monte de outras coisas inteligentes .svg, pode fazê-lo usando o Inkscape também.

Uma observação não técnica: eu pessoalmente prefiro esse método a ofertas "gratuitas" de sites, pois, além de exigir o registro, fazendo o upload da imagem, em todos os aspectos práticos, a pessoa está dando a imagem ao proprietário do site.


1
Por que o voto negativo? Eu uso essa abordagem com muito sucesso. Pelo menos tenha a cortesia de explicar por que as pessoas podem se beneficiar de suas idéias.
Pancho

5
Seguir essas instruções apenas agrupa a imagem com SVG XML - ele não converte nada em dados do caminho.
Robert

@ Robert - obrigado pela informação, eu era alegremente ignorante, pois funcionou bem para os meus propósitos. No entanto, isso não prejudica o fato de o Inkscape ser capaz de executar uma conversão completa de PNG para SVG - e muito mais. Para ilustrar para qualquer pessoa interessada, alterei minha resposta para incluir um pequeno videoclipe explicativo.
Pancho

É mesmo assim? Eu verifiquei o SVG gerado e parece ter os dados do caminho, ao contrário do método mobilefish ...
dario_ramos

Há pessoas que votam contra isso de vez em quando, sem nenhuma causa justificável, e estou começando a formar a opinião de que é malicioso. Se realmente houver um motivo - não há problema, pare de ser preguiçoso e agregue algum valor a essa comunidade, fornecendo-o.
Pancho

15

com o adobe illustrator:

Abra o Adobe Illustrator. Clique em "Arquivo" e selecione "Abrir" para carregar o arquivo .PNG no programa. Edite a imagem conforme o necessário antes de salvá-la como arquivo .SVG. Clique em "Arquivo" e selecione "Salvar como". Crie um novo nome de arquivo ou use o nome existente. Verifique se o tipo de arquivo selecionado é SVG. Escolha um diretório e clique em "Salvar" para salvar o arquivo.

ou

conversor online http://image.online-convert.com/convert-to-svg

eu prefiro AI porque você pode fazer as alterações necessárias

boa sorte


3
+1 para online-convert.com. Tentei agora com algumas silhuetas monocromáticas ... executadas na perfeição .. Também parece ser totalmente gratuito.
nedR

Sim um dos melhores conversores ... Obrigado
Jayd

1
Não sabia que o Illustrator tinha isso preparado. Tendo tudo como .ai já, isso me economizará uma tonelada de tempo.
Doyle Lewis

10

Para minha surpresa, potrace se vê, só pode processar preto e branco. Isso pode ser bom para o caso de uso, mas alguns podem considerar problemática a falta de rastreamento de cores.

Pessoalmente, tive resultados satisfatórios com o Vector Magic

Ainda não é perfeito.


9

Uma observação para aqueles que usam potrace e imagemagick , converter imagens PNG com transparência em PPM não parece funcionar muito bem. Aqui está um exemplo que usa o -flattensinalizador convertpara lidar com isso:

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

Outro fenômeno interessante é que você pode usar PPM (256 * 3 cores, por exemplo, RGB), PGM (256 cores, por exemplo, escala de cinza) ou PBM (2 cores, por exemplo, somente branco ou preto) como formato de entrada. Pelas minhas observações limitadas, parece que nas imagens sem serrilhado, o PPM e o PGM (que produzem SVGs idênticos até onde eu vejo) diminuem a área colorida e o PBM expande a área colorida (embora apenas um pouco). Presumivelmente, essa é a diferença entre um pixel > (256 / 2)teste e um pixel > 0teste. Você pode alternar entre os três alterando a extensão do arquivo, ou seja. o seguinte usa PBM :

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

7

Você também pode tentar http://image.online-convert.com/convert-to-svg

Eu sempre o uso para minhas necessidades.


Eu realmente trabalho como um encanto, mesmo em imagens complexas. Eu realmente aconselho esta ferramenta.
Atıfcan Ergin

Infelizmente não funcionou para mim.
adamj

Não funcionar bem se a imagem ter transparência
Genaut

Você não pode esperar que o script tire uma foto sua e obtenha um SVG perfeitamente em camadas, como resultado, não existe tal coisa. Se você tem uma forma simples e deseja obter o (s) caminho (s), isso é possível. Eu criei muitos ícones de fonte com essa página e nunca falhei para mim.
Thednp #

@thednp minha imagem saiu em preto e branco
iOSAndroidWindowsMobileAppsDev

7

Acabei de encontrar esta pergunta e respostas, pois estou tentando fazer a mesma coisa! Eu não queria usar algumas das outras ferramentas mencionadas. (Não queira dar meu e-mail nem pagar). Descobri que o Inkscape (v0.91) pode fazer um bom trabalho. Este tutorial é rápido e fácil de entender.

É tão simples quanto selecionar seu bitmap no Inkskape e Shift + Alt + B.

Detecção de Borda com a ferramenta de bitmap Inksape Trace baseada em potrace


4

Dependendo do motivo pelo qual você deseja converter de .png para .svg, talvez você não precise enfrentar o problema. A conversão de .png (raster) para .svg (vector) pode ser uma dor se você não estiver familiarizado com as ferramentas disponíveis ou se não for um designer gráfico por profissão.

Se alguém lhe enviar um arquivo grande e de alta resolução (por exemplo, 1024x1024), você poderá redimensioná-lo para praticamente o tamanho que desejar no GIMP. Muitas vezes, você terá problemas para redimensionar uma imagem se a resolução (número de pixels por polegada) for muito baixa. Para corrigir isso no GIMP, você pode:

  1. File -> Open: seu arquivo .png
  2. Image -> Image Properties: verifique a resolução e o espaço de cores. Você quer uma resolução em torno de 300 ppi. Na maioria dos casos, você deseja que o espaço de cores seja RGB.
  3. Image -> Mode: definido como RGB
  4. Image -> Scale Image: deixe o tamanho em branco, defina e a resolução Y para 300 ou superior. Hit Scale.
  5. Image -> Scale Image: a resolução agora deve ser 300 e agora você pode redimensionar a imagem para praticamente o tamanho que desejar.

Não é tão fácil quanto redimensionar um arquivo .svg, mas definitivamente mais fácil e rápido do que tentar converter um .png em um .svg, se você já possui uma imagem grande e de alta resolução.


2

Estou assumindo que você deseja escrever um software para fazer isso. Para fazer isso ingenuamente, basta encontrar linhas e definir os vetores. Para fazer isso de forma inteligente, você tenta ajustar formas ao desenho (ajuste do modelo). Além disso, você deve tentar determinar regiões com formato de bit (regiões que não podem modelar com vergonha ou aplicar texturas. Eu não recomendaria seguir esse caminho, pois isso levará um pouco de tempo e exigirá um pouco de gráficos e conhecimentos de visão computacional. No entanto, a saída será muito e dimensionada muito melhor do que a saída original.



0

Esta ferramenta está funcionando muito bem no momento.

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


17
Isso incorpora a imagem no SVG, não gráficos vetoriais reais
Paul Gobée

Isso converteu um dos meus pngs coloridos nos quais outros conversores online não foram capazes de converter corretamente. Eu pensei que estava funcionando, pois posso abri-lo no navegador, mas quando tentei abri-lo em outra ferramenta, ocorreu um erro. Talvez por causa do comentário indicado acima.
Vida

-1

Se você estiver em algum sistema Linux, o imagemagick é perfeito. Ou seja,

convert somefile.png somefile.svg

Isso funciona com montes de diferentes formatos.

Para outras mídias, como vídeos e uso de áudio (ffmpeg), eu sei que você declarou claramente png para svg; Ainda está relacionado à mídia.

ffmpeg -i somefile.mp3 somefile.ogg

Apenas uma dica para se você deseja passar por muitos arquivos; um loop usando truques básicos de shell ..

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

Isso remove o jpg e adiciona png, que indica ao que você deseja converter.


2
O Imagemagick funciona em outras plataformas, não apenas no 'Linux'.
Lunatik 24/07/12

25
Tecnicamente, isso funciona, no entanto, o arquivo svg gerado não é realmente um vetor gráfico - apenas contém o bitmap original "como está". Assim, quando você a amplia, ainda obtém a qualidade degradada de uma imagem rasterizada.
Erel Segal-Halevi

7
@archeyDevil não, isso não está "convertendo" em SVG, está "incorporando" o bitmap dentro de um SVG vazio. Não adianta ninguém.
Adam

4
@archeyDevil O título da pergunta é "converter ... para SVG". Sua resposta não se converte. Incorpora. PNG é um formato de bitmap, SVG é um formato vetorial. Diferença maciça. Embedding é inútil e não digno de um IMHO questão SO
Adam

3
Estou ciente de que não se converte. Eu fiz no entanto; publique isso para aqueles que não precisam de um vetor persay, mas precisam apenas de uma mudança rápida e suja entre os tipos de arquivos.
DarkFox
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.