Saya sedang mengerjakan proyek web yang melibatkan peta AS yang dibuat secara dinamis, mewarnai berbagai negara bagian berdasarkan kumpulan data.
File SVG ini memberi saya peta kosong AS yang bagus dan sangat mudah untuk mengubah warna setiap negara bagian. Kesulitannya adalah browser IE tidak mendukung SVG jadi agar saya dapat menggunakan sintaks praktis yang ditawarkan oleh svg, saya harus mengubahnya menjadi JPG.
Idealnya, saya ingin melakukan ini hanya dengan pustaka GD2 tetapi juga dapat menggunakan ImageMagick. Saya sama sekali tidak tahu bagaimana melakukan ini.
Solusi apa pun yang memungkinkan saya mengubah warna negara bagian secara dinamis pada peta AS akan dipertimbangkan. Kuncinya adalah mudah untuk mengubah warna dengan cepat dan itu adalah lintas browser. Mohon solusi PHP / Apache saja.
Jawaban:
Lucu sekali Anda menanyakan hal ini, saya baru saja melakukan ini untuk situs pekerjaan saya dan saya berpikir saya harus menulis tutorial ... Berikut adalah cara melakukannya dengan PHP / Imagick, yang menggunakan ImageMagick:
langkah-langkah penggantian warna regex dapat bervariasi tergantung pada jalur svg xml dan cara Anda menyimpan nilai id & warna. Jika Anda tidak ingin menyimpan file di server, Anda dapat menampilkan gambar sebagai basis 64 seperti
(sebelum Anda menggunakan hapus / hancurkan) tetapi memiliki masalah dengan PNG sebagai base64 jadi Anda mungkin harus mengeluarkan base64 sebagai jpeg
Anda dapat melihat contoh di sini yang saya lakukan untuk peta wilayah penjualan perusahaan sebelumnya:
Mulai: https://upload.wikimedia.org/wikipedia/commons/1/1a/Blank_US_Map_(states_only).svg
Selesai:
Edit
Sejak menulis di atas, saya telah menemukan 2 teknik yang ditingkatkan:
1) alih-alih loop regex untuk mengubah status isian, gunakan CSS untuk membuat aturan gaya seperti
dan kemudian Anda dapat melakukan satu penggantian teks untuk memasukkan aturan css Anda ke dalam svg sebelum melanjutkan dengan pembuatan imagick jpeg / png. Jika warna tidak berubah, periksa untuk memastikan Anda tidak memiliki gaya isian sebaris di tag jalur Anda yang menggantikan css.
2) Jika Anda tidak harus benar-benar membuat file gambar jpeg / png (dan tidak perlu mendukung browser lama), Anda dapat memanipulasi svg langsung dengan jQuery. Anda tidak dapat mengakses jalur svg saat menyematkan svg menggunakan img atau tag objek, jadi Anda harus langsung menyertakan svg xml di halaman web Anda html seperti:
lalu mengubah warnanya semudah:
sumber
$dom = new DOMDocument(); $dom->loadXML( $svg ); $dom->getElementsByTagName('image')->item(0)->setAttribute('id', $state); $svg = $dom->saveXML();
Anda menyebutkan bahwa Anda melakukan ini karena IE tidak mendukung SVG.
Kabar baiknya adalah bahwa IE tidak grafis dukungan vektor. Oke, jadi itu dalam bentuk bahasa yang disebut VML yang hanya mendukung IE, bukan SVG, tetapi bahasa itu ada, dan Anda dapat menggunakannya.
Google Maps antara lain akan mendeteksi kapabilitas browser untuk menentukan apakah akan menyajikan SVG atau VML.
Lalu ada pustaka Raphael , yang merupakan pustaka grafis berbasis peramban Javascript, yang mendukung SVG atau VML, sekali lagi tergantung pada peramban.
Satu lagi yang mungkin bisa membantu: SVGWeb .
Semua itu berarti Anda dapat mendukung pengguna IE Anda tanpa harus menggunakan grafik bitmap.
Lihat juga jawaban teratas untuk pertanyaan ini, misalnya: XSL Mengubah SVG menjadi VML
sumber
Saat mengonversi SVG menjadi PNG transparan, jangan lupa untuk meletakkan ini SEBELUM
$imagick->readImageBlob()
:sumber
Ini sangat mudah, telah melakukan pekerjaan ini selama beberapa minggu terakhir.
Anda membutuhkan Perangkat SVG Batik . Unduh, dan letakkan file di direktori yang sama dengan SVG yang ingin Anda ubah menjadi JPEG , juga pastikan Anda mengekstraknya terlebih dahulu.
Buka terminal, dan jalankan perintah ini:
Itu harus menghasilkan JPEG dari file SVG. Sangat mudah. Anda bahkan dapat menempatkannya dalam satu lingkaran dan mengonversi banyak SVG,
sumber
Saya tidak tahu tentang solusi PHP / Apache mandiri, karena ini akan memerlukan pustaka PHP yang dapat membaca dan merender gambar SVG. Saya tidak yakin perpustakaan seperti itu ada - saya tidak tahu satu pun.
ImageMagick dapat meraster file SVG, baik melalui baris perintah atau pengikatan PHP, IMagick , tetapi tampaknya memiliki sejumlah kebiasaan dan ketergantungan eksternal seperti yang ditunjukkan misalnya di utas forum ini . Saya pikir itu masih cara yang paling menjanjikan untuk dilakukan, itu hal pertama yang akan saya perhatikan jika saya menjadi Anda.
sumber
Ini adalah metode untuk mengonversi gambar svg menjadi gif menggunakan alat GD php standar
1) Anda memasukkan gambar ke dalam elemen kanvas di browser:
Dan kemudian mengubahnya di server (ProcessPicture.php) dari (default) png menjadi gif dan menyimpannya. (Anda juga bisa menyimpan sebagai png kemudian gunakan imagepng daripada gambar gif):
sumber
Anda dapat menggunakan Raphaël — Pustaka JavaScript dan mencapainya dengan mudah. Ini akan bekerja di IE juga.
sumber
atau menggunakan: potrace demo: Tool4dev.com
sumber