Képek konvertálása raszterekből vektorokká. SVG ikon konvertálása CSS kódba A kép konvertálása SVG formátumba

Amikor raszteres képekből konvertál, mint a PNG - SVG vagy JPG - SVG, konvertálja az űrlapjait és objektumait fekete-fehér képekben vektorgrafikában, amelyek minőségromlás nélkül nagyíthatók. Ezután bármilyen vektorgrafikus szerkesztőben, például az Inkscape -ben festheti őket.

A közönséges képek konvertálása valószínűleg nem eredményezi a kívánt eredményt.

Az SVG formátumú konvertáláshoz a legjobb eredmény érdekében szilárd háttérrel rendelkező képet használjon.

• Az SVG formátumba való konvertáláshoz válassza ki a fájlt, és várja meg, amíg letöltődik a szerverünkre.
• Szinte minden képformátumot támogat (PNG, JPG, BMP és egyéb). A fájl mérete nincs korlátozva, de minél nagyobb a fájl, annál több időbe telik a konvertálás.
• Az átalakítás után látni fogja az eredeti fájlt és az eredményt alatta.
• Töltse le az eredményt a linken keresztül.

Miért van szüksége az SVG formátumra és hogyan kell használni? Miután konvertálta a PNG -t SVG -re vagy a JPG -t SVG -re

Az SVG (Scalable Vector Graphics) egy XML-alapú vektorgrafikus formátum
Előnye, hogy megváltoztathatja a kép méretét a minőség és a részletek elvesztése nélkül. A méret növelésekor a vektoros kép megőrzi a görbék alakját, így a kép bármilyen felbontásban megjeleníthető.

A grafika legegyszerűbb módja, ha megnyitja vagy elhelyezi a fájlt az Adobe Illustrator alkalmazásban, és automatikusan követi azt az Image Trace paranccsal: Illustrator Help. Az Image Trace Tool használata - CS6

* Még könnyebb):
Szoftver szerint az Ön által biztosított kép / kép / rajz / fénykép - vektorban 1 (!) Euróért -> Kép vektor

=== Online szolgáltatások ===

• Az első fizetős, bár két kezdőkép ingyen elkészíthető.

Angolul, bár könnyű kitalálni. Két lehetőség a használathoz - online, vagy vásároljon programot számítógéphez. Az on-line használat ára (korlátlan) 7,95 USD, az asztali program 295,00 USD. Lehetőség van manuális nyomkövetés megrendelésére.
Természetesen a szabadúszó portálokon olcsóbban találhat, nos, mindenkinek van választási lehetősége.

Pontosság

A fenti néhány összehasonlító kép a Vector Magic, az Adobe Live Trace (CS6) és a Corel
Corel PowerTRACE (X6). Ügyeljen az űrlapok vektor által történő feldolgozásának pontosságára.

Egyszerű használat

Az elfogadható eredmény eléréséhez nem kell sokféle opciót és beállítást telepítenie és ismernie.

Csak néhány egyszerű kérdésre kell válaszolnia, és ennyi. Ha az eredmény nem kielégítő, akkor van egy "hiba útmutató", ahol könnyen megtalálhatja a választ és megoldhatja a problémát.

Újra és újra megpróbálhatja, amíg kielégítő eredményt nem kap.

Általában ezt a munkát áthelyezheti a vektorra, és kreatívabb feladatokat végezhet.

A fordítás ingyenes, de a jelentése valami ilyesmi.

Forrásképek JPG, GIF, PNG, BMP és TIFF formátumban. Három minőségi lehetőséget és három formátumot eredményez: EPS, SVG és PNG. Ha elkészült, az ismétlés más kívánt minőséggel és némi szerkesztéssel lehetséges.

• Ezután teljesen INGYENES .

Teljesen angolul, de a használata egyértelmű. Egy kis további beállításokés kézzel készített, de megéri.

• lehetővé teszi a képek konvertálását. Feltölthet egy fájlt, vagy linket adhat a képhez. Digitális effektek átfedése is lehetséges.

A raszterképek (PNG vagy JPG) SVG formátumba konvertálásakor az alakzatok és objektumok fekete -fehér vektorgrafikákká alakulnak át, amelyek minőségromlás nélkül méretezhetők. Az ilyen képeket a segítségével színezhetjük ingyenes szoftver a vektoros képekkel (és másokkal) való munkáról. A fotósok a legtöbb esetben nem érik el a kívánt eredményt, amikor a bitképet SVG formátumba konvertálják.

Ha bármilyen SVG formátumra konvertál vektoros kép(például eps vagy ai formátum), az átalakító megpróbálja megőrizni az összes vektor- és színadatot, és gondoskodni fog arról is, hogy a két fájl a lehető legnagyobb mértékben hasonlítson egymásra.

A Scalable Vector Graphics (SVG) formátum konverter lehetővé teszi több mint 130 formátumú fájlok konvertálását. Konverziós irányok:

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

Nyílt forráskódú megoldásokra épül, mint például az Autotrace, az ImageMagick és a különböző linuxos grafikus összetevők.

Konverziós formátumok:

SVG - Skálázható vektorgrafikus fájlok
AI - Adobe Illustrator fájlok (postscript alapú)
CGM - Computer Graphics Metafile fájlok
WMF - Windows Metafile fájlok
SK - Sketch / Skencil fájlok
PDF - hordozható dokumentumformátum
EPS - PostScript
PLT - HPGL plotter fájlok vágásához

és: P2E, FIG, EMF, MIF, ER, DXF, EPD, CGM, oDR2D

Az egyik projektben kicsi, svg formátumú ikonok jelentek meg a menü közelében, és szükség van arra, hogy amikor az egérmutatót egy menüpont fölé viszi, a szöveg és az ikon színe megváltozik. Hogy ne szaporodjon nagyszámú képek, úgy döntöttünk, hogy lefordítjuk az svg kódot, és CSS stílusokban használjuk.

Gyors útmutató az SVG használatáról a CSS -ben

a kapott kódot használjuk a css fájlunkban.

Vegyük például a Facebook ikont (egy szabványos ikon, némi változtatással).

A https://jakearchibald.github.io/svgomg/ oldalon kattintson "SVG megnyitása" vagy csak húzza az ikont a nézetablakba. Balra felső sarok nyomjuk "KÓD", válassza ki a kódot, majd kattintson a gombra másolás ikonra, így bekapjuk az svg-kép kódját a pufferbe.

Valami ilyesmi:

Ezután illessze be a kapott kódot a fenti ablakba, kattintson a Konvertálás gombra, és készen áll háttérkép:

Háttérkép: 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");

Másolja és használja a css -ben.

A szín megváltoztatásához módosítsa a fill = "% 23FFF" értéket, de ne feledje, hogy% 23 egy szabályos # jel, vagyis a fill = "% 23000" szabályos fekete ( # 000).

Néha szükségessé válik, hogy böngészővel mentse az svg -t a png -be. Sajnos a böngészőben nincs olyan varázslatos api, amely lehetővé tenné ezt különféle hackelés nélkül. Mi a teendő, ha továbbra is azt akarja elérni, amit szeretne?

Az első ötlet, ami eszembe jutott, az volt, hogy vászonon keresztül kell elvégezni, amelynek toDataURL ("image / png") metódusa van;
Szóval, írtam egy egyszerű forgatókönyvet: jsfiddle, github:

Var html = document.querySelector ("svg"). ParentNode.innerHTML; var imgsrc = "adatok: image / svg + xml; base64," + btoa (html); var vászon = document.querySelector ("vászon"), kontextus = canvas.getContext ("2d"); canvas.setAttribute ("szélesség", 526); canvas.setAttribute ("magasság", 233); var image = új kép; image.src = imgsrc; image.onload = function () (context.drawImage (image, 0, 0); var canvasdata = canvas.toDataURL ("image / png"); var a = document.createElement ("a"); a.textContent = " save "; a.download =" export_ " + Date.now () +" .png "; a.href = canvasdata; document.body.appendChild (a); canvas.parentNode.removeChild (vászon););

A szkript lényege egyszerű: az svg -t dataUri -ra konvertáltam, képen keresztül töltöttem be, a képet vászonra rajzoltam és png -re alakítottam. Úgy tűnt, hogy a célt elérték, és pihenhet. Ez a megközelítés működött a Firefoxban és a Chrome -ban, de amikor megnyitottam kedvenc IE böngészőnkben, csodálatos hibát kaptam:

A helyzet az, hogy az IE úgy gondolja, hogy a képet egy másik gazdagépről töltötték le. Sajnos a dataUri eredetének beállítása nem fog működni. Valójában a szabályok leírása itt található: https://html.spec.whatwg.org/multipage/scripting.html#security-with-canvas-elements. Természetesen lehetséges volt az svg proxyszervezése a szerveren keresztül, és akkor minden működni fog, de én tisztán kliens megoldást akartam.

És akkor eszembe jutott a csodálatos canvg könyvtár. Ezzel a könyvtárral rajzolok svg -t a vászonra, majd az első lehetőség szerint folytatom: toDataURL ("image / png"). Az eredmény egy ilyen egyszerű kód: github:

Var svg = document.querySelector ("svg"); var vászon = document.createElement ("vászon"); canvas.height = svg.getAttribute ("magasság"); canvas.width = svg.getAttribute ("szélesség"); canvg (vászon, svg.parentNode.innerHTML.trim ()); var dataURL = canvas.toDataURL ("image / 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");

Itt érdemes megemlíteni, hogy a FileSaver könyvtárat is használtam a mentési párbeszédablak meghívásához.
Ennyi, elértük a kívánt eredményt.

Érdemes megjegyezni egy árnyalatot - azon tűnődtem, hogyan menthetem svg -t png -re, amikor plugint írtam a tauCharts exportálásához. Mivel a svg stílusok innen vannak külső fájl hogy minél nagyobb hasonlóságot érjünk el az eredeti svg -vel, beszúrom az inline stílust az svg -be. És ezt az eredményt kapjuk.

Remélem, hogy ez a cikk hasznos lesz az Ön számára, és időt takarít meg.