Conversia imaginilor din raster în vector. Convertiți pictograma SVG în cod CSS Convertiți imaginea în format SVG

Când convertiți din imagini raster ca PNG în SVG sau JPG către SVG, vă va converti formularele și obiectele în imagini alb-negru în grafică vectorială care poate fi mărită fără pierderi de calitate. Apoi le puteți picta în orice editor grafic vector, cum ar fi Inkscape.

Conversia imaginilor obișnuite, cel mai probabil, nu va avea rezultatul dorit.

Pentru cele mai bune rezultate în conversia în SVG, utilizați imaginea cu fundal solid.

• Pentru a converti în SVG, selectați fișierul, așteptați descărcarea acestuia pe serverul nostru.
• Suportă aproape toate formatele de imagine (PNG, JPG, BMP și altele). Dimensiunea fișierului nu este limitată, dar cu cât fișierul este mai mare, cu atât va dura mai mult timp pentru a converti.
• După conversie, veți vedea fișierul original și rezultatul sub acesta.
• Descărcați rezultatul prin link.

De ce aveți nevoie de formatul SVG și cum să îl utilizați? După convertirea PNG în SVG sau JPG în SVG

SVG (Scalable Vector Graphics) este un format de grafică vectorială bazat pe XML
Avantajul este că puteți modifica dimensiunea imaginii fără a pierde calitatea și detaliile. Când măriți dimensiunea, imaginea vectorială păstrează forma curbelor, astfel încât imaginea poate fi afișată la orice rezoluție.

Cel mai simplu mod de a urmări o imagine este să deschideți sau să plasați fișierul în Adobe Illustrator și să-l urmăriți automat folosind comanda Urmărire imagine: Ajutor Illustrator. Utilizarea instrumentului de urmărire a imaginilor - CS6

* Și mai ușor):
Prin software, imaginea / imaginea / desenul / fotografia furnizate de dvs. - în vector pentru 1 (!) Euro -> Imagine în vector

=== Servicii online ===

• Prima este plătită, deși două imagini de început pot fi realizate gratuit.

În engleză, deși este ușor să-l dai seama. Două opțiuni de utilizare - online sau cumpărați un program pentru computer. Prețul pentru utilizarea on-line (nelimitat) este de 7,95 USD, programul pentru desktop este de 295,00 USD. Este posibil să comandați urmărirea manuală.
Desigur, pe portalurile independente îl puteți găsi mai ieftin, ei bine, există o alegere pentru toată lumea.

Precizie

Mai sus sunt câteva imagini de comparație cu Vector Magic, Adobe Live Trace (CS6) și Corel
Corel PowerTRACE (X6). Acordați atenție exactității procesării formularelor de către Vector.

Ușurință în utilizare

Nu este nevoie să instalați și să cunoașteți o mare varietate de opțiuni și setări pentru a obține un rezultat acceptabil.

Trebuie doar să răspunzi la câteva întrebări simple și atât. Dacă rezultatul nu este satisfăcător, atunci există un ghid „privind defecțiunile”, unde puteți găsi cu ușurință răspunsul și rezolva problema.

Puteți încerca din nou și din nou până când obțineți un rezultat satisfăcător.

În general, puteți schimba această lucrare pe Vector și puteți efectua sarcini mai creative.

Traducerea este gratuită, dar sensul este cam așa.

Imagini sursă în format JPG, GIF, PNG, BMP și TIFF. Rezultă trei opțiuni de calitate și trei formate: EPS, SVG și PNG. După finalizare, este posibilă repetarea cu o calitate dorită diferită și o anumită editare.

• Apoi, complet LIBER .

Complet în limba engleză, dar utilizarea este clară. Puțin mai multe setariși lucrate manual, dar merită.

• vă permite să convertiți imagini în. Puteți încărca un fișier sau puteți furniza un link către o imagine. Suprapunerea efectelor digitale este, de asemenea, posibilă.

La conversia imaginilor raster (PNG sau JPG) în format SVG, formele și obiectele vor fi convertite în grafică vectorială alb-negru, care este scalată fără pierderi de calitate. Astfel de imagini pot fi colorate folosind software gratuit despre lucrul cu imagini vectoriale (și altele). În majoritatea cazurilor, fotografii nu vor obține rezultatul dorit atunci când convertesc o hartă de biți în format SVG.

Dacă faceți conversia în format SVG imagine vectorială(de exemplu, format eps sau ai), convertorul va încerca să păstreze toate datele vectoriale și color și, de asemenea, să se asigure că cele două fișiere sunt cât se poate de similare.

Convertorul de format Scalable Vector Graphics (SVG) vă permite să convertiți fișiere în peste 130 de formate. Direcții de conversie:

3FR la SVG, AFF la SVG, AI la SVG, ANI la SVG, ART la SVG, ARW la SVG, AVI la SVG, AVS la SVG, BMP la SVG, CDR la SVG, CGM la SVG, CIN la SVG, CMYK la SVG, CMYKA la SVG, CR2 la SVG, CRW la SVG, CUR la SVG, CUT la SVG, DCM la SVG, DCR la SVG, DCX la SVG, DDS la SVG, DFONT la SVG, DIA la SVG, DNG la SVG, DPX la SVG, DXF la SVG, EPDF la SVG, EPI la SVG, EPS la SVG, EPSF la SVG, EPSI la SVG, EPT la SVG, EPT2 la SVG, EPT3 la SVG, ERF la SVG, EXR la SVG, FAX la SVG, FIG la SVG, FITS la SVG, FPX la SVG, FRACTAL la SVG, FTS la SVG, G3 la SVG, GIF la SVG, GIF87 la SVG, GRI la SVG, GRB la SVG, HDR la SVG, HRZ la SVG, ICB la SVG, ICO la SVG, ICON la SVG, IPL la SVG, JBG la SVG, JBIG la SVG, JNG la SVG, JP2 la SVG, JPC la SVG, JPE la SVG, JPEG la SVG, JPG la SVG, JPX la SVG, K25 la SVG, KDC la SVG, M2V la SVG, M4V la SVG, MAT la SVG, MIFF la SVG, MNG la SVG, MONO la SVG, MOV la SVG, MP4 la SVG, MPC la SVG, MPEG la SVG, MPG în SVG, MR W la SVG, MSL la SVG, MSVG la SVG, MTV la SVG, MVG la SVG, NEF la SVG, NRW la SVG, ORF la SVG, OTB la SVG, OTF la SVG, PAL la SVG, PALM la SVG, PAM la SVG, PBM la SVG, PCD la SVG, PCDS la SVG, PCL la SVG, PCT la SVG, PCX la SVG, PDB la SVG, PDF la SVG, PDFA la SVG, PEF la SVG, PES la SVG, PFA la SVG, PFB la SVG, PFM la SVG, PGM la SVG, PICON la SVG, PICT la SVG, PIX la SVG, PJPEG la SVG, PLASMA la SVG, PNG la SVG, PNG24 la SVG, PNG32 la SVG, PNG8 la SVG, PNM la SVG, PPM la SVG, PS la SVG, PSD la SVG, PTIF la SVG, PWP la SVG, RAF la SVG, RAS la SVG, RGB la SVG, RGBA la SVG, RLA la SVG, RLE la SVG, SCT la SVG, SFW la SVG, SGI la SVG, SK la SVG, SK1 la SVG, SR2 la SVG, SRF la SVG, SUN la SVG, SVG la SVG, SVGZ la SVG, TGA la SVG, TIF la SVG, TIFF la SVG, TIM la SVG, TTC la SVG, TTF la SVG, TXT la SVG, VDA la SVG, VICAR la SVG, VID la SVG, VIFF la SVG, VST la SVG, WBMP la SVG, WEBP la SVG, WMF la SVG, WMZ la SVG, WPG în SVG , X la SVG, X3F la SVG, XAML la SVG, XBM la SVG, XC la SVG, XCF la SVG, XFIG la SVG, XPM la SVG, XV la SVG, XWD la SVG, YCBCR la SVG, YCBCRA la SVG, YUV în SVG

Construită pe soluții open source, cum ar fi Autotrace, ImageMagick și diverse componente grafice Linux.

Formate de conversie:

SVG - Fișiere grafice vectoriale scalabile
AI - Fișiere Adobe Illustrator (bazate pe postscript)
CGM - Fișiere de fișiere grafice pe computer
WMF - Fișiere Windows Metafile
SK - Sketch / Skencil files
PDF - Format de document portabil
EPS - PostScript
PLT - HPGL pentru tăierea fișierelor plotter

de asemenea: P2E, FIG, EMF, MIF, ER, DXF, EPD, CGM, oDR2D

Într-unul dintre proiecte, pictogramele mici în format svg au fost afișate lângă meniu și este necesar ca atunci când treceți cu mouse-ul peste un element de meniu, textul și pictograma să schimbe culoarea. Pentru a nu procrea un numar mare de imagini, s-a decis să traducem svg în cod și să-l folosim în stiluri CSS.

Un ghid rapid despre cum să utilizați SVG în CSS

folosim codul rezultat în fișierul nostru CSS.

De exemplu, să luăm o pictogramă Facebook (o pictogramă standard cu o ușoară modificare).

Pe site-ul https://jakearchibald.github.io/svgomg/ faceți clic „Deschideți SVG” sau pur și simplu trageți pictograma în fereastra de vizualizare. In stanga colțul superior apăsăm "COD", selectați codul, apoi faceți clic pe pictograma copiere, așa că primim codul imaginii noastre svg în buffer.

Ceva de genul:

Apoi lipim codul rezultat în fereastra de mai sus, facem clic pe Convertește și obținem finalul imagine de fundal:

Imagine de fundal: url ("data: image / svg + xml; charset = UTF-8,% 3csvg xmlns =" ​​http://www.w3.org/2000/svg "width =" 20 "height =" 20 "viewBox =" 0 0 20 20 "% 3e% 3cpath fill-rule =" evenodd "clip-rule =" evenodd "fill ="% 23FFF "d =" M12.748 16v-1h6v1h-6zm0-3h6v1h-6v- 1zm4 5h -4v-1h4v1zM13.748 9.975v-3h-4v-1c0-1.104.896-2 2-2h2v-2.95h-2c-2.8.256-5 2.583-5 5,45 0 .017.005.032.005.05h-.005v .45h -3v3h3v8h3v-8h4z "/% 3e% 3c / svg% 3e");

Copiați-l și utilizați-l în css.

Pentru a schimba culoarea, schimbați umplerea = "% 23FFF", luați în considerare doar că% 23 este un semn regulat #, adică fill = "% 23000" este un negru obișnuit (# 000).

Uneori devine necesar să salvați svg în png prin intermediul unui browser. Din păcate, browserul nu are un API magic care să vă permită să faceți acest lucru fără diverse hack-uri. Ce să faci dacă totuși vrei să realizezi ceea ce vrei?

Prima idee care mi-a venit în minte a fost să o fac prin pânză, care are o metodă toDataURL („imagine / png”);
Deci, am scris un script simplu: jsfiddle, github:

Var html = document.querySelector ("svg"). ParentNode.innerHTML; var imgsrc = "data: image / svg + xml; base64," + btoa (html); var canvas = document.querySelector ("canvas"), context = canvas.getContext ("2d"); canvas.setAttribute ("lățime", 526); canvas.setAttribute ("înălțime", 233); var imagine = new Image; image.src = imgsrc; image.onload = function () (context.drawImage (image, 0, 0); var canvasdata = canvas.toDataURL ("image / png"); var a = document.createElement ("a"); a.textContent = " salvare "; a.download =" export_ "+ Date.now () +" .png "; a.href = canvasdata; document.body.appendChild (a); canvas.parentNode.removeChild (canvas););

Esența scriptului este simplă: am convertit svg în dataUri, l-am încărcat prin imagine, am pictat imaginea pe pânză și am transformat-o în png. Se părea că obiectivul a fost atins și vă puteți relaxa. Această abordare a funcționat în Firefox și Chrome, dar când am deschis-o în browserul nostru preferat IE, am primit o eroare minunată:

Problema este că IE crede că poza a fost descărcată de la altă gazdă. Din păcate, setarea originii pentru dataUri nu va funcționa. De fapt, descrierea regulilor poate fi găsită aici: https://html.spec.whatwg.org/multipage/scripting.html#security-with-canvas-elements. A fost posibil, desigur, să proxy svg prin server, și apoi totul ar funcționa, dar am vrut o soluție pur client.

Și apoi mi-am amintit despre minunata bibliotecă canvg. Folosind această bibliotecă, desenez svg pe pânză și apoi procedez ca în prima opțiune: iau laDataURL ("imagine / png"). Rezultatul este un cod atât de simplu: github:

Var svg = document.querySelector ("svg"); var canvas = document.createElement ("pânză"); canvas.height = svg.getAttribute ("înălțime"); canvas.width = svg.getAttribute ("lățime"); canvg (canvas, svg.parentNode.innerHTML.trim ()); var dataURL = canvas.toDataURL ("imagine / png"); var data = atob (dataURL.substring ("data: image / png; base64,". length)), asArray = new Uint8Array (data.length); for (var i = 0, len = data.length; i< len; ++i) { asArray[i] = data.charCodeAt(i); } var blob = new Blob(, {type: "image/png"}); saveAs(blob, "export_" + Date.now() + ".png");

Merită menționat aici că am folosit și biblioteca FileSaver pentru a invoca dialogul de salvare.
Atât, am obținut rezultatul dorit.

Merită menționat o nuanță - m-am întrebat despre salvarea svg în png când scriam un plugin pentru exportul tauCharts. Deoarece stilurile din svg sunt setate de la fișier extern pentru a obține cât mai multă asemănare cu svg-ul original, introduc stilul inline în svg. Și obținem acest rezultat.

Sper că acest articol vă va fi util și vă va economisi timpul.