PNG 이미지를 SVG로 변환하는 방법? [닫은]


266

PNG 이미지를 SVG로 변환하는 방법?


21
프로그래밍 방식으로 또는 그렇지 않습니까? 어떤 언어, 플랫폼?
Michael Petrotta 2009

일부 응용 프로그램이나 운영 체제 명령을 통해? 운영 시스템을 통해 당신은 운영 체제 .. 감사합니다 알려 주시기 바랍니다 수 있다면
마헤 Velaga

답변:


130

이미지를 업로드하고 결과를 볼 수있는 웹 사이트가 있습니다.

http://vectormagic.com/home

그러나 svg-image를 다운로드하려면 등록해야합니다. (등록하시면 2 개의 이미지를 무료로드립니다)


122

potrace입력 파일로 PNG지원 하지 않지만 PNM을 지원 합니다.
따라서 먼저 convertPNG에서 PNM으로 :

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

옵션 설명

  • potrace -s=> 출력 파일은 S VG입니다
  • potrace -o file.svg => 쓰기 출력 file.svg

입력 파일 = 2017.png 입력 파일

convert 2017.png 2017.pnm

임시 파일 = 2017.pnm

potrace 2017.pnm -s -o 2017.svg

출력 파일 = 2017.svg 결과물 파일

스크립트

ykarikos 는 내가 개선 한 png2svg.sh 스크립트를 제안합니다 .

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

한 줄 명령

많은 파일을 변환하려면 다음 한 줄 명령을 사용할 수도 있습니다.

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

또한보십시오

Wikipedia 에서 래스터-벡터 변환기의이 훌륭한 비교를 참조하십시오 .


2
potrace를 사용하여 pnm에서 svg로 변환하면 이미지의 색상이 느슨해집니다. 색상을 유지하는 방법이 있습니까?
코더

1
@mundella 님 안녕하세요. 나는 항상 potrace흑백 아이콘에 사용했습니다. 의견을 보내 주셔서 감사합니다. 그러나 색상을 유지하는 방법을 모르면 죄송합니다 ... Ho! 아이디어가 있습니다. 원본 이미지에 색상이 거의없는 경우 (3 개의 고유 한 색상이라고 가정) 3 개의 초기 이미지를 만들 수 있습니다 (각 색상마다 하나씩). 그런 다음 SVG로 변환하십시오. 마지막으로 3 개의 SVG 컨텐츠를 하나의 파일로 병합합니다 (SVG는 XML 기반). 이것이 도움이
되기를

@olibre 실용적으로 같은 작업을 수행하는 플랫폼이 있습니까?
Ami Kamboj

1
안녕하세요 @AmiKamboj. 귀하의 질문을 이해하지 못합니다. 명령 convert과는 potrace많은 플랫폼에서 사용할 수 있습니다. Linux 기반 컴퓨터를 사용하고 있습니다. 어제이 명령을 사용하여 스캔 한 용지에서 SVG를 생성했습니다. 결과를 볼 수 있습니다 : cpp-frug.github.io/images/Cpp-President-2017.svg 타겟에 대해 자세히 설명하십시오. 무엇을 원하십니까? 당신의 필요 / 희망은 무엇입니까? 건배 ;-)
올리버

1
나는 거의 모든 온라인 x to svg 변환기를 사용했습니다. potrace npm 패키지는 모두 물 밖으로 날려 버렸습니다. 그것은 굉장.
tsteve

59

PNG는 비트 맵 이미지 스타일이며 SVG는 비트 맵을 지원하는 벡터 기반 그래픽 디자인으로, 이미지를 벡터로 변환하는 것이 아니라 벡터 기반 형식으로 포함 된 이미지입니다. http://www.inkscape.org/ 를 사용하면 무료입니다. 그것은 그것을 포함시킬 것이지만, 원하는 경우 (potrace를 사용하여) 경로로 변환하려고 시도하는 엔진과 같은 라이브 트레이스도 있습니다. Adobe Illustrator의 라이브 추적보기 (상업용)는 예입니다.

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


1
잉크 스케이프의 라이브 트레이스를 사용하여 원본을 오래 잃어버린 로고를 다시 만들었습니다. 최신 버전에서 약간의 개선이 이루어지지 않은 한, 그것은 약간의 적중입니다. 또한 Inkscape에서 일부 로고를 수동으로 추적하고 상당히 잘 관리했습니다.
AnonJr

12
다음은 Inkscape에서이를 수행하는 방법에 대한 설명입니다. wiki.inkscape.org/wiki/index.php/Potrace
Erel Segal-Halevi

좋은 의견. 우리는 크롬이 그것으로 문제가없는 반면 아이폰 OS 7.1 사파리는 SVG의에 포함 된 이미지를 표시하지 않습니다 것으로 나타났습니다
ProblemsOfSumit

28

potrace 를보고 싶을 수도 있습니다 .


1
이 Potrace는 사용 방법을 알고있을 때 매우 정확합니다.하지만 여러 가지 색이 아닙니다. 1. 파일을 BMP로 변환하십시오. 당신은 검은 색으로 추적하고 싶습니다. 4.) 변환 5.) 폭과 높이를 원래대로 변경하십시오. 6) 정확한 추적에 감사하십시오.
PauAI

18

쉬운

  1. Inkscape 다운로드 (완전 무료)
  2. 이 짧은 유튜브 비디오 의 지침을 따르십시오

보시다시피, 다른 많은 영리한 .svg 작업을 원한다면 Inkscape를 사용하여 할 수도 있습니다.

기술적이지 않은 관찰 : 개인적으로 "무료"웹 사이트 제공보다이 방법을 선호합니다. 등록을 요구하는 것 외에도 이미지를 모든 실질적인 용어로 업로드하여 이미지를 웹 사이트 소유자에게 제공하기 때문입니다.


1
왜 공감해야합니까? 이 방법을 매우 성공적으로 사용합니다. 사람들이 귀하의 통찰력으로부터 혜택을 얻을 수있는 이유를 설명하기 위해 적어도 예의를 갖습니다.
Pancho

5
이 지침을 따르면 SVG XML로 이미지를 감싸는 것만으로 경로 데이터로 아무것도 변환하지 않습니다.
Robert

@ 로버트-정보 주셔서 감사합니다, 그것은 내 목적을 위해 잘 작동으로 행복하게 무지했다. 그러나 이것은 Inkscape가 완전한 PNG에서 SVG 로의 변환 등을 수행 할 수 있다는 사실을 방해하지는 않습니다. 관심있는 사람을 설명하기 위해 짧은 설명 비디오 클립을 포함하도록 내 대답을 수정했습니다.
Pancho

정말 그래요? 생성 된 SVG를 확인했는데 mobilefish 방법과 달리 경로 데이터가있는 것으로 보입니다 ...
dario_ramos

정당한 사유없이 때때로 이것을 다운 피팅하는 사람들이 있는데, 이것이 악의적이라는 의견을 만들기 시작했습니다. 실제로 아무런 이유가없는 경우 문제가 없다면 게으르지 말고이 커뮤니티에 가치를 제공하십시오.
판초

15

어도비 일러스트 레이터 :

Adobe Illustrator를 엽니 다. "파일"을 클릭하고 "열기"를 선택하여 .PNG 파일을 프로그램에로드합니다. 이미지를 .SVG 파일로 저장하기 전에 필요에 따라 이미지를 편집하십시오. "파일"을 클릭하고 "다른 이름으로 저장"을 선택하십시오. 새 파일 이름을 만들거나 기존 이름을 사용하십시오. 선택한 파일 형식이 SVG인지 확인하십시오. 디렉토리를 선택하고 "저장"을 클릭하여 파일을 저장하십시오.

또는

온라인 변환기 http://image.online-convert.com/convert-to-svg

필요한 변경을 할 수 있기 때문에 AI를 선호합니다

행운을 빕니다


3
online-convert.com의 경우 +1 완벽하게 수행 된 두 개의 단색 실루엣으로 지금 시도했습니다. 또한 완전 무료 인 것 같습니다.
nedR


1
Illustrator에서이 기능을 익힌다는 사실을 몰랐습니다. 이미 .ai 파일을 모두 사용하면 시간을 크게 절약 할 수 있습니다.
Doyle Lewis

10

놀랍게도 potrace 는 흑백으로 만 처리 할 수 ​​있습니다. 유스 케이스에는 좋을지 모르지만 일부는 색상 추적 부족이 문제가 될 수 있습니다.

개인적으로 Vector Magic으로 만족스러운 결과를 얻었습니다.

여전히 완벽하지 않습니다.


9

potraceimagemagick를 사용하는 사람들에게 투명성을 가진 PNG 이미지를 PPM으로 변환하는 것은 잘 작동하지 않는 것 같습니다. -flatten플래그 를 사용하여 convert이를 처리 하는 예는 다음과 같습니다 .

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

또 다른 흥미로운 현상은 PPM (256 * 3 색, 즉 RGB), PGM (256 색, 즉 회색조) 또는 PBM (2 색, 즉 흰색 또는 검은 색 만)을 입력 형식으로 사용할 수 있다는 것입니다. 제한된 관찰 결과, 앤티 앨리어싱 된 이미지에서 PPMPGM ( 내가 볼 수있는 한 동일한 SVG 를 생성 함 )은 컬러 영역을 축소하고 PBM 은 컬러 영역을 조금만 확장합니다. 아마도 이것은 pixel > (256 / 2)테스트와 테스트 의 차이 일 것 pixel > 0입니다. 파일 확장자를 변경하여 세 가지를 전환 할 수 있습니다. 다음 사용 PBM :

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

7

시도해 볼 수도 있습니다 http://image.online-convert.com/convert-to-svg

나는 항상 내 필요에 그것을 사용합니다.


나는 복잡한 이미지에서도 매력처럼 작동합니다. 나는 정말로이 도구를 조언한다.
Atıfcan Ergin

불행히도 나를 위해 일하지 않았다.
adamj

이미지가 투명하면 잘 작동하지 않습니다
Genaut

스크립트가 자신의 사진을 찍고 결과적으로 완벽하게 계층화 된 SVG를 얻는 것을 기대할 수는 없습니다. 그런 일은 없습니다. 모양이 단순하고 경로를 얻으려면이 작업을 수행하십시오. 나는 그 페이지로 많은 글꼴 아이콘을 만들었고 결코 실패하지 않았다.
thednp

@thednp 내 이미지가 흑백으로 나왔습니다
iOSAndroidWindowsMobileAppsDev

7

방금이 질문을 발견하고 같은 일을하려고합니다. 언급 한 다른 도구 중 일부를 사용하고 싶지 않았습니다. (내 이메일을 보내지 않고 지불하고 싶지 않습니다). Inkscape (v0.91)가 꽤 잘 작동한다는 것을 알았습니다. 이 튜토리얼 은 빠르고 이해하기 쉽습니다.

Inkskape 및 Shift + Alt + B 에서 비트 맵을 선택하는 것만 큼 간단합니다 .

potrace 기반의 Inksape Trace 비트 맵 도구를 사용한 에지 감지


4

이유 에 따라.png에서 .svg로 변환하려는 문제를 겪지 않아도됩니다. .png (래스터)에서 .svg (벡터)로 변환하는 것은 사용 가능한 도구에 익숙하지 않거나 무역에 의한 그래픽 디자이너가 아닌 경우 고통 스러울 수 있습니다.

누군가 고해상도의 대용량 파일 (예 : 1024x1024)을 보내면 김프에서 원하는 크기로 크기를 조정할 수 있습니다. 해상도 (인치당 픽셀 수)가 너무 낮은 경우 이미지 크기를 조정하는 데 문제가있을 수 있습니다. 김프에서이를 수정하려면 다음을 수행하십시오.

  1. File -> Open: .png 파일
  2. Image -> Image Properties: 해상도 및 색 공간을 확인하십시오. 약 300ppi의 해상도를 원합니다. 대부분의 경우 색 공간이 RGB가 되길 원합니다.
  3. Image -> Mode: RGB로 설정
  4. Image -> Scale Image: 크기 만 설정하고 Y 해상도를 300 이상으로 유지하십시오. 히트 스케일.
  5. Image -> Scale Image: 이제 해상도는 300이어야하며 이제 원하는 크기로 이미지 크기를 조정할 수 있습니다.

.svg 파일의 크기를 조정하는 것만 큼 쉽지는 않지만 이미 고해상도 이미지가 큰 경우 .png를 .svg로 변환하는 것보다 쉽고 빠릅니다.


2

이 작업을 수행하기 위해 소프트웨어를 작성하고 싶다고 가정합니다. 순진하게하려면 선을 찾아 벡터를 설정하면됩니다. 지능적으로 수행하려면 도면 (모형 피팅)에 모양을 맞추려고합니다. 또한 비트 맵 영역 (부끄러움이나 질감 적용을 통해 모델링 할 수없는 영역)을 확인해야합니다. 시간이 많이 걸리고 약간의 그래픽과 컴퓨터 비전 지식이 필요하므로이 경로를 사용하지 않는 것이 좋습니다. 그러나 출력은 원래 출력보다 훨씬 확장 성이 뛰어납니다.



0

이 도구는 현재 매우 잘 작동하고 있습니다.

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


17
이것은 실제 벡터 그래픽이 아닌 svg에 이미지를 포함시킵니다.
Paul Gobée

이것은 다른 온라인 변환기가 올바르게 변환 할 수없는 내 컬러 png 중 하나를 변환했습니다. 브라우저에서 열 수 있기 때문에 작동한다고 생각했지만 다른 도구에서 열려고하면 오류가 있습니다. 아마도 위에서 언급 한 의견 때문일 수 있습니다.
vida

-1

일부 Linux 시스템을 사용하는 경우 imagemagick이 완벽합니다. 즉

convert somefile.png somefile.svg

이것은 다른 형식의 힙과 함께 작동합니다.

비디오 및 오디오 사용 (ffmpeg)과 같은 다른 미디어의 경우 png를 svg로 명확하게 언급 한 것을 알고 있습니다. 여전히 미디어와 관련이 있습니다.

ffmpeg -i somefile.mp3 somefile.ogg

많은 파일을 살펴보고 싶을 때의 팁. 기본 쉘 트릭을 사용하는 루프 ..

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

jpg를 제거하고 원하는 변환을 알려주는 png를 추가합니다.


2
Imagemagick은 'Linux'뿐만 아니라 다른 플랫폼에서도 작동합니다.
Lunatik

25
그러나 이것은 기술적으로 작동하지만 생성 된 svg 파일은 실제로 벡터 그래픽 이 아니며 원본 비트 맵 "있는 그대로"만 포함합니다. 따라서 확대해도 래스터 이미지의 품질이 저하됩니다.
Erel Segal-Halevi

7
@archeyDevil 아니요, SVG로 "변환"되지 않고 빈 SVG 내부에 비트 맵을 "포함"합니다. 누구에게도 사용되지 않습니다.
Adam

4
@archeyDevil 질문 제목은 "convert ... to SVG"입니다. 답변이 변환되지 않습니다. 포함합니다. PNG는 비트 맵 형식이고 SVG는 벡터 형식입니다. 엄청난 차이. 임베딩은 쓸모없고 SO 질문에 합당하지 않습니다 IMHO
Adam

3
변환되지 않는다는 것을 알고 있습니다. 그러나 나는했다; 벡터 분석이 필요하지 않지만 파일 유형 사이에 빠르고 더러운 변경이 필요한 사람들을 위해 이것을 게시하십시오.
DarkFox
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.