Ubah svg menjadi png. Mengonversi gambar dari raster ke vektor Petunjuk singkat tentang cara menggunakan SVG di CSS
Terkadang ada kebutuhan untuk menyimpan svg sebagai png menggunakan browser. Sayangnya, browser tidak memiliki API ajaib yang memungkinkan hal ini dilakukan tanpa berbagai peretasan. Apa yang harus dilakukan jika Anda masih ingin mencapai apa yang Anda inginkan?
Ide pertama yang terlintas di benak saya adalah melakukan ini melalui kanvas, yang memiliki metode toDataURL("image/png");
Jadi, saya menulis skrip sederhana: jsfiddle, github:
Var html = dokumen.querySelector("svg").parentNode.innerHTML; var imgsrc = "data:gambar/svg+xml;base64," + btoa(html); var kanvas = dokumen.querySelector("kanvas"), konteks = kanvas.getContext("2d"); kanvas.setAttribute("lebar", 526); kanvas.setAttribute("tinggi", 233); var gambar = Gambar baru; gambar.src = imgsrc; gambar.onload = fungsi () ( konteks.drawImage(gambar, 0, 0); var canvasdata = canvas.toDataURL("image/png"); var a = document.createElement("a"); a.textContent = " simpan"; a.download = "ekspor_" + Tanggal.sekarang() + ".png"; a.href = kanvasdata; dokumen.body.appendChild(a); kanvas.parentNode.removeChild(kanvas); );
Inti dari skrip ini sederhana: Saya mengonversi svg ke dataUri, memuatnya melalui gambar, menggambar di kanvas, dan mengubahnya menjadi png. Tampaknya tujuan telah tercapai dan kami bisa bersantai. Pendekatan ini berhasil di Firefox dan Chrome, tetapi ketika saya membukanya di browser favorit semua orang, IE, saya mendapat kesalahan luar biasa ini:
Faktanya adalah IE mengira gambar tersebut diunduh dari host lain. Sayangnya, Anda tidak dapat menyetel asal untuk dataUri. Sebenarnya penjelasan aturannya dapat ditemukan di sini: https://html.spec.whatwg.org/multipage/scripting.html#security-with-canvas-elements. Tentu saja dimungkinkan untuk mem-proxy svg melalui server, dan kemudian semuanya akan berfungsi, tetapi saya menginginkan solusi sisi klien murni.
Dan kemudian saya teringat perpustakaan canvg yang indah. Dengan menggunakan perpustakaan ini, saya menggambar svg di atas kanvas, dan kemudian melanjutkan seperti pada opsi pertama: ambil toDataURL("image/png") . Hasilnya adalah kode sederhana ini: github:
Var svg = dokumen.querySelector("svg"); var canvas = document.createElement("kanvas"); kanvas.tinggi = svg.getAttribute("tinggi"); kanvas.lebar = svg.getAttribute("lebar"); canvg(kanvas, svg.parentNode.innerHTML.trim()); var dataURL = kanvas.toDataURL("gambar/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");
Perlu disebutkan di sini bahwa saya juga menggunakan perpustakaan FileSaver untuk membuka kotak dialog penyimpanan.
Itu saja, kami telah mencapai hasil yang diinginkan.
Satu hal yang perlu diperhatikan adalah saya bertanya-tanya tentang menyimpan svg ke png ketika saya menulis plugin ekspor tauCharts. Karena gaya di svg disetel dari file eksternal, untuk mencapai kemiripan maksimum dengan svg asli, saya memasukkan gaya sebaris ke dalam svg. Dan kami mendapatkan hasil ini.
Saya harap artikel ini bermanfaat bagi Anda dan menghemat waktu Anda.
Tampaknya tidak bekerja dengan baik. Berikut ini contoh yang menggunakan tanda -flatten untuk konversi:
Sudo apt-get install potrace imagemagick convert -flatten input.png output.ppm potrace -s output.ppm -o output.svg rm output.ppm
Fenomena menarik lainnya adalah Anda dapat menggunakan PPM (256 * 3 warna, yaitu RGB), PPM (256 warna, yaitu skala abu-abu) atau PPM (2 warna saja, yaitu putih atau hitam saja). Dari pengamatan saya yang terbatas, nampaknya pada gambar yang anti-alias, PPM dan PPM (yang saya lihat menghasilkan SVG yang identik) mengecilkan area berwarna, sementara PPM memperluas area berwarna (walaupun sedikit). Agaknya inilah perbedaan antara pengujian piksel > (256/2) dan pengujian piksel > 0. Anda dapat beralih di antara keduanya dengan mengubah ekstensi file, yaitu penggunaan PPM berikut ini:
Sudo apt-get install potrace imagemagick convert -flatten input.png output.pbm potrace -s output.pbm -o output.svg rm output.pbm
Bagaimana cara mengonversi gambar PNG ke SVG?
Namun, hal ini tidak ideal.
PNG adalah gaya bitmap dan SVG adalah desain grafis vektor yang mendukung bitmap, sehingga tidak akan mengubah gambar menjadi vektor, melainkan hanya gambar yang disematkan dalam format vektor. Anda dapat melakukan ini menggunakan http://www.inkscape.org/ yang gratis. Itu akan menyuntikkannya, namun ia juga memiliki mesin Live Trace yang akan mencoba mengubahnya menjadi jalur jika Anda mau (menggunakan potrace). Lihat Direct Tracing di Adobe Illustrator (komersial) adalah contohnya:
Jika Anda menggunakan sistem Linux, imagemagick sangat ideal. Itu.
Konversikan somefile.png somefile.svg
Ini berfungsi dengan banyak format berbeda.
Namun untuk media lain seperti video dan audio (ffmpeg), Saya tahu Anda dengan jelas menyatakan png ke svg; Ini masih tentang media.
Ffmpeg -i beberapa file.mp3 beberapa file.ogg
Sekadar petunjuk jika Anda ingin memeriksa banyak file; loop menggunakan trik shell dasar.
Untuk f di *.jpg; lakukan konversi $f $(f%jpg)png; Selesai
Ini menghapus jpg dan menambahkan png yang memerintahkannya untuk mengonversi apa yang Anda inginkan.
Ada situs web tempat Anda dapat mengunggah gambar Anda dan melihat hasilnya.
Tetapi jika Anda ingin mendownload gambar svg, Anda harus mendaftar. (Jika Anda mendaftar, Anda akan menerima 2 gambar gratis)
dengan adobe ilustrator:
Buka Adobe Ilustrator. Klik "File" dan pilih "Open" untuk memuat file .PNG ke dalam program. Ekstrak gambar seperlunya sebelum menyimpannya sebagai file .SVG. Klik "File" dan pilih "Simpan Sebagai." Buat nama file baru atau gunakan nama yang sudah ada. Pastikan jenis file yang dipilih adalah SVG. Pilih direktori dan klik "Simpan" untuk menyimpan file.
saya lebih suka AI karena Anda dapat membuat perubahan apa pun
Saya kira Anda ingin menulis perangkat lunak untuk melakukan ini. Untuk melakukan ini secara naif, Anda cukup mencari garis dan mengatur vektornya. Untuk melakukan ini dengan cerdas, Anda mencoba menyesuaikan gambar dengan gambar (model fitting). Selain itu, Anda harus mencoba menentukan wilayah raster (wilayah yang tidak dapat Anda modelkan menggunakan rasa malu atau menerapkan tekstur. Saya tidak akan merekomendasikan mengambil rute ini karena akan memakan waktu cukup lama dan memerlukan sedikit pengetahuan grafis dan visi komputer. Namun , hasilnya akan jauh lebih baik secara signifikan dan berskala lebih baik daripada hasil asli Anda.
Dalam salah satu proyek, ikon kecil dalam format svg ditampilkan di dekat menu, dan ketika Anda mengarahkan kursor ke item menu, teks dan ikon berubah warna. Agar tidak menghasilkan gambar dalam jumlah besar, diputuskan untuk menerjemahkan svg ke dalam kode dan menggunakannya dalam gaya CSS.
Petunjuk singkat tentang cara menggunakan SVG di CSS
Kami menggunakan kode yang dihasilkan dalam file css kami.
Misalnya saja ikon Facebook (ikon standar dengan sedikit modifikasi).
Di situs web https://jakearchibald.github.io/svgomg/ klik "Buka SVG" atau cukup seret ikon ke area tampilan. Di pojok kiri atas klik "KODE", sorot kodenya, lalu klik ikon salin, jadi kita akan memasukkan kode gambar SVG kita ke dalam buffer.
Sesuatu seperti ini:
Kemudian tempel kode yang dihasilkan ke jendela di atas, klik Converte dan dapatkan kode yang sudah jadi gambar latar belakang:
Gambar latar belakang: 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");
Salin dan gunakan di css Anda.
Untuk mengubah warnanya, ubah fill="%23FFF" , perlu diingat bahwa %23 adalah tanda # biasa, yaitu fill="%23000" adalah hitam biasa (#000).
Saat Anda mengonversi dari gambar raster seperti PNG ke SVG atau JPG ke SVG, ini akan mengubah bentuk dan objek Anda menjadi gambar hitam putih dalam grafik vektor yang dapat diperbesar tanpa kehilangan kualitas. Kemudian Anda dapat mengecatnya di editor grafis vektor apa pun seperti Inkscape.
Konversi gambar biasa, kemungkinan besar, tidak akan memberikan hasil yang diinginkan.
Untuk hasil terbaik dalam mengonversi ke SVG, gunakan gambar dengan latar belakang solid.
- Untuk mengonversi ke SVG, pilih file, tunggu hingga diunduh di server kami.
- Mendukung hampir semua format gambar (PNG, JPG, BMP dan lainnya). Ukuran file tidak dibatasi, tetapi semakin besar file, semakin lama waktu yang dibutuhkan untuk mengkonversi.
- Setelah konversi, Anda akan melihat file asli Anda dan hasilnya di bawahnya.
- Unduh hasilnya melalui tautan.
Mengapa Anda memerlukan format SVG dan bagaimana cara menggunakannya? Setelah mengkonversi PNG ke SVG atau JPG ke SVG
SVG (Scalable Vector Graphics) adalah format grafik vektor berbasis XML
Keuntungannya adalah Anda dapat mengubah ukuran gambar tanpa kehilangan kualitas dan detailnya. Saat Anda memperbesar ukurannya, gambar vektor mempertahankan bentuk kurvanya, sehingga gambar dapat ditampilkan pada resolusi apa pun.
