Menambahkan grafik dan ilustrasi khusus ke desain situs web Divi Anda benar-benar dapat membantu meningkatkan daya tarik visual. Namun menemukan aset gambar yang tepat atau menyewa seorang desainer tidak selalu memungkinkan. Untungnya, Divi memudahkan pembuatan gambar dan ilustrasi vektor Anda sendiri langsung dari pembuatnya.

Dalam panduan ini, kita akan mempelajari cara menerapkan SVG tanpa mengorbankan situs web Anda.
Meskipun Anda tidak memiliki pengalaman desain, Anda dapat membuat gambar vektor profesional dan berkualitas tinggi untuk benar-benar membawa situs web Divi Anda ke level berikutnya secara visual.
Pengantar SVG & Kegunaannya
SVG adalah singkatan dari Grafik Vektor yang Dapat Diskalakan. Ini adalah format gambar vektor berbasis XML yang banyak digunakan yang dirancang untuk menggambarkan grafik vektor dua dimensi. Tidak seperti format gambar raster (seperti JPEG atau PNG) yang menggunakan piksel untuk mewakili gambar, SVG menggunakan persamaan matematika untuk menentukan bentuk, garis, dan warna, menjadikannya format yang tidak bergantung pada resolusi dan sangat skalabel.
Buat Situs Web Luar Biasa
Dengan Elementor pembuat halaman gratis terbaik
Mulai sekarangBerikut adalah beberapa kegunaan utama SVG dalam desain situs web:
- Grafik Responsif: Gambar SVG tidak bergantung pada resolusi, artinya dapat ditingkatkan atau diperkecil tanpa kehilangan kualitas. Hal ini menjadikannya sempurna untuk desain web responsif, di mana konten disesuaikan agar sesuai dengan ukuran dan resolusi layar yang berbeda.
- Ikon dan Logo: SVG biasanya digunakan untuk ikon, logo, dan elemen grafis lainnya di situs web. Karena file SVG berukuran kecil dan dapat dengan mudah dikustomisasi dan dianimasikan dengan CSS dan JavaScript, mereka adalah pilihan populer untuk membuat antarmuka pengguna yang interaktif dan menarik secara visual.
- Layar Retina dan DPI Tinggi: SVG ideal untuk menampilkan grafik yang tajam dan tajam pada layar DPI tinggi (titik per inci) seperti layar Retina, yang mana gambar raster tradisional mungkin tampak berpiksel saat diperbesar.
- Animasi: SVG memungkinkan pembuatan animasi kompleks langsung dalam kode XML menggunakan alat seperti animasi CSS atau pustaka JavaScript seperti Snap.svg dan GreenSock Animation Platform (GSAP). Hal ini memungkinkan untuk menambahkan elemen dinamis dan interaktif ke situs web.
- Aksesibilitas: Gambar SVG mudah diakses oleh pembaca layar dan teknologi bantu karena struktur XML yang mendasarinya dapat dianotasi dengan teks deskriptif, menjadikan situs web lebih inklusif dan berguna bagi penyandang disabilitas.
- Manfaat SEO: Mesin pencari dapat mengurai dan mengindeks konten dalam file SVG, yang dapat meningkatkan optimasi mesin pencari (SEO) dengan memberikan lebih banyak konteks ke crawler mesin pencari.
- Visualisasi Data Interaktif: SVG dapat digunakan untuk membuat visualisasi data interaktif, seperti bagan dan grafik, yang dapat membantu menyampaikan informasi secara efektif di situs web.
Singkatnya, SVG adalah format serbaguna dan kuat untuk membuat dan menampilkan grafik vektor di situs web. Kemampuannya untuk menskalakan secara mulus, bekerja dengan baik dengan berbagai ukuran dan resolusi layar, serta dukungan untuk animasi dan interaktivitas menjadikannya alat yang berharga dalam desain dan pengembangan web modern.
Cara Aman Menggunakan Gambar Vektor Dengan WordPress
Pada bagian ini, kita akan melihat dua metode untuk menggunakan SVG yang aman di WordPress: secara manual dan melalui plugin. Pilihan terbaik untuk kebutuhan Anda kemudian akan disajikan kepada Anda untuk dipilih. Ayo mulai sekarang!
Tambahkan Dukungan SVG Secara Manual dan Sanitasi Kode Anda
Dengan sedikit kode, dukungan SVG dapat ditambahkan ke WordPress dalam hitungan menit. Hal ini akan memaparkan Anda pada kemungkinan masalah keamanan yang telah kami soroti. Tindakan berikut diperlukan untuk mengimplementasikan SVG dengan cara yang lebih aman:
- Buat perubahan pada file function.php Anda untuk mengaktifkan dukungan SVG.
- Larang peran pengguna yang diinginkan dari mengunggah file svg ke WordPress.
- Sebelum mengunggah file SVG apa pun, bersihkan semuanya.
Secara keseluruhan, tidak sulit untuk menyelesaikan langkah pertama dan kedua. Langkah pertama adalah terhubung ke situs web Anda menggunakan File Transfer Protocol (FTP) dan temukan folder root untuk WordPress. Temukan file function.php Anda di sana, buka, dan tempelkan kode berikut ke dalamnya.
// Allow SVG
add_filter( 'wp_check_filetype_and_ext', function($data, $file, $filename, $mimes) {
global $wp_version;
if ( $wp_version !== '4.7.1' ) {
return $data;
}
$filetype = wp_check_filetype( $filename, $mimes );
return [
'ext' => $filetype['ext'],
'type' => $filetype['type'],
'proper_filename' => $data['proper_filename']
];
}, 10, 4 );
function cc_mime_types( $mimes ){
$mimes['svg'] = 'image/svg+xml';
return $mimes;
}
add_filter( 'upload_mimes', 'cc_mime_types' );
function fix_svg() {
echo '<style type="text/css">
.attachment-266x266, .thumbnail img {
width: 100% !important;
height: auto !important;
}
</style>';
}
add_action( 'admin_head', 'fix_svg' );
Dengan ini, Anda dapat mengunggah file SVG ke WordPress dan melihatnya di perpustakaan media Anda, dengan dua tujuan. Setelah menambahkan kode, tutup file function.php Anda dan simpan modifikasinya.
Kini, ketika kita perlu menghentikan orang-orang yang unggahannya tidak kita percayai agar tidak dirusak, segalanya menjadi sedikit lebih menantang. Anda mungkin, misalnya, percaya pada editor dan penulis Anda untuk mengunggah file yang akurat, namun tidak pada kontributor Anda. Ada dua pendekatan yang dapat Anda ambil di sini:
- Tetapkan peran pengguna unik untuk pengguna dengan akses terbatas atau tanpa akses ke Perpustakaan Media.
- Untuk membatasi jenis file yang dapat diunggah oleh setiap peran pengguna, instal plugin seperti WP Upload Restriction .

Memang benar bahwa kedua strategi tersebut memiliki kekurangan, yang merupakan salah satu alasan penerapan SVG secara manual mungkin sulit dilakukan. Namun jika Anda memilih strategi untuk menghentikan unggahan SVG yang berbahaya, Anda juga perlu memastikan bahwa Anda tidak menggunakannya secara tidak sengaja.
Idealnya, Anda harus menggunakan alat pembersih sebelum mengunggah SVG apa pun ke situs web Anda. Ini akan mengambil file Anda, memeriksa apakah ada sesuatu yang meragukan di dalamnya, dan kemudian menghapusnya jika ada. Pada akhirnya, Anda akan memiliki file SVG rapi yang akhirnya bisa Anda kirimkan ke WordPress.
Menggunakan Plugin SVG Aman
Kami bermaksud menunjukkan betapa sulitnya penerapan SVG yang aman dengan menggunakan metode yang disebutkan di atas. Hal ini diperlukan agar Anda dapat sepenuhnya memahami fungsi plugin Safe SVG .

plugin untuk Safe SVG. Singkatnya, kesulitan yang kami nyatakan sebelumnya semuanya diatasi oleh plugin ini, termasuk:
- Memungkinkan Anda mengunggah SVG.
- Memverifikasi bahwa SVG Anda terlihat di Perpustakaan Media.
- Membersihkan kode sumber setiap SVG yang Anda unggah untuk menghindari kelemahan keamanan. Plugin ini pada dasarnya bersifat plug-and-play dan mengambil rute paling sederhana untuk mengamankan implementasi SVG di WordPress. Kami menyarankan Anda untuk mencobanya jika Anda bertekad untuk menggunakan SVG.
Menganimasikan SVG Menggunakan CSS dan Plugin
Jika Anda berupaya mengintegrasikan SVG ke dalam WordPress, Anda pasti ingin memaksimalkan laba atas investasi Anda. Artinya, jika diperlukan, Anda harus menganimasikan SVG Anda menggunakan CSS. Ada dua pendekatan yang dapat Anda ambil, yang telah kita bahas sebelumnya:
- SVG dapat dianimasikan secara manual dengan CSS sama seperti elemen lainnya.
- Gunakan program seperti SVGator untuk membuat dan menganimasikan SVG.

Jika Anda ingin mencoba beberapa hal baru, menambahkan beberapa animasi di sana-sini dapat meningkatkan pengalaman pengguna di situs web Anda secara signifikan. Namun, menambahkan video atau GIF akan jauh lebih buruk untuk perangkat seluler dibandingkan menggunakan SVG dan CSS untuk mencapai hal ini.
Kesimpulan
Dengan kemampuan membuat grafik vektor khusus langsung di dalam pembuat Divi , Anda memiliki cara ampuh untuk membuat ilustrasi dan ikon untuk situs Anda tanpa memerlukan keahlian desain apa pun. Menerapkan grafik orisinal ini dapat memberikan halaman dan postingan Anda estetika yang lebih unik dan dipersonalisasi. Anda akan terkejut betapa profesionalnya tampilan grafik vektor DIY Anda!