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

potrace 및 imagemagick를 사용하는 사람들에게 투명성을 가진 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 색, 즉 흰색 또는 검은 색 만)을 입력 형식으로 사용할 수 있다는 것입니다. 제한된 관찰 결과, 앤티 앨리어싱 된 이미지에서 PPM 및 PGM ( 내가 볼 수있는 한 동일한 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.