Az SVG kép a webhelyek következő generációjának egyik fő vektorformátuma, és teljes mértékben integrálva van a HTML5 új szabványaival. Az Aurora SVG Viewer & Converter segítségével: Könnyedén megtekintheti az SVG grafikákat, és konvertálhatja produkcióit több formátumba.

A HTML5 megjelenése az SVG-formátumú vektorképek szélesebb körű használatát eredményezte. Ha Ön webfejlesztő, itt az ideje, hogy megelőzze a játékotés szerelje fel munkafolyamatát mindennel, amire szüksége van a HTML5- és SVG-képekkel való munkához. Az első lépés az, hogy megragad egy példányt a mai kedvezményes szoftverpromócióból, amely elérhető Mac és Windows felhasználók számára!

Aurora SVG Viewer & Converter megkönnyíti az SVG képek rendszerezését, megtekintését és konvertálását. Vel Aurora SVG Viewer & Converter, élvezheti a kényelmes miniatűr megjelenítési módot és az azonnal felismerhető mappanézetet. Ha egy SVG-képet más formátumba kell konvertálnia, Aurora SVG Viewer & Converter kíméli a napot, mivel lehetővé teszi a képek TIFF, PNG, JPB, BMP, GIF, TGA, XPM, PPM, XBM vagy akár PDF formátumban történő mentését. Még jobb, ha több fájlt is konvertálhat köteggel!

Természetesen mindig teljes ellenőrzése alatt áll a részletek felett Aurora SVG Viewer & Converter. Állítsa be a kimeneti felbontást, konvertálja az SVG-képek egyes részeit, és állítsa be a konverziós minőséget!

Windows képernyőkép: Mac képernyőkép:

Az Aurora SVG Viewer & Converter jellemzői:

1. Támogatás Windows és MAC OS.

2.Egyszerű mappa kiválasztásaés miniatűr megjelenítése mód.

3. Gyorsan megtekintheti az SVG-képeket vagy konvertálhatja azokat; támogatja SVG és SVGZ.

4. Az SVG konverter több képformátumra a következőket tartalmazza: tiff, png, jpg, bmp, gif, tga, xpm, ppm, xbm és pdf.

5. Batch Convert, készítsen listát a konvertálandó képekről, majd egy mozdulattal konvertálja és mentse egy másik mappába.

6. A kimeneti felbontás könnyen beállítható az ingyenes zoom felbontással. Válassza ki és konvertálja az SVG vászon bármely területét.

7. Bármelyik kiválasztott terület személyre szabása: válasszon egy területet az SVG-képből, és konvertálja.

Az egyik projektben svg formátumú kis ikonok jelentek meg a menü mellett, és arra volt szükség, hogy amikor a kurzort egy menüpont fölé viszi, a szöveg és az ikon színe megváltozzon. Hogy ne szaporodjon nagy számban képeket, úgy döntöttek, hogy az svg-t kódba fordítják, és CSS-stílusokban használják.

Rövid utasítások az SVG CSS-ben való használatához

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

Vegyük például a Facebook ikont (standard ikon enyhe módosítással).

A https://jakearchibald.github.io/svgomg/ webhelyen kattintson "SVG megnyitása" vagy egyszerűen húzza az ikont a nézeti területre. Kattintson a bal felső sarokban "KÓD", jelölje ki a kódot, majd kattintson a gombra másolás ikonra, így az SVG képünk kódját a pufferbe kapjuk.

Valami ilyesmi:

Ezután illessze be a kapott kódot a fenti ablakba, kattintson a Konvertálás gombra, és kapja meg a kész kódot háttér-ké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.200v.50.505. -3v3h3v8h3v-8h4z"/%3e%3c/svg%3e");

Másold ki és használd a css-ben.

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

Attól függően Miért.png-ről .svg-re szeretne konvertálni, akkor nem kell aggódnia. A .png (raszter) formátumból .svg (vektor) formátumba konvertálás fájdalmas lehet, ha nem ismeri nagyon a rendelkezésre álló eszközöket, vagy ha nem ismeri grafikus tervező szakma szerint.

Ha valaki nagy fájlt küld neked azzal nagy felbontású(pl. 1024x1024), szinte bármilyen méretre átméretezheted, amit használni szeretnél a GIMP-ben. Gyakran előfordul, hogy problémákat okoz a kép átméretezése, ha a felbontás (pixel per hüvelyk) túl alacsony. Ennek kijavításához a GIMP-ben a következőket teheti:

1. Fájl -> Megnyitás: az Ön .png fájlja
2. Kép -> Kép tulajdonságai: Ellenőrizze a felbontást és a színteret. 300 ppi körüli felbontást szeretne. A legtöbb esetben azt szeretné, hogy a színtér RGB legyen.
3. Kép -> Mód: Állítsa be az RGB értéket
4. Kép -> Kép méretezése: Hagyja külön a méretet, és állítsa az Y felbontást 300-ra vagy nagyobbra. Találat skála.
5. Kép -> Kép méretezése: A felbontásnak most 300-nak kell lennie, és szinte bármilyen méretre átméretezheti a képet.

Nem olyan egyszerű, mint egy .svg fájl átméretezése, de minden bizonnyal egyszerűbb és gyorsabb, mint egy .png fájl .svg formátumba konvertálása, ha már rendelkezik nagy, nagy felbontású képpel.

Adobe Illusztrátorral:

Nyissa meg az Adobe Illustrator programot. Kattintson a "Fájl" gombra, és válassza a "Megnyitás" lehetőséget, hogy betöltse a .PNG fájlt a programba. Szükség szerint bontsa ki a képet, mielőtt .SVG fájlként menti. Kattintson a "Fájl" gombra, és válassza a "Mentés másként" lehetőséget. Hozzon létre egy új fájlnevet, vagy használjon egy meglévő nevet. Győződjön meg arról, hogy a kiválasztott fájltípus SVG. Válasszon ki egy könyvtárat, és kattintson a "Mentés" gombra a fájl mentéséhez.

Én jobban szeretem az AI-t, mert bármit módosíthatsz

Most találtam erre a kérdésre és a válaszokra, mivel ugyanezt próbálom megtenni! Nem akartam néhány más említett eszközt használni. (Nem akarom elküldeni emailés nem akar fizetni). Azt tapasztaltam, hogy az Inkscape (v0.91) eléggé képes jó munkát. Ez az oktatóanyag gyors és könnyen érthető.

Ez olyan egyszerű, mint a választás bittérkép az Inkscape és Shift + Alt + B.

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

Van egy weboldal, ahol feltöltheti a képet, és megnézheti az eredményt.

De ha le akarod tölteni az svg képet, akkor regisztrálnod kell. (Ha regisztrálsz, 2 képet kapsz ingyen)

Ez azonban nem ideális.

A Png egy bitképstílus, az SVG pedig egy vektorgrafikus tervezés, amely támogatja a bitképeket, így nem konvertálja a képet vektorokká, hanem csak egy vektoros formátumba ágyazott képet. Ezt az ingyenes http://www.inkscape.org/ használatával teheti meg. Befecskendezi, de van benne Live Trace motor is, amely megpróbálja útvonalakká alakítani, ha akarja (a potrace segítségével). Lásd: Közvetlen nyomkövetés az Adobe Illustratorban (kereskedelmi) egy példa:

Gondolom írni akarsz szoftver erre. Ehhez egyszerűen meg kell találni a vonalakat és beállítani a vektorokat. Ennek intelligens elvégzéséhez megpróbálja a rajzhoz illeszteni az ábrákat (modellillesztés). Ezenkívül meg kell próbálnia meghatározni a raszteres régiókat (olyan régiókat, amelyeket nem lehet modellezéssel vagy textúrák alkalmazásával modellezni. Nem javaslom, hogy ezt az utat járja, mivel ez meglehetősen hosszú időt vesz igénybe, és egy kis grafikai és számítógépes látási ismereteket igényel. , a kimenet jelentősen és sokkal jobb lesz, mint az eredeti eredmény.

Ha valamelyikben vagy Linux rendszer, az imagemagick tökéletes. Azok.

Konvertálja a somefile.png somefile.svg fájlt

Ez rengeteg különböző formátummal működik.

Más médiák, például videó és hang (ffmpeg) esetében azonban Tudom, hogy egyértelműen kijelentette, hogy png to svg; Még mindig a médiáról van szó.

Ffmpeg -i somefile.mp3 somefile.ogg

Csak egy tipp, ha sok fájlon szeretne keresztülmenni; ciklus alapvető shell-trükkök segítségével.

f esetén *.jpg; konvertálja a $f $(f%jpg)png; kész

Ez eltávolítja a jpg-t, és hozzáadja a png-t, amely azt mondja, hogy konvertálja azt, amit akar.

A műalkotás nyomon követésének legegyszerűbb módja, ha megnyitja vagy elhelyezi a fájlt az Adobe Illustrator programban, és automatikusan követi a Trace Image paranccsal: Illustrator Help. Az Image Trace Tool használata – CS6

*Még egyszerűbb):
Szoftver segítségével az Ön által megadott képet/képet/rajzot/fotót 1(!) euróért vektorossá alakítjuk -> Kép vektor

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

• Az első fizetős, bár két kép ingyenesen létrehozható.

Angolul, bár nem nehéz megérteni. Használatának két lehetősége van – online vagy számítógépes program vásárlása. Az online használat (korlátlan) ára 7,95 dollár, az asztali program ára 295,00 dollár. Lehetőség van kézi nyomkövetés megrendelésére.
A szabadúszó portálokon persze lehet találni olcsóbbat is, de a választás mindenkié.

Pontosság

Fent található néhány összehasonlító kép a Vector Magic, az Adobe Live Trace (CS6) és a Corel programokról
Corel PowerTRACE (X6). Ügyeljen az alakzatok Vector általi gondos feldolgozására.

Könnyű használhatóság

Nem kell telepítenie és ismernie a sok lehetőséget és beállítást az elfogadható eredmény eléréséhez.

Csak néhány egyszerű kérdésre kell válaszolnia, és kész. Ha az eredmény nem kielégítő, van egy „hibaelhárítási” kézikönyv, ahol könnyen megtalálhatja a választ és megoldhatja a problémát.

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

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

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

Forrás képek itt JPG formátum, GIF, PNG, BMP és TIFF. Az eredmény három minőségi opció és három formátum: EPS, SVG és PNG. Befejezés után lehetőség van az ismétlésre más kívánt minőséggel és némi szerkesztéssel.

• Következő, teljesen INGYENES .

Teljesen angol nyelvű, de használat közben minden egyértelmű. Kicsit több beállítás és kézi munka, de megéri.

• lehetővé teszi a képek konvertálását . Feltölthet egy fájlt, vagy megadhat egy linket a képhez. Lehetőség van digitális effektusok alkalmazására is.

A raszteres képek (PNG vagy JPG) SVG formátumba konvertálása esetén az alakzatok és objektumok fekete-fehérré lesznek konvertálva vektoros grafika, amely minőségromlás nélkül skálázódik. Az ilyen képek segítségével színezhetők ingyenes programok a vektoros képekkel való munkáról (stb.). A fotósok a legtöbb esetben nem érik el a kívánt eredményt egy raszteres kép SVG formátumba konvertálásakor.

Ha bármelyiket átalakítod vektoros kép(például eps vagy ai formátum), a konverter megpróbálja megőrizni az összes vektor- és színadatot, és gondoskodik arról is, hogy a két fájl a lehető leghasonlóbb legyen.

A Scalable Vector Graphics (SVG) formátum konverter lehetővé teszi több mint 130 formátumú fájlok konvertálását. Útmutató a konverzióhoz:

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-ről SVG-re, DXF-ről SVG-re, EPDF-ről SVG-re, EPI-ről SVG-re, EPI-ről SVG-re, EPS-ről SVG-re, EPSF-ről SVG-re, EPSI-ről SVG-re, EPT-ről SVG-re, EPT2-ről SVG-re, EPT3-ról SVG-re, ERF-ről SVG-re, EXR-ről SVG-re, FAX-ról SVG, FIG - SVG, FITS - SVG, FPX - SVG, FRACTAL - SVG, FTS - SVG, G3 - SVG, GIF - SVG, GIF87 - SVG, GREY - SVG, GRB - SVG, HDR - SVG, HRZ - SVG, ICB-ről SVG-re, ICO-ról SVG-re, ICON-ról SVG-re, IPL-ről SVG-re, JBG-ről SVG-re, JBIG-ről SVG-re, JNG-ről SVG-re, JP2-ről SVG-re, JPC-ről SVG-re, JPE-ről SVG-re, JPEG-ről SVG-re, JPG-ről SVG-re, JPX-ről SVG-re 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, MRW - SVG, MSL - SVG, MSVG - SVG, MTV - SVG, MVG - SVG, NEF - SVG, NRW - SVG, ORF - SVG, OTB - SVG, OTF - SVG, PAL - SVG, PALM - SVG, PAM - 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, PNG3NG8 - SVG, PNG3NG8 - SVG, 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-ről SVG-re, WPG-ről SVG-re, X-ről SVG-re, X3F-ről SVG-re, XAML-ről SVG-re, XBM-ről SVG-re, XC-ről SVG-re, XCF-ről SVG-re, XFIG-ről SVG-re, XPM-ről SVG-re, XV-ről SVG-re, XWD-ről SVG-re, YCBCR-ről SVG, YCBCRA - SVG, YUV - SVG

Ráépítve nyitott megoldások, mint például az Autotrace, ImageMagick és különféle Linux grafikus komponensek.

A konvertálandó formátumok:

SVG - Scalable Vector Graphics 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ó dokumentum formátum
EPS - PostScript
PLT - HPGL plotter fájlok vágásához

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

Néha szükségessé válik az svg mentése png formátumban a böngésző segítségével. Sajnos a böngésző nem rendelkezik olyan mágikus API-val, amely ezt lehetővé tenné különféle feltörések nélkül. Mit tegyél, ha mégis el akarod érni, amit szeretnél?

Az első ötlet, ami eszembe jutott, az volt, hogy ezt a vászonon keresztül csináljam meg, aminek van egy metódusa a toDataURL("image/png");
Szóval, írtam egy egyszerű szkriptet: 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("width", 526); canvas.setAttribute("height", 233); var image = new Image; image.src = imgsrc; image.onload = függvény () ( context.drawImage(image, 0, 0); var canvasdata = canvas.toDataURL("image/png"); var a = document.createElement("a"); a.textContent = " mentés"; a.download = "export_" + Date.now() + ".png"; a.href = canvasdata; document.body.appendChild(a); canvas.parentNode.removeChild(canvas); );

A script lényege egyszerű: átalakítottam az svg-t dataUri-ba, feltöltöttem képen keresztül, rajzoltam egy képet vászonra és png-be alakítottam. Úgy tűnt, a célt elértük, pihenhettünk. Ez a megközelítés működött Firefoxban és Chrome-ban, de amikor megnyitottam mindenki kedvenc böngészőjében, az IE-ben, ezt a csodálatos hibát kaptam:

A helyzet az, hogy az IE úgy véli, hogy a kép egy másik gazdagépről lett betöltve. Sajnos a dataUri eredetét nem tudja beállítani. Valójában a szabályok leírása itt található: https://html.spec.whatwg.org/multipage/scripting.html#security-with-canvas-elements. Lehetett persze proxyzni az svg-t a szerveren keresztül, és akkor minden működni fog, de én tisztán kliens oldali megoldást akartam.

És akkor eszembe jutott a csodálatos canvg könyvtár. Ezzel a könyvtárral svg-t rajzolok vászonra, majd úgy járok el, mint az első opciónál: take toDataURL("image/png") . Az eredmény ez az egyszerű kód: github:

Var svg = document.querySelector("svg"); var canvas = document.createElement("canvas"); canvas.height = svg.getAttribute("height"); canvas.width = svg.getAttribute("width"); canvg(canvas, 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és párbeszédpanel megjelenítéséhez.
Ez minden, elértük a kívánt eredményt.

Egy dolog, amit érdemes megjegyezni, hogy a tauCharts export-bővítmény írásakor azon töprengtem, hogy svg-t menthetek png-be. Mivel az svg stílusai innen vannak beállítva külső fájl Az eredeti svg-vel való maximális hasonlóság elérése érdekében beszúrok egy beépített stílust az svg-be. És ezt az eredményt kapjuk.

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