SVG: Buat Grafik HTML5 yang Berfungsi di Penyemak Imbas Mana-mana

Pendedahan: Sokongan anda membantu mengekalkan laman web ini! Kami memperoleh bayaran rujukan untuk beberapa perkhidmatan yang kami cadangkan di halaman ini.


Semasa bekerja dengan gambar di web, penting untuk menggunakan jenis fail yang betul untuk tujuan yang anda inginkan. Walaupun format seperti JPG, PNG, dan GIF paling biasa bagi pengguna web, mereka mungkin tidak selalu menjadi pilihan yang sesuai.

Artikel ini akan memperkenalkan anda kepada asas-asas format gambar jenis lain: format SVG, atau Grafik Vektor Berskala.

SVG: Grafik Vektor Berskala

Format Gambar Vektor vs Raster

Dalam dunia fail gambar, terdapat dua jenis format asas: raster dan vektor. Format berasaskan raster berdasarkan piksel. Format ini merangkumi jenis fail seperti JPG, PNG, dan GIF.

Kadang kala, gambar raster disebut sebagai gambar bitmap, kerana sifatnya berdasarkan piksel. Piksel, tentu saja, adalah blok bangunan persegi kecil dari sebahagian besar gambar digital yang anda lihat di web.

Anda dapat mengetahui sama ada gambar itu adalah gambar berdasarkan raster (atau bitmap) hanya dengan melihatnya dari dekat dan (biasanya) dalam zoom yang diperbesar. Sekiranya anda melihat berjuta-juta kotak kecil pada resolusi yang cukup tinggi (terutama di tempat-tempat di mana satu warna berubah menjadi yang lain), anda melihat piksel, dan dengan itu gambarnya lebih rancak.

Grafik berasaskan vektor, sebaliknya, berdasarkan garis dan lengkung, disimpan dalam XML berasaskan teks. Mereka sangat berdasarkan teori matematik, dan sebagai hasilnya memerlukan program komputer khas untuk dibuat, dibuka dan diedit.

Kerana gambar berdasarkan vektor adalah ilustrasi, gambar tersebut tidak sesuai untuk gambar. Walau bagaimanapun, gambar yang dibuat oleh artis berdasarkan foto boleh dibina di SVG. Logo mungkin merupakan penggunaan utama SVG di web, bersama dengan ilustrasi khusus jenama lain.

Font dan jenis huruf juga dibuat dalam format vektor, sehingga tepi wataknya tajam dan bersih. Sekiranya anda pernah mencuba menambahkan teks di atas gambar raster di Photoshop atau beberapa aplikasi penyuntingan gambar lain – contohnya, untuk membuat tajuk laman web – kemudian cuba mengubah ukurannya walaupun sedikit, anda mungkin telah memperhatikan bahawa teks itu boleh kadang-kadang kelihatan compang-camping di tepinya.

Itu kerana perbezaan antara format vektor dan raster; format SVG adalah cara untuk pergi ke sini.

Kelebihan SVG

SVG adalah, seperti yang anda harapkan dari namanya, grafik berasaskan vektor. Mereka tidak bergantung kepada resolusi. Bandingkan ini dengan grafik raster, yang bergantung pada resolusi monitor atau layar yang ditampilkan.

Oleh itu, apabila anda memperbesar grafik raster – contohnya fail JPG atau PNG – anda akan melihat gambar semakin kabur dan memutarbelitkan.

Dalam format SVG, anda tidak akan. Anda boleh memperbesar dan memperbesar masuk tanpa penyelewengan gambar itu sendiri.

Ini dimungkinkan kerana sifat format SVG. Kerana berdasarkan teks dan bukan berdasarkan piksel, anda boleh mengubah saiz gambar tanpa kehilangan integriti atau kejelasan terperinci.

Ciri ini sahaja menjadikan fail SVG sangat berguna untuk dimiliki, terutamanya untuk gambar yang bergantung kepada jenama seperti logo yang kompleks dan grafik laman web yang lain. SVG dapat diubah ukurannya secara bebas untuk projek masa depan, menjadikan SVG sebagai format yang sangat fleksibel untuk kerja laman web.

Manfaat lain menggunakan fail SVG adalah bahawa mereka lebih cekap menyimpan dan menghantar. SVG adalah penerangan matematik yang tepat dan bukannya koleksi piksel individu. Fail SVG yang dihasilkan lebih kecil daripada gambar yang sama jika diberikan dalam format berbasis raster.

SVG menyokong animasi untuk setiap elemen dan aspek gambar. Kerana berdasarkan teks, mereka juga dapat dicari dan diindeks, serta boleh dimampatkan.

Kekurangan SVG

Terdapat satu kelemahan utama menggunakan fail gambar dalam format SVG, dan keserasian itu. Anda memerlukan perisian yang dapat menangani kerja dengan SVG.

Sebahagian daripada program tersebut, seperti Adobe Illustrator, tidak dapat diakses dengan segera oleh semua orang yang mungkin perlu bekerja dengan gambar tersebut, tidak seperti banyak penyunting (banyak dari mereka percuma) yang tersedia untuk bekerja dengan gambar berdasarkan raster.

Walau bagaimanapun, Inkscape adalah penyunting sumber terbuka percuma yang dapat menangani fail SVG.

Sambungan Format Vektor Lain

Sebagai tambahan kepada SVG (grafik vektor berskala), sambungan fail vektor asas termasuk:

  • .drw (fail vektor)
  • .eps (PostScript Terkapsul)
  • .pct (format grafik bitmap Macintosh)
  • .pif (format vektor gambar GDF)
  • .ps (Adobe PostScript)
  • .svf (format vektor mudah)

Elemen SVG dalam HTML5

Dengan menggunakan elemen HTML, anda boleh membuat beberapa bentuk asas dengan SVG di penyemak imbas. Setiap elemen ini perlu disusun dalam teg.

Garisan

Elemen tersebut dapat digunakan untuk membuat satu garis lurus, yang terdiri daripada dua titik – permulaan dan akhir. Setiap titik, tentu saja, akan mempunyai dua koordinat, “x” dan “y.”

Kodnya akan kelihatan seperti ini:

Anda juga boleh memasangkan atribut lain dengan < garisan > elemen: pukulan mentakrifkan warna dan lebar pukulan mengawal ketebalan garis.

Betul

Buat segi empat menggunakan elemen dan tentukan dimensi dengan atribut lebar dan tinggi. Anda juga dapat memberikan warna dengan isian dan untuk garis besar segi empat dengan stroke, seperti yang ditunjukkan dalam petikan kod di bawah:

Bulatan

Seperti yang anda jangkakan, elemen itu membuat bulatan. Untuk membuat bulatan dengan jari-jari 40 (diatur dengan atribut r), berpusat 40 piksel ke bawah dan 40 di seberang sudut kiri atas, isian hijau dan garis hitam, gunakan kod di bawah:

Sekiranya anda tidak menentukan atribut cx dan cy, penyemak imbas akan mentafsirkan nilai lalai “0.”

Elemen lain yang boleh anda mainkan termasuk, dan .

Sokongan Penyemak Imbas

SVG disokong dengan baik di semua penyemak imbas utama yang tersedia, tidak termasuk IE8 dan versi sebelumnya.

Bagaimana dengan SWF?

Pereka dan pembangun yang berpengalaman mengetahui SWF dengan baik – format animasi dan grafik Flash – dan sementara SVG telah wujud sejak beberapa lama, hanya beberapa tahun kebelakangan ini yang menyokongnya telah menjadi arus perdana.

Dengan sokongan untuk Flash yang merosot dan menyokong HTML5, CSS, JavaScript, dan SVG, sangat penting bagi para profesional web untuk memahami perbezaan antara SVG dan SWF dan belajar menggunakan teknologi moden.

Apa itu SWF?

SWF adalah singkatan dari Small Web Format. Ini adalah format fail Adobe Flash yang dapat digunakan untuk grafik, animasi, dan widget applet tertanam. Plugin Flash mesti dipasang dalam penyemak imbas agar kandungan SWF dapat dihasilkan.

SWF telah ada sejak sekian lama, disokong oleh banyak pengembang yang berkelayakan, dan terdapat banyak animasi dan tutorial SWF yang sudah siap sedia.

Persamaan dan Perbezaan Antara SVG dan SWF

SWF dan SVG kedua-duanya adalah format fail grafik vektor, dan keduanya dapat ditulis untuk membuat animasi dan interaktiviti. Dengan cara ini mereka serupa. Walau bagaimanapun, terdapat banyak cara di mana SWF dan SVG berbeza.

SVG adalah Standard Terbuka

Standard SVG dikembangkan oleh World Wide Web Consortium (W3C) dan, sebagai hasilnya, terbuka sepenuhnya dan bebas untuk digunakan dan dibangunkan. SWF, sebaliknya, adalah format Flash yang dimiliki oleh Adobe. Pada tahun 2008, Adobe menghapus banyak sekatan yang mengatur penggunaan SWF, tetapi SWF tetap menjadi format hak milik.

SVG Lebih Mudah Diusahakan

Kod SVG adalah teks biasa XML yang boleh dibaca manusia. SVG dapat dibuat dengan menggunakan penyunting teks biasa dan membuat SVG ringkas mudah dilakukan dan dapat dipelajari dengan cepat oleh siapa saja yang biasa dengan bahasa web seperti HTML, CSS, dan JavaScript. SWF mesti dibuat dan diedit dengan program yang kompleks seperti Adobe After Effects atau alternatif sumber terbuka seperti Motion-Twin ActionScript 2 Compiler.

Sebagai tambahan, skrip SVG untuk animasi dan interaktiviti dapat dilakukan dengan CSS dan JavaScript – bahasa yang digunakan setiap pereka web dan pembangun setiap hari. SWF, sebaliknya, ditulis dengan ActionScript Adobe yang serupa dengan JavaScript tetapi tidak serupa, dan kebanyakan pembangun menghadapinya dengan lebih jarang.

Menambah SVG ke laman web juga semudah menjatuhkan kod ke dalam dokumen HTML sesuai dengan elemen HTML yang lain. Sebagai alternatif, SVG boleh dimasukkan ke dalam dokumen HTML. SWF mesti dimasukkan ke dalam dokumen HTML.

SVG Lebih Baik untuk SEO

Oleh kerana SVG ditulis dalam teks biasa mereka dapat dibaca dan diindeks oleh mesin pencari. SWF, sebaliknya, adalah fail binari yang sukar ditafsirkan oleh enjin carian. Akibatnya, jika anda menggunakan SVG atau SWF untuk menyampaikan kandungan, lebih baik anda menggunakan SVG jika trafik mesin pencari penting untuk laman web anda.

Sokongan SVG semakin bertambah

Walaupun sokongan fail SWF tersedia di kebanyakan penyemak imbas web desktop, perkara yang sama tidak berlaku untuk penyemak imbas mudah alih. Sokongan untuk kandungan Flash, termasuk fail SWF, sebahagian besarnya dihapus dari penyemak imbas mudah alih. Sokongan untuk SVG, sebaliknya, ditawarkan oleh setiap penyemak imbas moden dan sokongan untuk ciri baru ditambahkan secara berterusan.

Kedua-dua SVG dan SWF menyokong pelbagai jenis media

Kandungan suara dan video dapat dimasukkan ke dalam fail SWF. SVG tidak termasuk sokongan untuk kandungan suara dan video. Walau bagaimanapun, ciri HTML5 lain menyokong kandungan audio dan video, dan ciri-ciri ini dapat disematkan terus ke SVG. Akibatnya, audio dan video dapat disematkan dalam SVG, tetapi pemutaran dikendalikan oleh pemain lain, bukan oleh standard SVG itu sendiri.

Ringkasan SWF

Walaupun grafik berasaskan Flash menguasai web pada masa lalu, masa depan adalah milik SVG yang dianimasikan dengan CSS dan JavaScript. Sumber berikut akan membantu pereka web dan webmaster mengekalkan kemahiran mereka sehingga kini dan mula menggunakan SVG dalam projek mereka.

Sumber SVG

Terdapat banyak artikel, tutorial, dan panduan percuma untuk membantu anda memulakan SVG. Berikut adalah antara yang terbaik.

Ketahui Asasnya

Sekiranya anda baru memulakan SVG, lihat tutorial ini dari Creative Bloq untuk membuat bentuk sederhana dan menggunakan pengisian dan kecerunan. Pilihan kedua yang merangkumi banyak teknik asas yang sama adalah panduan untuk memulakan SVG dari Envato Tuts+.

Gunakan Perisian Grafik untuk Membuat SVG

Sekiranya anda ingin membuat sesuatu yang lebih rumit daripada bentuk sederhana, anda pasti ingin bekerja dengan program grafik vektor seperti Adobe Illustrator yang dapat mengeksport fail dalam format SVG. Panduan ringkas dari CSS-Tricks ini akan menunjukkan kepada anda cara menggunakan Illustrator untuk membuat iklan animasi yang hanya menggunakan HTML dan CSS. Sumber hebat lain untuk belajar bagaimana menggunakan ilustrator untuk membuat SVG berasal dari Depot Pereka Web.

Sekiranya anda tidak mempunyai akses ke Adobe Illustrator, anda tidak bernasib baik. Inkscape adalah program grafik vektor berkualiti profesional yang bebas dan sumber terbuka. Terdapat juga banyak tutorial hebat yang tersedia dari Inkscape yang akan membantu anda memulakan program ini dan menunjukkan cara mengeksport kreasi anda dalam format SVG.

Ketahui Teknik SVG Lanjutan

Sekiranya anda ingin menguasai SVG terdapat dua sumber yang perlu anda luangkan masa untuk mengkaji:

  • Tutorial SVG dari Rangkaian Pembangun Mozilla.
  • Primer SVG untuk Penyemak Imbas Hari Ini, ebook percuma dari W3C.

Kedua-dua sumber ini luas dan merangkumi luas pemikiran dan amalan semasa berkaitan dengan pengaturcaraan SVG. Sumber daya ini bukan untuk pemula, tetapi jika anda selesa dengan HTML dan CSS, dan ingin menjadi mahir dalam bekerja dengan SVG, maka anda sudah bersedia untuk menggunakannya.

Buat Animasi SVG

SVG boleh digunakan untuk membuat animasi yang sungguh mengagumkan. Setelah anda selesa bekerja dengan SVG, jika anda ingin belajar bagaimana membuat animasi SVG yang mengagumkan, lihat sumber-sumber ini:

  • Tutorial dari David Walsh untuk membuat animasi SVG menggunakan CSS dan JavaScript.
  • Tutorial lengkap dari Jenkov yang merangkumi semua aspek bekerja dengan SVG, termasuk animasi CSS dan skrip JavaScript.
  • Senarai lapan perpustakaan JavaScript terkemuka Hongkiat untuk membuat animasi SVG.

Sumber Lanjut

  • Tutorial MoVilla Developers Network SVG: tutorial dalam proses yang membincangkan setiap aspek format SVG untuk digunakan dalam penyemak imbas Mozilla.
  • Pengenalan Sederhana untuk Animasi SVG: tutorial hebat yang ditulis oleh David Walsh.
  • Pengenalan dan Sumber GambarMagick: koleksi alat grafik, yang merangkumi beberapa untuk PostScript.

Kesimpulannya

Menggunakan SVG dalam ciptaan grafik dan reka bentuk web anda mungkin bukan sesuatu yang biasa Anda gunakan untuk melancarkan pintu gerbang, tetapi sudah tentu usaha yang bermanfaat untuk membiasakan diri dengan mereka. Semoga perkara di atas dapat membantu membimbing pembelajaran anda.

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