Convertidor gratuït

PNG a Vectoritzador SVG

Converteix imatges ràster PNG/JPG en gràfics SVG vectorials escalables. Segur, ràpid i processat completament al vostre navegador.

Arrossegueu i deixeu anar PNG/JPG aquí

Admet fins a 50 MB

O

Sobre aquesta eina

Convertir PNG a SVG és fonamentalment una operació de traça, no un canvi de format. PNG emmagatzema píxels; SVG emmagatzema primitives geomètriques. Passar d'una quadrícula de píxels a camins vectorials escalables requereix interpretar el mapa de bits i dibuixar formes aproximades al voltant de regions de color similar. El resultat és realment escalable: podeu canviar la mida lliurement sense pixelar, però no és una reproducció perfecta de la font. El contingut fotogràfic es fa malament perquè cada variació de color a nivell de píxel es converteix en una forma, produint grans SVG que derroten el propòsit. Els logotips, les icones, les il·lustracions lineals i els gràfics d'alt contrast tracen netament perquè tenen un nombre reduït de regions de color amb límits ben definits.

Aquest convertidor utilitza la biblioteca imagetracerjs, un port JavaScript d'algorismes de traçat vectorials similars a potrace. El PNG es descodifica en un mapa de bits RGBA, el mapa de bits es segmenta en regions de color mitjançant una paleta configurable, el límit de cada regió es traça en un camí, els camins es simplifiquen mitjançant l'aproximació de Bezier i els camins resultants s'emeten com a elements del camí SVG. Tot el pipeline s'executa al vostre navegador sense cap càrrega del servidor.

Els paràmetres de traça controlen el compromís entre la fidelitat i la mida del fitxer. Més colors i més detalls produeixen un SVG més gran que coincideix més amb la font; menys colors i un traçat més gruixut produeixen un SVG més petit amb una sensació més estilitzada. Els valors predeterminats estan ajustats per a logotips i icones; Les imatges complexes poden beneficiar-se d'una passada de traçat amb paràmetres ajustats, o simplement poden no ser bons candidats per a la vectorització.

Per què convertir PNG a SVG

Vectoritzar un PNG és més útil quan necessiteu escalar la imatge més enllà de la seva resolució original. Els logotips, en particular, sovint arriben com a PNG amb una mida modesta i han d'aparèixer nítids en tanques publicitàries, pantalles de retina i impressions de gran format. Una traça vectorial produeix un SVG que escala sense pèrdua de qualitat; el compromís és la fidelitat als píxels originals.

SVG també és significativament més compacte que PNG per a gràfics amb pocs colors i zones planes grans. Una icona PNG a 256×256 pot tenir 8 KB; l'SVG equivalent amb dos o tres colors sovint és inferior a 1 KB. Per a les biblioteques d'icones d'interfície d'usuari lliurades a una interfície web, les versions vectorials redueixen la mida del paquet i milloren la nitidesa en totes les densitats de visualització.

Com utilitzar-la

Deixeu anar un PNG, trieu la configuració de traçat, genereu un SVG.

  1. Carregueu el vostre PNG: Arrossegueu el fitxer a l'àrea de càrrega o feu clic per navegar. Els millors resultats provenen de PNG amb vores nítides i un petit nombre de colors diferents: logotips, icones, dibuixos lineals, il·lustracions senzilles. Les fotografies tracen malament i produeixen SVGs enormes.
  2. Ajusteu les opcions de traça si cal: El recompte de colors controla quants colors diferents apareixen a la sortida. La simplificació del camí (també anomenada ltres o qtres) controla amb quina agressivitat l'algoritme suavitza les cantonades. Una precisió més alta produeix SVG més a prop de la font, però amb més dades del camí.
  3. Traça i vista prèvia: L'algorisme d'imagetracerjs passa per la quantificació de color, la detecció de vores, el traçat de contorns i l'ajust de Bezier. Traçar escales de temps amb la mida de la imatge i el nombre de colors. Un logotip de 256×256 amb traces de 4 colors en menys d'un segon; una imatge de 1024×1024 amb 16 colors pot trigar uns quants segons.
  4. Descarrega el SVG: Deseu l'SVG al vostre dispositiu. El fitxer conté un marcatge XML amb elements del camí; podeu obrir-lo a qualsevol editor de text per inspeccionar o ajustar manualment el resultat.

Casos d'ús comuns

Detalls tècnics

imagetracerjs implementa un pipeline de diverses etapes: la quantificació del color redueix el mapa de bits a un nombre fix de colors mitjançant l'agrupació de k-means o el tall mitjà; la detecció de vores identifica els límits de píxels entre regions; el traçat de contorns segueix els límits per produir polígons tancats; L'ajustament de línia i corba aproxima els polígons amb corbes de Bezier per reduir les dades del camí.

Els paràmetres de l'algorisme que més importen són el nombre de colors (típic: 4-32), patomit (les camins més curts que tants píxels es descarten com a soroll), ltres (tolerància de línia: fins a quin punt es pot desviar una vora abans de dividir-se en un nou segment) i qtres (tolerància de corba quadrada: amb quina agressivitat es suavitzen les corbes). Els valors predeterminats funcionen bé per als logotips; imatges complexes es beneficien de l'ajust per imatge.

La sortida és SVG 1.1 estàndard amb elements de ruta. Cada regió de color es converteix en un camí amb un atribut de farciment. El fitxer resultant s'obre en qualsevol navegador, editor de vectors o eina de disseny compatible amb SVG. La mida del fitxer depèn principalment del nombre de camins i de la densitat de nodes; un logotip de traçat típic és d'1 a 10 KB.

Bones pràctiques

Preguntes freqüents

La sortida SVG serà un autèntic fitxer vectorial?
L'eina rastreja la imatge ràster per crear camins vectorials. Els resultats funcionen millor amb gràfics, logotips i dibuixos lineals senzills. Les fotografies produiran camins complexos i poden no semblar com s'esperava.
Què fa que SVG sigui diferent d'altres formats d'imatge?
SVG és un format vectorial: les imatges es descriuen com a formes matemàtiques en lloc de píxels. Això significa que els fitxers SVG s'escalen a qualsevol mida sense perdre qualitat i, normalment, són molt més petits que les imatges ràster per a gràfics com ara logotips i icones.
Hi ha alguna limitació a tenir en compte?
S'admeten fitxers de fins a 50 MB. Els fitxers molt grans o complexos poden trigar més a processar-se. Totes les conversions es produeixen al vostre navegador, de manera que la velocitat de processament depèn del vostre dispositiu.
Les meves imatges es mantenen privades durant la conversió?
Sí. Els vostres fitxers PNG es processen completament al vostre navegador mitjançant l'API de Canvas i JavaScript. No es penja res a cap servidor: el fitxer passa directament des del dispositiu al convertidor i torna al dispositiu.
El rastre es pot editar a Illustrator o Inkscape?
Sí. La sortida és SVG estàndard amb elements de camí. Tant Illustrator com Inkscape l'obren de manera nativa i us permeten editar els camins, canviar els colors i refinar el resultat.
El meu PNG està penjat a un servidor?
No. El seguiment es fa al vostre navegador mitjançant imagetracerjs. El fitxer no surt del vostre dispositiu.
Per què el meu fitxer SVG és gran?
Normalment perquè la imatge d'origen té massa colors o massa detalls. Proveu de reduir el nombre de colors, augmentar la simplificació del camí o utilitzar una imatge d'origen diferent amb una geometria més neta.
Puc rastrejar un PNG amb transparència?
Sí. Els píxels transparents es converteixen en àrees sense camins a l'SVG. El fons transparent es conserva quan l'SVG es representa amb qualsevol color de fons.