Görüntüleri rasterden vektöre dönüştürme. SVG Simgesini CSS Koduna Dönüştür Görüntüyü SVG Biçimine Dönüştür

Gibi raster görüntülerden dönüştürdüğünüzde PNG'den SVG'ye dönüştürücü veya JPG'den SVG'ye dönüştürücü, formlarınızı ve nesnelerinizi siyah beyaz görüntülerde kalite kaybı olmadan büyütülebilen vektör grafiklere dönüştürür. Ardından bunları Inkscape gibi herhangi bir vektör grafik düzenleyicide boyayabilirsiniz.

Sıradan resimlerin dönüştürülmesi, büyük olasılıkla istenen sonucu vermeyecektir.

SVG'ye dönüştürmede en iyi sonuçları elde etmek için düz arka plana sahip bir resim kullanın.

• SVG'ye dönüştürmek için dosyayı seçin, sunucumuza indirilmesini bekleyin.
• Hemen hemen tüm görüntü formatlarını destekler (PNG, JPG, BMP ve diğerleri). Dosya boyutu sınırlı değildir, ancak dosya ne kadar büyükse, dönüştürülmesi o kadar uzun sürer.
• Dönüştürmeden sonra, orijinal dosyanızı ve altındaki sonucu göreceksiniz.
• Sonucu linkten indirin.

SVG formatına neden ihtiyacınız var ve nasıl kullanılır? PNG'yi SVG'ye veya JPG'yi SVG'ye dönüştürdükten sonra

SVG (Ölçeklenebilir Vektör Grafikleri), XML tabanlı bir vektör grafik formatıdır
Avantajı, kaliteyi ve ayrıntıları kaybetmeden görüntü boyutunu değiştirebilmenizdir. Boyutu artırdığınızda, vektör görüntüsü eğrilerin şeklini korur, böylece görüntü herhangi bir çözünürlükte görüntülenebilir.

Bir grafiği izlemenin en kolay yolu, dosyayı Adobe Illustrator'da açmak veya yerleştirmek ve Görüntü İzleme komutunu kullanarak otomatik olarak izlemektir: Illustrator Yardımı. Görüntü İzleme Aracını Kullanma - CS6

* Daha da kolay):
Yazılım tarafından, sizin tarafınızdan sağlanan görüntü / resim / çizim / fotoğraf - vektörde 1 (!) Euro -> Görüntüden vektöre

=== Çevrimiçi hizmetler ===

• İlki ücretlidir, ancak iki başlangıç ​​resmi ücretsiz olarak yapılabilir.

İngilizce, bunu anlamak kolay olsa da. Kullanmak için iki seçenek - çevrimiçi veya bilgisayar için bir program satın alın. Çevrimiçi kullanım (sınırsız) fiyatı 7,95 $, masaüstü programı 295,00 $ 'dır. Manuel izleme siparişi vermek mümkündür.
Tabii ki, serbest portallarda daha ucuza bulabilirsiniz, peki, herkes için bir seçenek var.

Kesinlik

Yukarıda Vector Magic, Adobe Live Trace (CS6) ve Corel'in bazı karşılaştırma görüntüleri bulunmaktadır.
Corel PowerTRACE (X6). Formların Vector tarafından işlenmesinin doğruluğuna dikkat edin.

Kullanım kolaylığı

Kabul edilebilir bir sonuç elde etmek için çok çeşitli seçenekler ve ayarlar yüklemeniz ve bilmeniz gerekmez.

Sadece birkaç basit soruyu cevaplamanız gerekiyor ve hepsi bu. Sonuç tatmin edici değilse, cevabı kolayca bulabileceğiniz ve sorunu çözebileceğiniz bir "hata kılavuzu" vardır.

Tatmin edici bir sonuç elde edene kadar tekrar tekrar deneyebilirsiniz.

Genel olarak, bu çalışmayı Vector'e kaydırabilir ve daha yaratıcı görevler yapabilirsiniz.

Çeviri ücretsizdir, ancak anlam bunun gibi bir şeydir.

JPG, GIF, PNG, BMP ve TIFF formatındaki kaynak resimler. Üç kalite seçeneği ve üç formatla sonuçlanır: EPS, SVG ve PNG. Tamamlandığında, istenen farklı kalitede tekrarlama ve biraz düzenleme mümkündür.

• Daha sonra, tamamen BEDAVA .

Tamamen İngilizce, ancak kullanım açık. Biraz daha fazla ayar ve el yapımı, ama buna değer.

• görüntüleri dönüştürmenize olanak tanır. Bir dosya yükleyebilir veya bir resme bağlantı sağlayabilirsiniz. Dijital efektlerin üst üste bindirilmesi de mümkündür.

Raster görüntüleri (PNG veya JPG) SVG formatına dönüştürürken, şekiller ve nesneler, kalite kaybı olmadan ölçeklenen siyah beyaz vektör grafiklerine dönüştürülür. Bu tür görüntüler kullanılarak renklendirilebilir ücretsiz yazılım vektör görüntüleri (ve diğerleri) ile çalışma hakkında. Fotoğrafçılar çoğu durumda bir bitmap'i SVG formatına dönüştürürken istenen sonucu elde edemezler.

SVG formatına dönüştürüyorsanız, vektör görüntü(örneğin, eps veya ai formatı), dönüştürücü tüm vektör ve renk verilerini korumaya çalışacak ve ayrıca iki dosyanın mümkün olduğunca benzer olmasını sağlayacaktır.

Ölçeklenebilir Vektör Grafikleri (SVG) format dönüştürücü, dosyaları 130'dan fazla formatta dönüştürmenize olanak tanır. Dönüşüm yönergeleri:

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 - SVG, DXF - SVG, EPDF - SVG, EPI - SVG, EPS - SVG, EPSF - SVG, EPSI - SVG, EPT - SVG, EPT2 - SVG, EPT3 - SVG, ERF - SVG, EXR - SVG, FAX - SVG, FIG - SVG, FITS - SVG, FPX - SVG, FRACTAL - SVG, FTS - SVG, G3 - SVG, GIF - SVG, GIF87 - SVG, GRİ - SVG, GRB - SVG, HDR - SVG, HRZ - SVG, ICB'den SVG'ye, ICO'dan SVG'ye, ICON'dan SVG'ye, IPL'den SVG'ye, JBG'den SVG'ye, JBIG'den SVG'ye, JNG'den SVG'ye, JP2'den SVG'ye, JPC'den SVG'ye, JPE'den SVG'ye, JPEG'den SVG'ye, JPG'den SVG'ye, JPX'den 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'den SVG'ye, MR W'den SVG'ye, MSL'den SVG'ye, MSVG'den SVG'ye, MTV'den SVG'ye, MVG'den SVG'ye, NEF'den SVG'ye, NRW'den SVG'ye, ORF'den SVG'ye, OTB'den SVG'ye, OTF'den SVG'ye, PAL'den SVG'ye, PALM'den SVG'ye, PAM'den SVG, PBM'den SVG'ye, PCD'den SVG'ye, PCDS'den SVG'ye, PCL'den SVG'ye, PCT'den SVG'ye, PCX'den SVG'ye, PDB'den SVG'ye, PDF'den SVG'ye, PDFA'dan SVG'ye, PEF'den SVG'ye, PES'den SVG'ye, PFA'dan SVG'ye, PFB'den SVG'ye, PFM'den SVG'ye, PGM'den SVG'ye, PICON'dan SVG'ye, PICT'den SVG'ye, PIX'den SVG'ye, PJPEG'den SVG'ye, PLAZMA'dan SVG'ye, PNG'den SVG'ye, PNG24'ten SVG'ye, PNG32'den SVG'ye, PNG8'den SVG'ye, PNM'den 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'den SVG'ye, TTF'den SVG'ye, TXT'den SVG'ye, VDA'dan SVG'ye, VICAR'dan SVG'ye, VID'den SVG'ye, VIFF'den SVG'ye, VST'den SVG'ye, WBMP'den SVG'ye, WEBP'den SVG'ye, WMF'den SVG'ye, WMZ'den SVG'ye, WPG'den SVG'ye dönüştürücü , 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 SVG'de

Autotrace, ImageMagick ve çeşitli linux grafik bileşenleri gibi açık kaynaklı çözümler üzerine kurulmuştur.

Dönüşüm biçimleri:

SVG - Ölçeklenebilir Vektör Grafik dosyaları
AI - Adobe Illustrator dosyaları (postscript tabanlı)
CGM - Bilgisayar Grafikleri Meta Dosyası dosyaları
WMF - Windows Meta Dosyası dosyaları
SK - Eskiz / Skencil dosyaları
PDF - Taşınabilir Belge Formatı
EPS - PostScript
PLT - Plotter dosyalarını kesmek için HPGL

ayrıca: P2E, FIG, EMF, MIF, ER, DXF, EPD, CGM, oDR2D

Projelerden birinde, menünün yanında svg formatında küçük simgeler görüntülendi ve bir menü öğesinin üzerine geldiğinizde metin ve simgenin renk değiştirmesi gerekiyor. ürememek için çok sayıda svg'nin koda çevrilmesine ve CSS stillerinde kullanılmasına karar verildi.

CSS'de SVG'nin nasıl kullanılacağına dair hızlı bir kılavuz

çıkan kodu css dosyamızda kullanıyoruz.

Örneğin, bir Facebook simgesini ele alalım (küçük bir değişiklikle standart bir simge).

https://jakearchibald.github.io/svgomg/ sitesinde tıklayın "SVG'yi aç" veya simgeyi görünüm alanına sürükleyin. solda üst köşe basarız "KOD", kodu seçin ve ardından kopyala simgesi, böylece svg resmimizin kodunu arabelleğe alırız.

Bunun gibi bir şey:

Ardından ortaya çıkan kodu yukarıdaki pencereye yapıştırıyoruz, Dönüştür'e tıklayıp işlemi tamamlıyoruz. arka plan görüntüsü:

Arka plan resmi: url ("veri: resim / svg + xml; karakter kümesi = UTF-8,% 3csvg xmlns =" ​​​​http://www.w3.org/2000/svg "width =" 20 "height =" 20 " viewBox = "0 0 20 20"% 3e% 3cpath doldurma kuralı = "evenodd" klip kuralı = "evenodd" doldurma = "% 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");

Kopyalayın ve css'inizde kullanın.

Rengi değiştirmek için fill = "% 23FFF" değiştirin, ancak % 23'ün normal bir # işareti olduğunu, yani fill = "% 23000" normal bir siyah (# 000) olduğunu unutmayın.

Bazen bir tarayıcı aracılığıyla svg'yi png'ye kaydetmek gerekli hale gelir. Ne yazık ki, tarayıcıda bunu çeşitli hackler olmadan yapmanıza izin verecek sihirli bir api yok. Hala istediğinizi elde etmek istiyorsanız ne yapmalısınız?

Aklıma ilk gelen fikir, bunu bir toDataURL ("image / png" yöntemine sahip olan canvas üzerinden yapmaktı;
Bu yüzden basit bir senaryo yazdım: jsfiddle, github:

Var html = document.querySelector ("svg").ParentNode.innerHTML; var imgsrc = "veri: resim / svg + xml; base64," + btoa (html); var canvas = document.querySelector ("tuval"), context = canvas.getContext ("2d"); canvas.setAttribute ("genişlik", 526); canvas.setAttribute ("yükseklik", 233); var image = 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 = " save "; a.download =" export_ "+ Date.now () +" .png "; a.href = canvasdata;document.body.appendChild (a); canvas.parentNode.removeChild (tuval););

Komut dosyasının özü basittir: svg'yi dataUri'ye dönüştürdüm, resim aracılığıyla yükledim, resmi tuval üzerine çizdim ve png'ye çevirdim. Hedefe ulaşılmış gibi görünüyordu ve rahatlayabilirsiniz. Bu yaklaşım Firefox ve Chrome'da işe yaradı, ancak onu favori tarayıcımız IE'de açtığımda harika bir hatayla karşılaştım:

Mesele şu ki, IE resmin başka bir ana bilgisayardan indirildiğini düşünüyor. Ne yazık ki, dataUri için Origin ayarı çalışmayacak. Aslında, kuralların açıklaması burada bulunabilir: https://html.spec.whatwg.org/multipage/scripting.html#security-with-canvas-elements. Elbette, sunucu üzerinden svg proxy'si yapmak mümkündü ve sonra her şey işe yarayacaktı, ancak tamamen istemci bir çözüm istedim.

Sonra harika canvg kitaplığını hatırladım. Bu kütüphaneyi kullanarak tuval üzerine svg çiziyorum ve ardından ilk seçenekteki gibi ilerliyorum: toDataURL ("image / png") alıyorum. Sonuç çok basit bir koddur: github:

Var svg = document.querySelector ("svg"); var canvas = document.createElement ("tuval"); canvas.height = svg.getAttribute ("yükseklik"); canvas.width = svg.getAttribute ("genişlik"); canvg (tuval, svg.parentNode.innerHTML.trim ()); var dataURL = canvas.toDataURL ("resim / png"); var data = atob (dataURL.substring ("veri: resim / png; base64,". uzunluk)), 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");

Kaydet iletişim kutusunu çağırmak için FileSaver kitaplığını da kullandığımı burada belirtmekte fayda var.
Hepsi bu, istenen sonucu elde ettik.

Bir nüansı belirtmekte fayda var - tauChart'ları dışa aktarmak için bir eklenti yazarken svg'yi png'ye kaydetmeyi merak ettim. svg'deki stiller şuradan ayarlandığından harici dosya orijinal svg ile mümkün olduğunca fazla benzerlik elde etmek için satır içi stili svg'ye ekliyorum. Ve bu sonucu alıyoruz.

Umarım bu makale sizin için yararlı olur ve zamandan tasarruf etmenizi sağlar.