Cara Menggunakan SVG di WordPress

Meskipun SVG telah distandarisasi pada awal tahun 2000-an, format gambar yang sangat menarik tidak banyak diminati karena dukungan browser yang buruk. Semua ini telah berubah secara drastis dalam beberapa tahun terakhir, karena SVG dengan cepat menjadi bentuk gambar de facto di web.

Dan bukan hanya desainer grafis yang jatuh cinta dengan SVG, tetapi juga pengguna WordPress yang ingin mempercepat blog mereka dengan mengurangi ukuran gambar secara keseluruhan. Posting ini akan mengeksplorasi topik bagaimana menggunakan SVG di situs berbasis WordPress.

Apa itu SVG?

SVG (Scalable Vector Graphics) adalah format gambar berbasis XML untuk menampilkan grafik di web dan di dalam aplikasi. Pada dasarnya, file SVG hanyalah kumpulan kode XML yang menentukan berbagai bentuk dan warna yang digunakan dalam gambar SVG.

Dan karena Anda dapat membuka file SVG dengan editor teks, membuat penyesuaian juga mudah menggunakan kode CSS3 dan JS dasar. Akibatnya, SVG sangat disukai oleh pengguna web modern karena fleksibilitasnya yang serbaguna.

Yang terpenting, W3C mengakui SVG sebagai standar industri terkemuka. Jadi, SVG bekerja dengan sempurna bersama dengan teknologi berbasis Web lainnya seperti DOM, HTML, dan sebagainya.

Mengapa SVG penting?

Gambar SVG berbasis vektor, sebagai hasilnya, gambar SVG dapat diskalakan tanpa batas di seluruh layar tanpa kehilangan kualitas. Interaksi inti dalam hal ini adalah Browser XML; di mana Browser memplot spesifikasi XML dengan setiap kenaikan atau penurunan.

Tak perlu dikatakan, file SVG jauh lebih fleksibel daripada format tradisional seperti PNG atau JPEG. Dan interaksi langsung antara CSS dan JavaScript berarti Anda dapat mengadaptasi gambar SVG saat bepergian. Ini sangat penting ketika Anda sedang mengerjakan desain baru atau sebaliknya.

Dalam hal kinerja, gambar SVG cenderung secara signifikan lebih kecil ukurannya daripada rekan-rekan mana pun. Akibatnya, ilustrasi, logo, dan ikon biasanya dibuat sebagai grafik vektor. Ini juga menyebabkan perkembangan banyak Font Ikon, yang akan kami sebutkan secara singkat di artikel nanti.

Singkatnya, SVG memberikan fleksibilitas, ukuran gambar yang lebih kecil, dan fondasi yang kuat untuk meningkatkan kinerja gambar di situs WordPress Anda.

Bagaimana gambar SVG dibuat?

Membuat gambar SVG dapat dilakukan dengan dua cara: menulis 'kode', dan menggunakan perangkat lunak desain grafis modern. Metode pertama, yaitu menulis skrip XML adalah cara tradisional untuk membuat file SVG tetapi terbukti merupakan teknik yang lambat dan tidak efisien.

Kumpulan kotak sederhana mungkin terlihat seperti ini dalam format XML:

Seperti yang Anda lihat, menulis ini berulang-ulang untuk grafik yang kompleks sama dengan menembak diri sendiri.

Metode lainnya adalah dengan menggunakan perangkat lunak, dan ini adalah cara tercepat dan paling efisien untuk membangun grafik SVG. Dengan perangkat lunak berbasis vektor, Anda dapat fokus pada pembuatan grafik dan kemudian mengekspornya sebagai file SVG yang sudah jadi.

Affinity Designer adalah program pengeditan vektor profesional yang terkenal, tetapi begitu juga perangkat lunak seperti Adobe Illustrator, Sketch, Figma, dan Inkscape.

Perangkat lunak apa pun yang Anda putuskan untuk digunakan, satu-satunya hal yang benar-benar penting adalah rencana Anda untuk jenis grafik yang ingin Anda buat. Fungsionalitas ekspor bekerja sama di semua program modern.

Tak perlu dikatakan, SVG selalu merupakan struktur XML yang sama. Jadi, Anda dapat menggunakan gambar SVG baik sebagai Dokumen tetapi juga menyisipkannya Inline.

Apakah WordPress mendukung SVG?

Meski terdengar aneh, platform dengan cakupan WordPress sebenarnya tidak mendukung format file SVG. Tetapi hanya karena masalah keamanan yang mengerikan.

Anda tahu, tidak seperti jenis file PNG/JPG/GIF — SVG bukanlah gambar raster melainkan vektor. Akibatnya, SVG terkena risiko eksploitasi JavaScript, dan WordPress telah memilih untuk tidak mengizinkan SVG di WordPress secara default. Masuk akal dari semua sudut pandang.

Meskipun kontributor WordPress telah berbicara tentang SVG selama bertahun-tahun, ada terlalu banyak sudut yang harus ditangani untuk mencegah masalah keamanan dalam skala besar.

Jadi, satu-satunya cara untuk mengatasinya adalah melalui plugin atau dengan mengaktifkan SVG sebagai format file menggunakan Fungsi Tema.

Bagaimana cara mengaktifkan gambar SVG di situs web WordPress?

Sebelum kita masuk ke bagian plugin, Anda sebenarnya dapat mengaktifkan SVG di WordPress melalui file functions.php di direktori tema Anda. Ini jelas merupakan cara tercepat, tetapi juga yang paling tidak aman karena Anda mengaktifkan SVG dalam format mentah.


//enable SVG file format for WordPress Uploads
function add_file_types_to_uploads($file_types){

$new_filetypes = array();
$new_filetypes['svg'] = 'gambar/svg+xml';
$file_types = array_merge($file_types, $new_filetypes );

kembalikan $file_types;
}
add_action('upload_mimes', 'add_file_types_to_uploads');

Dan opsi Anda yang lain — lebih aman — adalah menggunakan plugin. Berikut adalah tiga plugin paling menonjol untuk mengaktifkan SVG di WordPress.

Dukungan SVG

Menambahkan dukungan SVG adalah setengah dari perjuangan, Anda mungkin juga ingin menambahkan gaya kustom, efek animasi, dan mengaktifkan pembatasan. Tetapi untuk melakukan semua ini, Anda memerlukan dukungan.

Dengan Dukungan SVG — Anda dapat mulai menambahkan file SVG ke posting dan halaman Anda menggunakan tag Gambar tradisional. Misalnya Anda dapat menambahkan kelas CSS baru ke Gambar Anda: “style-SVG”, yang akan mengambil gambar SVG yang Anda unggah dan merender isinya dalam tampilan sebaris.

Fitur utama dari plugin ini adalah:

• Aktifkan pengelolaan file SVG dalam Perpustakaan Media WordPress.
• Ubah gambar SVG yang diunggah menjadi kode sebaris.
• Mendukung Widget Gambar untuk menambahkan tag Alt dan Caption ke semua gambar SVG.
• Gaya gambar SVG individual menggunakan CSS khusus.
• Menerapkan efek animasi menggunakan CSS3 dan JavaScript.
• Halaman pengaturan terperinci dalam dasbor plugin.
• Terapkan akses berbasis izin. Misalnya Batasi pengunggahan hanya ke akun dengan hak istimewa Admin.

Peringatan bahwa terlepas dari apa yang ditawarkan plugin ini, risiko eksploitasi SVG cukup nyata. Jangan aktifkan manajemen file SVG untuk pengguna yang tidak Anda percayai. Jadi, idealnya, Anda hanya akan mengaktifkan fitur ini untuk pengguna di tingkat Admin.

Untuk mengulangi, siapa pun dengan hak unggah dapat mengunggah file SVG baru, tetapi karena file SVG didasarkan pada XML — mereka terbuka untuk dieksploitasi melalui suntikan berbahaya dan lainnya.

SVG aman

Safe SVG adalah salah satu plugin yang akan memberi Anda ketenangan pikiran dalam hal mengkhawatirkan potensi risiko keamanan. Plugin ini dibuat khusus untuk membersihkan unggahan SVG baru dan mencegah niat jahat. Selanjutnya, Safe SVG menambahkan kemampuan untuk melihat jenis file SVG yang telah Anda unggah melalui Media Library Anda.

Dengan 50.000 pengguna aktif, Anda dapat mengandalkan Safe SVG untuk memberikan rekam jejak kinerja yang aman. Perlu dicatat bahwa ada dua versi berbeda untuk plugin ini; gratis dan berbayar.

Versi gratisnya mencakup fungsionalitas untuk membersihkan unggahan baru, dan juga menambahkan dukungan untuk tampilan SVG dalam Media Library.

Jika Anda menggunakan versi Pro maka Anda akan mendapatkan fitur tambahan seperti Pengoptimalan SVGO. Teknik pengoptimalan ini akan semakin mengurangi ukuran file unggahan SVG Anda.

Juga, dengan Pro, Anda dapat memilih siapa yang dapat atau tidak dapat mengunggah file SVG baru. Akibatnya, Anda dapat membatasi akses ke pengguna tertentu saja. Dan terakhir, dengan membeli plugin, Anda mendapatkan akses ke dukungan premium — dapatkan jawaban atas pertanyaan Anda kapan pun Anda paling membutuhkannya.

Tambahkan Dukungan SVG Penuh

Anda seharusnya mendapatkan hasil yang wajar dengan dua plugin pertama yang telah kami daftarkan. Tetapi, jika Anda menyukai ide menambahkan SVG ke situs Anda menggunakan Shortcode, maka periksa plugin ini.

Plugin ini menambahkan beberapa fungsi SVG ke WordPress Anda dan menggunakan teknik SVG yang didasarkan pada ide oleh Alexey Ten. Cara memasukkan gambar SVG ke dalam HTML ini tampaknya merupakan cara dengan kombinasi kinerja dan kompatibilitas terbaik saat ini.

Tambahkan Dukungan SVG Penuh memungkinkan pengunggahan SVG, dan pembuatan kode pendek. Selanjutnya, Anda dapat menyesuaikan gaya setiap elemen SVG menggunakan CSS khusus. Last but not least, Anda dapat menentukan foto cadangan untuk salah satu atau semua SVG yang telah Anda unggah.

Apa saja plugin SVG berguna lainnya untuk WordPress?

Selain menambahkan dukungan SVG ke situs WordPress, plugin apa lagi di luar sana yang dapat bermanfaat bagi situs Anda? Semua orang dan nenek mereka tahu bahwa ada manfaat kinerja yang signifikan. Baik dari segi ukuran file, tetapi juga kemampuan browser untuk merender grafik vektor secara inline.

Ikon WP SVG

Ikon adalah elemen visual, dan elemen semacam itu cenderung memberi desain kehidupan baru. Yang cukup menarik, plugin ini lahir dari kebutuhan pribadi. Penulis ingin mulai mengimplementasikan lebih banyak file SVG dalam desainnya, tetapi tidak dapat menemukan solusi untuk itu. Jadi, dia meluangkan waktu dan tenaganya dan membuat Ikon WP SVG.

Plugin ini sangat mudah digunakan, dan Anda dapat mengganti ikon yang ada di situs Anda hanya dengan beberapa klik. Yang terbaik dari semuanya, Anda juga tidak perlu membuat ulang setiap gambar untuk tampilan Retina, selama Anda mengatur lebar maksimum, ikon akan diskalakan secara otomatis.

Sama seperti dalam kasus penulis, plugin ini luar biasa untuk semua jenis pengembangan, multisite, dan pekerjaan klien. Tanpa batasan, Anda tidak perlu khawatir tentang kompatibilitas tema atau hal semacam itu.

Tampaknya juga ada versi premium yang ditawarkan dengan fitur yang memungkinkan pengunggahan ikon khusus. Jadi, Anda tidak terbatas pada ikon terintegrasi.

Menu Sosial SVG

Ini adalah plugin yang berfungsi sebagai widget untuk menampilkan ikon media sosial melalui gambar SVG. Agar plugin ini berfungsi, yang harus Anda lakukan adalah membuat menu WordPress baru dengan tautan ke profil media sosial Anda.

Setelah itu, pilih lokasi Menu Sosial SVG khusus dan simpan menu baru. Setelah itu, Anda dapat menggunakan widget Menu Sosial SVG baik di bilah sisi atau area lain yang siap widget di blog Anda.

Ikon yang tersedia saat ini adalah untuk situs dan platform berikut: plus.google, WordPress, facebook, twitter, dribbble, Pinterest, Github, Tumblr, Youtube, Flickr, Vimeo, Instagram, LinkedIn, xing /feed, mailto.

Logo SVG dan Efek Teks

SLATE adalah plugin yang memungkinkan dukungan kode pendek untuk menambahkan efek SVG khusus. Anda dapat menggunakan plugin ini untuk mempromosikan citra merek yang kuat, menekankan widget CTA, atau membuat elemen menonjol dengan caranya sendiri. Penggunaan cerdas dari dukungan kode pendek berarti Anda dapat mengedit dan menyesuaikan efek Anda pada waktu tertentu.

Misalnya Anda dapat menggabungkan berbagai warna, font, filter, dan memanfaatkan berbagai pola isian yang bermanifestasi sebagai efek desain yang menarik perhatian. SLATE menawarkan kebebasan berkreasi sebanyak perangkat lunak pengedit vektor, tetapi hanya tanpa Anda perlu menggunakan perangkat lunak apa pun!

Jadi, apa sajakah beberapa fitur utamanya?

• Teks. Hasilkan kode pendek yang dapat mereplikasi efek efek teks yang menarik perhatian namun ramah SEO. Sama seperti apa yang Anda lihat di snapshot di atas.
• font. Tidak yakin di mana mendapatkan font khusus? Jangan khawatir karena SLATE sudah dikemas sebelumnya dengan perpustakaan besar Google Font.
• Isi pola. Huruf diisi dengan pola isian pilihan Anda. Pola isian memiliki parameter. Kontrol berbagai ukuran, jarak, dan warna untuk menghasilkan variasi unik, atau biarkan default bekerja untuk Anda.

Dan masih banyak lagi! Plugin ini adalah pembangkit tenaga listrik untuk membuat teks dan logo Anda ditata dengan presisi luar biasa. Dan melalui SVG, tidak kurang.

Di mana Anda dapat menemukan grafik SVG?

Apa yang dapat Anda lakukan jika Anda tidak memiliki keahlian sebelumnya dengan desain grafis vektor? Untungnya, menemukan SVG akhir-akhir ini sederhana dan mudah. Paling-paling, Anda hanya perlu menautkan kembali ke penulis asli yang membuat grafik. Dan banyak platform menyediakan gambar gratis tanpa persyaratan atribusi.

Berikut adalah beberapa situs luar biasa yang menyediakan konten SVG gratis:

• FontAwesome — Font Awesome perpustakaan ikon font paling mengagumkan di dunia. Proyek ini telah berjalan kuat selama beberapa tahun dan memiliki dukungan mendalam tidak hanya untuk browser tetapi juga kerangka kerja khusus dan perangkat lunak desain. Paket font berorientasi aksesibilitas ini adalah pembunuh mutlak, dan sangat mudah digunakan! Bahkan, saya yakin ada selusin plugin WordPress yang menyediakan dukungan untuk Font Awesome!
• Vecteezy — Vecteezy bisa dibilang platform grafis vektor terbesar di planet ini. Didorong oleh desain khusus, kontribusi komunitas, dan data berbasis web: Vecteezy memiliki vektor yang tersedia dalam kategori, bentuk, atau bentuk apa pun. Dan mengunduh file juga sangat mudah. Yang harus Anda lakukan adalah menautkan kembali ke halaman penulis tempat Anda mendapatkan file. Ini adalah situs yang sering saya gunakan.
• Latar Belakang SVG — Apakah Anda mengikuti tren desain web terbaru? Ada begitu banyak bidang kreatif di mana desain sedang dieksplorasi sekarang. Dan salah satunya adalah latar belakang SVG. Anda telah melihat mereka juga. Pola bergelombang, garis lengkung, dan lain sebagainya. Gunakan situs ini untuk menghasilkan latar belakang SVG yang mudah diakses!
• SVG Grabber — Ekstensi Chrome ini adalah anugerah mutlak untuk mendapatkan gambar SVG dari halaman situs web yang berbeda. Cukup klik Ikon dan ekstensi dapat mengambil setiap file SVG pada halaman. Tentu saja, Anda harus mengikuti aturan hak cipta di mana pun Anda bisa, tetapi secara keseluruhan ini terasa seperti ekstensi yang solid untuk sering digunakan.
• Zona Logo Vektor — Tergantung pada ceruk tempat Anda bekerja, Anda mungkin merasa berguna untuk memiliki koleksi logo berbasis vektor dari merek-merek terkemuka dunia. Anda juga dapat menggunakan file ini saat membuat pengumuman atau promosi tertentu. Dan sebagian besar editor foto saat ini dapat mengonversi file SVG menjadi PNG dan sebaliknya.

Dan itulah kita yang menyentuh permukaan dari apa yang ada di luar sana, sungguh. Secara pribadi, SVG telah membuat banyak perbedaan dalam cara saya bekerja dengan desain situs web dan bahkan pembuatan gambar unggulan. Dengan SVG, Anda benar-benar dapat menggunakan spektrum warna, kesejajaran bentuk yang berbeda, dll.

Tentu, ini tidak sama dengan menggunakan fotografi kehidupan nyata yang indah, tetapi di situs web mana pun Anda dapat menemukan banyak tempat di mana JPG dapat diganti dengan grafik vektor. Dan itulah tujuan dari posting ini, untuk memberi Anda gambaran umum tentang cara menggunakan SVG dengan WordPress.

Apakah kami telah mencapai tujuan itu, kami akan membiarkan Anda yang menilai itu. Jika ada sesuatu yang ingin Anda tambahkan ke pos ini, atau Anda memiliki sumber daya tambahan untuk dibagikan — ketahuilah bahwa bagian komentar kami selalu terbuka.