SVGs: Buat Grafik HTML5 Yang Berfungsi Di Browser Apa Pun

Penyingkapan: Dukungan Anda membantu menjaga situs tetap berjalan! Kami mendapatkan biaya referensi untuk beberapa layanan yang kami rekomendasikan pada halaman ini.


Saat bekerja dengan gambar di web, penting untuk menggunakan jenis file yang benar untuk tujuan yang Anda maksudkan. Meskipun format seperti JPG, PNG, dan GIF paling akrab bagi pengguna web, mereka mungkin tidak selalu menjadi pilihan yang tepat.

Artikel ini akan memperkenalkan dasar-dasar format gambar lain: format SVG, atau Scalable Vector Graphics.

SVG: Grafik Vektor Scalable

Format Gambar Vektor vs Raster

Dalam dunia file gambar, ada dua jenis format dasar: raster dan vektor. Format berbasis raster didasarkan pada piksel. Format ini termasuk jenis file seperti JPG, PNG, dan GIF.

Terkadang, gambar raster disebut sebagai gambar bitmap, karena sifatnya yang berbasis piksel. Pixel, tentu saja, adalah blok bangunan persegi kecil dari sebagian besar gambar digital yang Anda lihat di web.

Anda dapat mengetahui apakah suatu gambar adalah gambar berbasis raster (atau bitmap) hanya dengan melihatnya dari dekat dan (biasanya) dalam pembesaran yang diperbesar. Jika Anda melihat jutaan kotak kecil pada resolusi yang cukup tinggi (terutama di tempat-tempat di mana satu warna berubah ke yang lain), Anda sedang melihat piksel, dan karenanya itu adalah gambar raster.

Grafik berbasis vektor, di sisi lain, didasarkan pada garis dan kurva, disimpan dalam XML berbasis teks. Mereka sangat didasarkan pada teori matematika, dan akibatnya memerlukan program komputer khusus untuk membuat, membuka, dan mengedit.

Karena gambar berbasis vektor adalah ilustrasi, mereka tidak cocok untuk foto. Namun, gambar yang dibuat oleh artis berdasarkan foto dapat dibuat di SVG. Logo mungkin adalah penggunaan utama SVG di web, bersama dengan ilustrasi khusus merek lainnya.

Font dan tipografi juga dibuat dalam format vektor, sehingga ujung-ujung karakternya segar dan bersih. Jika Anda pernah mencoba menambahkan teks di atas gambar raster di Photoshop atau aplikasi pengeditan gambar lainnya – misalnya, untuk membuat header situs web – kemudian mencoba untuk mengubah ukurannya bahkan sedikit, Anda mungkin telah mencatat bahwa teks dapat terkadang terlihat compang-camping di bagian tepinya.

Itu karena perbedaan antara format vektor dan raster; format SVG adalah cara untuk pergi ke sini.

Keuntungan dari SVG

SVG, seperti yang Anda harapkan dari namanya, adalah grafik berbasis vektor. Mereka bebas resolusi. Bandingkan ini dengan grafik raster, yang bergantung pada resolusi monitor atau layar tempat mereka ditampilkan.

Jadi ketika Anda memperbesar grafik raster – file JPG atau PNG, misalnya – Anda akan melihat gambar semakin kabur dan mendistorsi.

Dalam format SVG, Anda tidak akan. Anda dapat memperbesar dan memperbesar tanpa distorsi gambar itu sendiri.

Ini dimungkinkan karena sifat format SVG. Karena berbasis teks dan bukan berbasis piksel, Anda dapat mengubah ukuran gambar tanpa kehilangan integritas atau kerenyahan detail.

Fitur ini sendiri membuat file SVG sangat berguna untuk dimiliki, terutama untuk gambar yang bergantung pada merek seperti logo kompleks dan grafik situs web lainnya. SVG dapat diubah ukurannya secara bebas untuk proyek-proyek masa depan, menjadikan SVG format yang sangat fleksibel untuk pekerjaan situs web.

Manfaat lain dari menggunakan file SVG adalah lebih efisien untuk menyimpan dan mengirim. SVG adalah deskripsi matematis yang sangat tepat, bukan koleksi besar piksel individu. File SVG yang dihasilkan lebih kecil dari gambar yang sama jika diberikan dalam format berbasis raster.

SVG mendukung animasi untuk setiap elemen dan aspek gambar. Karena mereka berbasis teks, mereka juga dapat dicari dan diindeks, serta dapat dikompresi.

Kerugian dari SVG

Ada satu kelemahan utama menggunakan file gambar dalam format SVG, dan itu adalah kompatibilitas. Anda memerlukan perangkat lunak yang dapat menangani bekerja dengan SVG.

Beberapa dari program itu, seperti Adobe Illustrator, tidak segera dapat diakses oleh semua orang yang mungkin perlu bekerja dengan gambar-gambar itu, tidak seperti kebanyakan editor (banyak dari mereka gratis) tersedia untuk bekerja dengan gambar berbasis raster.

Namun, Inkscape adalah editor open-source gratis yang dapat menangani file SVG.

Ekstensi Format Vektor Lainnya

Selain SVG (scalable vector graphic), ekstensi file vektor dasar meliputi:

  • .drw (file vektor)
  • .eps (Encapsulated PostScript)
  • .pct (format grafik bitmap Macintosh)
  • .pif (format gambar GDF vektor)
  • .ps (Adobe PostScript)
  • .svf (format vektor sederhana)

Elemen SVG dalam HTML5

Menggunakan elemen HTML, Anda dapat membuat beberapa bentuk dasar dengan SVG di browser. Setiap elemen ini harus disarangkan di dalam tag.

Baris

Elemen ini dapat digunakan untuk membuat satu garis lurus, terdiri dari dua titik – awal dan akhir. Setiap titik, tentu saja, akan memiliki dua koordinat, “x” dan “y.”

Kode akan terlihat seperti ini:

Anda juga dapat memasangkan atribut lainnya dengan < baris > elemen: stroke mendefinisikan warna dan lebar stroke mengontrol ketebalan garis.

Rect

Buat persegi panjang menggunakan elemen dan tentukan dimensi dengan atribut lebar dan tinggi. Anda juga dapat memberikan warna dengan isian dan garis besar persegi panjang dengan goresan, seperti yang ditunjukkan dalam kutipan kode di bawah ini:

Lingkaran

Seperti yang Anda harapkan, elemen membuat lingkaran. Untuk membuat lingkaran dengan jari-jari 40 (atur dengan atribut r), pusatkan 40 piksel ke bawah dan 40 di seberang sudut kiri atas, isian hijau dan garis hitam, gunakan kode di bawah ini:

Jika Anda tidak menentukan atribut cx dan cy, browser akan menafsirkan nilai default “0.”

Elemen lain yang bisa Anda mainkan termasuk,, dan .

Dukungan Browser

SVG didukung dengan baik di semua browser utama yang tersedia, tidak termasuk IE8 dan versi sebelumnya.

Bagaimana dengan SWF??

Desainer dan pengembang berpengalaman mengenal SWF dengan baik – format animasi dan grafik Flash – dan sementara SVG telah ada selama beberapa waktu, hanya dalam beberapa tahun terakhir dukungan untuk itu telah menjadi arus utama..

Dengan dukungan untuk Flash yang berkurang dalam mendukung HTML5, CSS, JavaScript, dan SVG, sangat penting bagi para profesional web memahami perbedaan antara SVG dan SWF dan belajar menggunakan teknologi modern.

Apa itu SWF??

SWF adalah akronim yang merupakan singkatan dari Small Web Format. Ini adalah format file Adobe Flash yang dapat digunakan untuk grafik, animasi, dan widget applet yang disematkan. Plugin Flash harus diinstal di browser agar konten SWF dapat di-render.

SWF telah ada sejak lama, didukung oleh sejumlah besar pengembang yang memenuhi syarat, dan ada banyak animasi dan tutorial SWF yang sudah dibangun sebelumnya tersedia.

Persamaan dan Perbedaan Antara SVG dan SWF

SWF dan SVG keduanya format file grafik vektor, dan keduanya dapat dituliskan untuk membuat animasi dan interaktivitas. Dengan cara ini mereka serupa. Namun, ada banyak cara di mana SWF dan SVG berbeda.

SVG adalah Standar Terbuka

Standar SVG dikembangkan oleh World Wide Web Consortium (W3C) dan, sebagai hasilnya, benar-benar terbuka dan bebas untuk digunakan dan dikembangkan. SWF, di sisi lain, adalah format Flash milik Adobe. Pada tahun 2008, Adobe menghapus banyak pembatasan yang mengatur penggunaan SWF, tetapi SWF tetap merupakan format berpemilik.

SVG Lebih Mudah Diajak Bekerja Sama

Kode SVG adalah XML teks biasa yang dapat dibaca manusia. SVG dapat dibuat menggunakan editor teks biasa dan membuat SVG sederhana mudah dilakukan dan dapat dipelajari dengan cepat oleh siapa pun yang akrab dengan bahasa web seperti HTML, CSS, dan JavaScript. SWF harus dibuat dan diedit dengan program yang kompleks seperti Adobe After Effects atau alternatif open-source seperti Motion-Twin ActionScript 2 Compiler.

Selain itu, penulisan SVG untuk animasi dan interaktivitas dapat dilakukan dengan CSS dan JavaScript – bahasa yang digunakan setiap desainer dan pengembang web setiap hari. SWF, di sisi lain, ditulis dengan Adobe’s ActionScript yang mirip dengan JavaScript tetapi tidak identik, dan sebagian besar pengembang menanganinya dengan basis yang jauh lebih jarang..

Menambahkan SVG ke situs web juga sesederhana menjatuhkan kode ke dalam dokumen HTML yang sejalan dengan elemen HTML lainnya. Atau, SVG dapat disematkan ke dalam dokumen HTML. SWF harus tertanam ke dalam dokumen HTML.

SVG Lebih Baik untuk SEO

Karena SVG ditulis dalam teks biasa, mereka dapat dibaca dan diindeks oleh mesin pencari. SWF, di sisi lain, adalah file biner yang sulit untuk ditafsirkan oleh mesin pencari. Akibatnya, jika Anda menggunakan SVG atau SWF untuk mengirimkan konten, Anda lebih baik dilayani untuk menggunakan SVG jika lalu lintas mesin pencari penting untuk situs web Anda.

Dukungan SVG Berkembang

Sementara dukungan file SWF tersedia di sebagian besar browser web desktop, hal yang sama tidak berlaku untuk browser seluler. Dukungan untuk konten Flash, termasuk file SWF, sebagian besar telah dihapus dari browser seluler. Dukungan untuk SVG, di sisi lain, ditawarkan oleh setiap browser modern dan dukungan untuk fitur-fitur baru sedang ditambahkan secara berkelanjutan.

SVG dan SWF Mendukung Berbagai Jenis Media

Konten suara dan video dapat disematkan langsung ke file SWF. SVG tidak termasuk dukungan untuk konten suara dan video. Namun, fitur HTML5 lainnya mendukung konten audio dan video, dan fitur ini dapat disematkan langsung ke SVG. Akibatnya, audio dan video dapat disematkan dalam SVG, tetapi pemutaran ditangani oleh pemain lain, bukan oleh standar SVG itu sendiri.

Ringkasan SWF

Sementara grafis berbasis Flash menguasai web di masa lalu, masa depan milik SVG yang dianimasikan dengan CSS dan JavaScript. Sumber daya berikut akan membantu perancang web dan webmaster menjaga keterampilan mereka tetap mutakhir dan mulai menggunakan SVG dalam proyek mereka.

Sumber Daya SVG

Ada banyak artikel, tutorial, dan panduan gratis untuk membantu Anda memulai SVG. Inilah beberapa yang terbaik.

Pelajari Dasar-Dasarnya

Jika Anda baru memulai dengan SVG, lihat tutorial ini dari Creative Bloq untuk membuat bentuk sederhana dan menggunakan isian dan gradien. Opsi kedua yang mencakup banyak teknik dasar yang sama adalah panduan ini untuk memulai SVG dari Envato Tuts+.

Gunakan Perangkat Lunak Grafik untuk Membuat SVG

Jika Anda akan membuat sesuatu yang lebih kompleks daripada bentuk sederhana, Anda ingin bekerja dengan program grafik vektor seperti Adobe Illustrator yang dapat mengekspor file dalam format SVG. Panduan singkat ini dari CSS-Trik akan menunjukkan kepada Anda cara menggunakan Illustrator untuk membuat iklan animasi yang hanya menggunakan HTML dan CSS. Sumber hebat lain untuk mempelajari cara menggunakan ilustrator untuk membuat SVG berasal dari Web Designer Depot.

Jika Anda tidak memiliki akses ke Adobe Illustrator, Anda tidak beruntung. Inkscape adalah program grafik vektor berkualitas profesional yang gratis dan open-source. Ada juga banyak tutorial hebat yang tersedia dari Inkscape yang akan membantu Anda memulai program dan menunjukkan kepada Anda cara mengekspor kreasi Anda dalam format SVG.

Pelajari Teknik SVG Lanjut

Jika Anda ingin benar-benar menguasai SVG, ada dua sumber yang perlu Anda luangkan waktu untuk mengulas:

  • Tutorial SVG dari Jaringan Pengembang Mozilla.
  • Primer SVG untuk Peramban Hari Ini, ebook gratis dari W3C.

Kedua sumber ini sangat luas dan mencakup seluruh pemikiran dan praktik saat ini sehubungan dengan pemrograman SVG. Sumber daya ini bukan untuk pemula, tetapi jika Anda merasa nyaman dengan HTML dan CSS, dan ingin menjadi mahir bekerja dengan SVG, maka Anda siap untuk menggunakannya.

Buat Animasi SVG

SVG dapat digunakan untuk membuat animasi yang benar-benar mengesankan. Setelah Anda merasa nyaman bekerja dengan SVG, jika Anda ingin belajar cara membuat animasi SVG yang mengesankan, periksa sumber daya ini:

  • Tutorial dari David Walsh untuk membuat animasi SVG menggunakan CSS dan JavaScript.
  • Tutorial ekstensif dari Jenkov yang mencakup semua aspek bekerja dengan SVG, termasuk animasi CSS dan skrip JavaScript.
  • Daftar delapan pustaka JavaScript terkemuka Hongkiat untuk membuat animasi SVG.

Sumber Daya Lebih Lanjut

  • Tutorial SVG Mozilla Developers Network SVG: tutorial dalam proses yang membahas setiap aspek format SVG untuk digunakan di browser Mozilla.
  • The Simple Intro to SVG Animation: tutorial hebat yang ditulis oleh David Walsh.
  • ImageMagick Pendahuluan dan Sumber Daya: koleksi alat grafis, yang mencakup beberapa untuk PostScript.

Kesimpulan

Memanfaatkan SVG dalam kreasi grafis dan desain web Anda mungkin bukan sesuatu yang biasa Anda gunakan, tetapi tidak diragukan lagi merupakan upaya yang bermanfaat untuk membiasakan diri dengan mereka. Semoga di atas akan membantu membimbing pembelajaran Anda.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me