Cara membuat gambar SVG yang dapat diskalakan untuk web.

Jika Anda bekerja dengan gambar untuk web, cepat atau lambat Anda akan perlu membuat gambar SVG yang dapat diskalakan. Gambar tersebut harus terlihat sempurna di layar apa pun, dimuat dengan cepat, dan tidak berdampak negatif pada kinerja situs Anda. PNG atau JPG biasa berfungsi dalam banyak situasi, tetapi ketika logo Anda terlihat buram di TV 4K atau ikon Anda kehilangan ketajaman di perangkat seluler baru, saat itulah Anda menyadari bahwa Anda benar-benar membutuhkan grafik vektor.

SVG (Scalable Vector Graphics) telah menjadi format unggulan untuk logo, ikon, ilustrasi, infografis, dan animasi ringan.Ini adalah teks XML yang diinterpretasikan dan dirender oleh browser secara real-time, sehingga dapat diskalakan tanpa kehilangan kualitas, dimodifikasi dengan CSS atau JavaScript, dan dioptimalkan untuk SEO dan aksesibilitas. Mari kita lihat secara jelas dan ringkas bagaimana format ini bekerja, bagaimana cara membuatnya dari awal atau dari JPG/PNG, bagaimana cara mengintegrasikannya ke dalam situs web Anda, dan bagaimana cara memaksimalkannya.

Apa itu file SVG dan mengapa file ini dapat diskalakan?

SVG adalah singkatan dari Scalable Vector Graphics, yang berarti grafik vektor yang dapat diperbesar atau diperkecil tanpa kehilangan detail.Tidak seperti JPG atau PNG, yang menyimpan informasi untuk setiap piksel, SVG menyimpan instruksi menggambar—garis, kurva, warna, dan posisi—dalam bentuk kode XML. Browser membaca instruksi ini dan "menggambar ulang" gambar pada resolusi yang dibutuhkan oleh perangkat.

Cara kerja ini memastikan bahwa file SVG yang sama terlihat sama tajamnya di ponsel, monitor 4K, atau papan reklame.Tidak ada piksel yang perlu diregangkan atau diinterpolasi; yang diubah ukurannya adalah prinsip-prinsip matematika yang mendefinisikan bentuk-bentuk tersebut. Selain itu, karena berupa teks, file tersebut dapat dibuka dan diedit dengan editor kode apa pun, diotomatiskan, dikompresi, dan bahkan dimanipulasi menggunakan JavaScript.

SVG tidak bergantung pada resolusi, sangat ringan untuk grafik sederhana, dan kompatibel dengan semua browser modern.Chrome, Firefox, Safari, Edge, dan Opera telah mendukung format ini secara bawaan selama bertahun-tahun. Bahkan Internet Explorer 9 dan versi yang lebih baru pun menerima SVG, meskipun dengan beberapa keterbatasan pada fitur-fitur yang sangat canggih.

Namun, SVG bukanlah solusi mujarab untuk semua jenis gambar.Saat menangani foto kompleks dengan jutaan warna dan banyak detail, JPG yang terkompresi dengan baik biasanya lebih efisien. Mencoba mengubah seluruh foto menjadi vektor biasanya menghasilkan file SVG yang sangat besar, sulit dioptimalkan, dan tidak praktis untuk penggunaan di dunia nyata.

Raster vs vektor: perbedaan antara SVG, JPG dan PNG

Untuk memahami kapan tepatnya membuat gambar SVG yang dapat diskalakan, Anda perlu memahami perbedaan antara gambar raster dan gambar vektor.JPG, PNG, dan GIF adalah format bitmap: format ini menyimpan kisi piksel dengan warna tetap. SVG, EPS, AI, atau PDF (pada bagian vektornya) menggambarkan bentuk-bentuk matematika.

Pada gambar raster, jika ukurannya diperbesar terlalu banyak, piksel akan terlihat dan efek "tangga" yang khas akan muncul.Hilangnya kualitas itu tak terhindarkan ketika Anda mencoba memaksakan resolusi yang tidak dimiliki gambar aslinya. Sebaliknya, SVG dapat diperbesar sebanyak yang Anda inginkan karena yang diperbesar adalah rumus yang menggambar setiap garis.

JPG ideal untuk foto karena mampu mengkompresi variasi warna dengan sangat baik, meskipun dengan mengorbankan sedikit kualitas.Sebaliknya, PNG mempertahankan kualitas (kompresi tanpa kehilangan data) dan mendukung transparansi, sehingga sangat cocok untuk grafik dengan latar belakang transparan, tangkapan layar, atau elemen antarmuka yang tidak perlu diperbesar terlalu banyak.

SVG sangat unggul dalam hal ikon, logo, ilustrasi, diagram, grafik, infografis, dan animasi sederhana.Untuk jenis konten ini, file PNG cenderung lebih besar, terlihat lebih buruk saat diperbesar, dan tidak dapat dimanipulasi secara fleksibel dengan CSS. Itulah mengapa ekosistem web telah mengadopsi SVG untuk semua elemen antarmuka modern.

Penggunaan umum gambar SVG yang dapat diskalakan

Dalam desain dan pengembangan web, SVG terutama digunakan untuk elemen-elemen yang perlu mempertahankan ketajaman maksimal di perangkat apa pun.Tidak jarang sebuah situs web menggunakan puluhan atau ratusan SVG yang tersebar di berbagai menu, bagian, tombol, header, atau ilustrasi.

Ikon adalah salah satu contoh paling jelas di mana SVG mendominasi.Ikon media sosial, menu hamburger, peringkat bintang, ikon keranjang belanja… Semuanya mendapat manfaat dari skalabilitas format ini. Anda dapat menggunakan ikon yang sama dalam ukuran kecil pada menu seluler dan ukuran besar pada halaman harga tanpa kehilangan detail apa pun.

Logo perusahaan merupakan penggunaan penting lainnya.Menyimpan logo Anda sebagai SVG memastikan logo tersebut akan terlihat sempurna pada favicon, menu, slider beranda, dan materi cetak apa pun. Selain itu, satu file sumber dapat digunakan kembali untuk web, presentasi, poster, dan kartu nama tanpa harus membuatnya ulang setiap kali.

SVG juga umum digunakan dalam infografis, grafik data, dan ilustrasi khusus.Karena kontennya berbasis vektor, garis-garis grafis terlihat bersih, teks tetap tajam, dan file beradaptasi dengan mulus ke tablet, ponsel, dan layar besar.

Terakhir, SVG memungkinkan Anda membuat animasi yang sangat ringan dan lancar.Anda dapat menganimasikan ikon yang berubah warna saat diarahkan kursor ke atasnya, indikator pemuatan yang berputar tanpa henti, atau bahkan grafik yang bereaksi terhadap pengguliran atau interaksi pengguna menggunakan CSS, SMIL, atau JavaScript.

Alat untuk membuat gambar SVG yang dapat diskalakan

Untuk membuat file SVG, Anda dapat memulai dari awal di editor vektor atau mengkonversi gambar yang sudah ada dalam format raster atau vektor.Pilihan tersebut bergantung pada apakah Anda menginginkan desain yang sepenuhnya baru atau jika Anda sudah memiliki logo dalam format JPG/PNG yang ingin Anda vektorkan.

Program yang paling umum digunakan untuk mendesain dan mengekspor SVG adalah Adobe Illustrator, Inkscape, CorelDRAW, Figma, dan Sketch.Semua program tersebut menggunakan vektor sebagai dasar dan memungkinkan Anda untuk menyimpan dalam format SVG dengan berbagai tingkat kontrol atas ukuran, font, dan jenis ekspor. Jika Anda mencari lebih banyak pilihan, lihat daftar program pembuatan gambar vektor.

Adobe Illustrator adalah standar profesional di banyak agensi dan studio.Fitur ini memungkinkan Anda menggambar dengan alat Pena, mengatur desain dalam lapisan, menggunakan efek canggih, tipografi berkualitas tinggi, lalu mengekspor ke SVG, menyesuaikan opsi seperti menyematkan atau menautkan font, gaya CSS internal atau eksternal, dan tingkat kompatibilitas.

Inkscape adalah alternatif gratis dan sumber terbuka yang mencakup hampir semua hal yang dibutuhkan oleh desainer pada umumnya.Ia memiliki alat untuk bentuk, simpul, teks, gradien, filter, dan juga ekspor langsung ke SVG, yang biasanya juga menghasilkan kode cukup bersih.

Figma dan Sketch, yang sangat populer dalam desain antarmuka, juga memungkinkan ekspor ikon dan komponen sebagai SVG.Alat-alat ini sangat cocok jika Anda sudah mengerjakan UI Anda menggunakan alat-alat tersebut karena Anda dapat langsung memasukkan ikon ke dalam kode tanpa perantara.

Konversi gambar JPG atau PNG ke SVG.

Seringkali Anda tidak memulai dari awal, tetapi sudah memiliki logo atau gambar dalam format JPG, PNG, atau PDF dan membutuhkan SVG yang dapat diskalakan.Dalam kasus ini ada dua cara: melakukan vektorisasi secara otomatis dengan alat jalur atau menggambar ulang grafik secara manual dengan alat Pena.

Alat penelusuran otomatis dengan cepat mengubah piksel menjadi bentuk vektor, tetapi dengan hasil yang tidak konsisten.Untuk logo sederhana, dengan satu warna atau sedikit detail, metode ini cukup efektif dan menghemat waktu. Namun, untuk grafik yang kompleks, metode ini menghasilkan ribuan node dan file SVG yang sangat besar dan sulit diedit. Jika Anda perlu mempelajari metode manual lebih dalam, lihat teknik tracing dan vektorisasi di Illustrator.

Beberapa platform khusus menawarkan layanan vektorisasi manual.Dengan layanan ini, Anda mengunggah logo Anda dalam format JPG, PNG, atau PDF, dan seorang desainer akan menggambarnya ulang secara manual di Illustrator menggunakan font yang tepat, menghasilkan file EPS/AI/SVG yang bersih dan siap untuk dicetak atau digunakan di web. Ini adalah pilihan paling andal untuk logo merek yang perlu terlihat sempurna.

Jika Anda mengonversi dari format vektor lain seperti EPS atau AI, konverter SVG biasanya mempertahankan hampir semua informasi.Dalam hal ini, warna, bentuk, dan struktur lapisan dipertahankan dengan cukup akurat, selama Anda tidak menggunakan efek yang sangat spesifik dari program tertentu.

Ketika sumbernya berupa foto atau gambar raster yang sangat kompleks, vektorisasi otomatis jarang memberikan hasil yang bermanfaat.Dalam skenario ini, hal yang paling masuk akal adalah menyimpan foto dalam format JPG atau WebP dan menggunakan SVG untuk ikon, bingkai, teks, atau elemen grafis yang ditambahkan di atasnya.

Cara membuat file SVG langkah demi langkah

Jika Anda ingin mendesain gambar SVG yang dapat diskalakan sendiri dari awal, alur kerja dasarnya cukup mirip di hampir semua editor vektor.Berikut ringkasan umumnya agar Anda dapat menerapkannya di Inkscape, Illustrator, atau perangkat lunak serupa.

Langkah pertama adalah membuat kanvas atau ruang kerja dengan dimensi yang wajar.Meskipun SVG nantinya dapat diskalakan, disarankan untuk menggunakan "ukuran manusia" (misalnya, 500×500 px untuk ikon atau 1200×600 px untuk header), karena hal itu membuat desain lebih nyaman dan membantu menjaga proporsi.

Selanjutnya adalah tahap menggambar.Gunakan alat Pena atau Bezier untuk menggambar garis luar, garis, dan kurva, serta alat bentuk dasar (persegi panjang, elips, poligon) untuk membangun desain Anda. Setiap bentuk akan direkam sebagai jalur atau kumpulan jalur dalam SVG XML.

Pada jalur ini Anda dapat menerapkan warna isi dan garis tepi, ketebalan garis, sudut membulat, gradien, atau pola.Semua atribut ini kemudian dapat diterjemahkan ke dalam CSS, jadi sebaiknya jangan terlalu sering menggunakan efek aneh yang tidak berfungsi dengan baik di browser.

Setelah desain Anda siap, sesuaikan artboard dengan kontennya.Di sebagian besar program, terdapat opsi untuk menyesuaikan kanvas dengan batas gambar dan menghindari margin kosong; ini membantu memastikan bahwa SVG tidak memiliki ruang putih yang tidak perlu di sekitarnya.

Terakhir, ekspor atau simpan sebagai SVG.Kotak dialog ekspor biasanya menyertakan opsi untuk menyederhanakan jalur, menyertakan gaya sebagai atribut sebaris atau sebagai CSS, menyematkan gambar atau font, dan lain sebagainya. Untuk penggunaan web, SVG yang paling bersih dan ringan, tanpa metadata yang berlebihan, umumnya lebih disukai.

Ubah ukuran dan skala SVG tanpa kehilangan kualitas.

Keunggulan format ini adalah Anda dapat mengubah ukuran SVG tanpa membuatnya pecah-pecah (pikselasi), tetapi bukan berarti Anda tidak perlu memperhatikan bagaimana ukurannya berubah saat diubah.Atribut kunci dalam proses ini adalah lihatKotak, yang mendefinisikan sistem koordinat internal dari grafik tersebut.

Di dalam file SVG itu sendiri Anda akan melihat sesuatu seperti viewBox="0 0 100 100"Ini menunjukkan bahwa seluruh gambar dirancang dalam persegi 100x100 unit. Jika Anda kemudian memberi tahu browser dalam HTML bahwa SVG harus memiliki lebar 200px, browser akan mengalikan unit tersebut agar sesuai dengan konten.

Untuk membuat SVG benar-benar responsif, praktik umum yang dilakukan adalah menghapus atribut lebar dan tinggi dari elemen tersebut. dan hanya menyisakan viewBox. Kemudian, di CSS, perilakunya dikontrol dengan sesuatu yang sesederhana ini:

svg { display: inline-block; max-width: 100%; height: self; }

Jika Anda perlu mengubah ukuran banyak SVG secara massal dan tidak ingin mengubah kode, ada alat daring yang berfungsi sebagai alat "pengubah ukuran" untuk SVG.Utilitas ini memungkinkan Anda untuk menentukan ukuran baru dalam persentase atau satuan, menerapkan transformasi, dan mengunduh versi yang telah diskalakan, tanpa perlu menginstal perangkat lunak apa pun.

Cara menyisipkan SVG ke dalam halaman web

Setelah Anda memiliki gambar SVG yang dapat diskalakan, langkah selanjutnya adalah menampilkannya di browser.Ada beberapa cara untuk melakukan ini, dan masing-masing memberi Anda tingkat kendali yang berbeda atas gaya, aksesibilitas, dan kinerja.

Cara paling dasar dan langsung adalah dengan menggunakan label. menunjuk ke file SVG eksternal. Misalnya: Mekanismenya sama seperti pada JPG, hanya saja browser mengetahui bahwa sumber daya tersebut berbasis vektor.

Jika Anda menginginkan kontrol lebih, Anda dapat menyematkan kode SVG itu sendiri di dalam HTML menggunakan tag <img>.Dalam hal ini, Anda menyalin isi file dan menempelkannya ke dalam kode halaman Anda. Ini memungkinkan Anda untuk mengubah warna dengan CSS, menambahkan kelas, memanipulasi bagian tertentu dengan JavaScript, dan meningkatkan aksesibilitas.

Opsi lain, yang kurang umum digunakan saat ini tetapi masih valid, adalah dengan menggunakan salah satu untuk memuat SVG sebagai sumber daya eksternal yang disematkanMeskipun memiliki beberapa keterbatasan dalam hal gaya dan aksesibilitas, dalam praktiknya hampir semua orang lebih menyukai atau SVG sebaris.

Sistem manajemen konten seperti WordPress secara default tidak mengizinkan pengunggahan SVG karena alasan keamanan.Mengaktifkannya sangat mudah dengan menginstal plugin seperti Safe SVG atau SVG Support, yang membersihkan file untuk mencegahnya mengandung skrip berbahaya dan memungkinkan Anda menggunakannya dari pustaka media seperti gambar lainnya.

Berikan sentuhan gaya dan animasi pada SVG dengan CSS dan kode.

Salah satu keunggulan paling ampuh dari memiliki gambar SVG yang dapat diskalakan adalah gambar tersebut dapat diperlakukan seolah-olah merupakan bagian dari DOM halaman itu sendiri.Artinya, kita dapat menerapkan gaya dengan CSS dan membuat animasi dengan CSS, SMIL, atau JavaScript tanpa menyentuh file dasar.

Jika Anda menyematkan SVG secara inline (bukan seperti (eksternal), Anda dapat mengubah warna isi dan garis tepi secara langsung dengan CSS.Contohnya: svg path { fill: red; stroke: blue; }. Ini memungkinkan, misalnya, penggunaan kembali file yang sama untuk menampilkan logo dalam satu warna di header dan warna berbeda di footer.

Atribut fill menentukan warna area interior bentuk, dan stroke mengontrol warna dan ketebalan garis luarnya.Anda juga dapat memodifikasi properti seperti stroke-width, stroke-dasharray, atau stroke-linecap untuk mendapatkan efek gambar tangan atau garis putus-putus.

Untuk animasi sederhana, CSS sudah lebih dari cukup.Anda dapat membuat ikon berubah warna saat Anda mengarahkan kursor ke atasnya, memutar, berkedip, atau menggulir menggunakan transformasi dan transisi standar.

Jika Anda membutuhkan sesuatu yang lebih rumit, standar SVG itu sendiri mencakup elemen-elemen seperti yang memungkinkan animasi atribut di el tiempoContohnya, membuat lingkaran bergerak dari sisi ke sisi, mengubah posisinya cx selama lima detik, dalam sebuah perulangan, tanpa memerlukan skrip eksternal.

Untuk animasi yang kompleks dan interaktif, JavaScript (atau pustaka khusus) memungkinkan Anda untuk menghubungkan SVG dengan peristiwa pengguna.Anda dapat memindahkan bagian-bagian grafik dengan mengklik, menyinkronkan animasi dengan pengguliran, atau mengubah tampilan berdasarkan data yang diterima halaman, membuka peluang untuk visualisasi data yang sangat kaya.

Sprite SVG dan optimasi kinerja

Ketika sebuah situs web menggunakan puluhan atau ratusan ikon, memuat setiap SVG secara terpisah melibatkan banyak permintaan HTTP.Untuk mengurangi jumlah tersebut dan mempercepat pemuatan, sangat bermanfaat untuk menggunakan sprite SVG atau strategi pengelompokan serupa.

Pada dasarnya, sprite SVG adalah file besar yang berisi banyak ikon yang didefinisikan di dalam elemen-elemen tertentu.Kemudian, di setiap bagian HTML Anda tempat Anda ingin menampilkan ikon, Anda menggunakan Dengan cara ini, browser hanya mengunduh sprite sekali dan menggunakan kembali ikon tersebut secara internal.

Teknik ini secara signifikan mengurangi jumlah permintaan ke server.Hal ini mengurangi latensi dan meningkatkan pengalaman pengguna, terutama pada koneksi seluler. Selain itu, Anda tetap dapat mengubah warna dan ukuran menggunakan CSS.

Selain sprite, terdapat alat khusus untuk mengompresi dan mengoptimalkan SVG.Utilitas seperti SVGO atau versi web-nya SVGOMG menganalisis kode, menghapus metadata, spasi, atribut yang tidak perlu, titik yang berlebihan dalam jalur, dan segala sesuatu yang tidak memengaruhi hasil visual.

Banyak editor vektor juga menyertakan fitur penyederhanaan jalur bawaan.Mengurangi jumlah node pada kurva kompleks tidak hanya mengurangi ukuran file, tetapi juga mempermudah pengeditan selanjutnya dan mencegah browser harus menghitung jalur yang terlalu rumit.

Pada halaman dengan banyak grafik di bagian bawah layar, ada baiknya menggabungkan SVG dengan teknik lazy loading.Meskipun SVG biasanya ringan, tidak masuk akal untuk memuat semua ikon dan grafik sekaligus yang baru akan dilihat pengguna setelah mereka menggulir beberapa ratus piksel.

Kompatibilitas, SEO, dan aksesibilitas dalam SVG

Dari segi kompatibilitas, situasi saat ini sangat menguntungkan: semua browser modern secara luas mendukung SVG.Chrome, Firefox, Safari, Edge, dan Opera menampilkan grafis SVG dengan lancar di desktop dan perangkat seluler, dan penetrasi peramban yang benar-benar lama sudah sangat rendah di sebagian besar proyek.

Faktor pembeda utama SVG dibandingkan dengan JPG atau PNG adalah kontennya berupa teks dan, oleh karena itu, dapat dibaca oleh mesin pencari dan teknologi bantu.Hal ini menjadikannya sekutu yang menarik untuk SEO dan aksesibilitas, jika tag dan atribut yang tepat digunakan.

Di dalam suatu elemen Anda dapat menyertakan dan <desc> untuk mendeskripsikan grafikNode-node ini digunakan sebagai informasi yang dapat diakses oleh pembaca layar dan juga memberikan konteks semantik pada konten file, yang mempermudah pengindeksan.

Atribut role="img" memberi tahu teknologi bantu bahwa SVG bertindak sebagai gambar., dan aria-labelledby dapat menghubungkan SVG dengan konten dari dan <desc>. Dalam kasus yang kompleks, tetap disarankan untuk menyertakan teks alternatif pada gambar di HTML atau menggunakan alt pada <img> jika Anda menyisipkannya sebagai sumber eksternal.

Dari perspektif performa pencarian, penggunaan SVG yang dioptimalkan mengurangi ukuran keseluruhan halaman.Semakin sedikit kilobyte berarti waktu pemuatan yang lebih singkat, yang berdampak positif pada metrik seperti LCP atau FCP. Google Hal ini diperhitungkan dalam Core Web Vitals.

Dalam proyek-proyek yang masih menggunakan browser yang sangat lama, solusi cadangan dapat diimplementasikan.Misalnya, menyajikan PNG yang setara menggunakan atau kondisi spesifik. Namun, dalam praktiknya, perbaikan ini semakin jarang dibutuhkan.

Praktik terbaik dalam mendesain dan mengelola file SVG

Membuat gambar SVG yang dapat diskalakan bukan hanya tentang "mengekspor ke SVG," tetapi juga melibatkan disiplin tertentu dalam desain dan pengkodean.Jika Anda berhati-hati dalam memberi nama lapisan, menyederhanakan jalur, dan menyusun file, maka akan lebih mudah untuk dipelihara dan lebih efisien dalam produksi.

Disarankan untuk menjaga agar SVG tetap rapi, dengan indentasi yang konsisten serta nama ID dan kelas yang bermakna.Sebagai contoh, menggunakan id="cart-icon" jauh lebih bermanfaat daripada id="path123" ketika Anda perlu menerapkan gaya khusus dari CSS atau memodifikasi elemen dengan JavaScript.

Meminimalkan elemen tersembunyi, lapisan yang berlebihan, dan atribut duplikat adalah kunci lainnya.Banyak file yang dihasilkan langsung dari program desain membawa informasi yang tidak berguna di web dan dapat dibersihkan dengan aman menggunakan SVGO atau program serupa.

Saat mengerjakan banyak file SVG dalam sebuah proyek, sebaiknya atur file-file tersebut ke dalam folder yang logis dengan nama file yang konsisten.Dengan memiliki /svg/icons/, /svg/logos/, dan /svg/illustrations/, Anda akan menghemat waktu dalam menemukan sumber daya dan akan mempermudah otomatisasi proses optimasi.

Secara visual, ingatlah bahwa SVG akan terlihat bagus baik di layar konvensional maupun layar retina beresolusi tinggi.Menggunakan bentuk yang jelas, kontras yang tepat, dan teks yang tidak terlalu kecil sangat penting untuk memastikan keterbacaan di semua jenis perangkat.

Jika Anda akan menggunakan font di dalam SVG, pertimbangkan apakah Anda ingin mengubah teks menjadi outline atau tetap menggunakan teks biasa.Mengubahnya menjadi kurva memastikan tampilannya akan tetap sama meskipun pengguna tidak memasang font tersebut, tetapi hal itu mengurangi aksesibilitas dan kemampuan untuk mengeditnya; mempertahankannya sebagai teks melindungi semantik, dengan imbalan bergantung pada font yang tersedia.

SVG yang dirancang dengan baik bersifat ringan, mudah dibaca, mudah diakses, dan mudah digunakan kembali dalam berbagai konteks.Dengan menggabungkan praktik desain yang baik, alat optimasi, dan integrasi yang tepat ke dalam HTML dan CSS, Anda dapat memperoleh banyak manfaat dari format ini untuk ikon, logo, grafik, dan animasi, sehingga meningkatkan kualitas visual situs web Anda serta kinerja dan kemampuannya untuk beradaptasi dengan layar apa pun.